calc()
calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다.
예를 들어
font-size : calc( 10px + 10px );
는 글자 크기를 20px로 만듭니다.
문법
연산자
- +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다.
- 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다.
- 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다.
계산 순서
- 왼쪽에서 오른쪽으로 계산합니다.
- 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 나중에 합니다.
- 괄호가 있으면 괄호 안 부터 계산합니다.
예제
<p><b>width</b></p>
<div class="a">80%</div>
<div class="b">calc(80% - 20px)</div>
<div class="c">calc((40% * 2) - 40px / 2)</div>
<br/>
<p><b>font-size</b></p>
<div class="d">calc(4em / 3 + 5px)</div>
div {
margin: 10px 0px;
border: 1px solid #dadada;
}
.a {
width: 80%;
}
.b {
width: calc(80% - 20px);
}
.c {
width: calc((40% * 2) - 40px / 2 );
}
.d {
font-size: calc(4em / 3 + 5px);
}