# 14.calc

css

# 목차

1. 개요
2. 기본문법
3. 예제
- 3.1. 가변너비 요소 지정

# 1. 개요

MDN

https://developer.mozilla.org/ko/docs/Web/CSS/calc

CSS 속성의 값으로 계산식을 지정할 수 있다.

# 2. 기본문법

property: calc(expression);

예시: width: calc(100% - 80px);

# 3. 예제

# 3.1. 가변너비 요소 지정

미리보기

https://qwerewqwerew.github.io/source/css/14-calc

요소의 가변 너비를 쉽게 지정하기

Code

<div class="banner">이건 현수막입니다!</div>

.banner {
	position: absolute;
	left: 40px;
	width: calc(100% - 80px);
	border: solid black 1px;
	box-shadow: 1px 2px;
	background-color: yellow;
	padding: 6px;
	text-align: center;
	box-sizing: border-box;
}

css calc