25. calc

1. 개요

MDN

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

2. 기본문법

property: calc(expression);

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

3. 예제

3.1. 가변너비 요소 지정

[미리보기]

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

HTML

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

CSS

.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;
}