14 calc
1. 개요
CSS 속성의 값으로 계산식을 지정할 수 있다.
2. 기본문법
property: calc(expression);
예시: width: calc(100% - 80px);
3. 예제
3.1. 가변너비 요소 지정
[미리보기]
요소의 가변 너비를 쉽게 지정하기
- HTML
- CSS
<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;
}<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;
}