CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수
반응형
개요
calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다.
예를 들어
는 글자 크기를 20px로 만듭니다.
- 버전 : CSS Level 3
문법
연산자
- +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다.
- 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다.
계산 순서
- 왼쪽에서 오른쪽으로 계산합니다.
- 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 나중에 합니다.
- 괄호가 있으면 괄호 안 부터 계산합니다.
예제
브라우저 지원
- Chrome : 26.0+
- Firefox : 16.0+
- Internet Explorer : 9.0+
- Opera : 15.0+
- Safari : 7.0+
반응형
'CODING > HTML & CSS' 카테고리의 다른 글
| CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법 (0) | 2019.04.29 |
|---|---|
| SASS 문법 (0) | 2019.03.11 |
| 브라우저 렌더링 : reflow & repaint (0) | 2018.12.19 |
| 자간, 어간, 행간 간격조절 (0) | 2018.11.01 |
| div 세로 중앙 정렬팁 - 02(display: table) (0) | 2018.10.23 |
