CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수
개요
calc()
는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다. 예를 들어
font-size: calc( 10px + 10px );
는 글자 크기를 20px로 설정한다.
문법
연산자
+
는 덧셈,-
는 뺄셈,*
는 곱셈,/
는 나눗셈이다.- 곱셈과 나눗셈의 좌우에는 공백이 없어도 된다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 한다.
계산 순서
- 왼쪽에서 오른쪽으로 계산한다.
- 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 나중에 한다.
- 괄호가 있으면 괄호 안 부터 계산한다.
예제
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> 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 / 2 + 5px ); } </style> </head> <body> <div class="a"><code>width: 80%;</code></div> <div class="b"><code>width: calc( 80% - 20px );</code></div> <div class="c"><code>width: calc( ( 40% * 2 ) - 40px / 2 );</code></div> <div class="d"><code>font-size: calc( 4em / 2 + 5px );</code></div> </body> </html>