css3 calc
사용가능 연산자 및 단위
- 연산자
+ - * / - 단위
% rem em px
계산 방식
곱셈
- 곱셈 연산중 하나이상의 피연산자는 숫자(넘버, 정수 & 실수) 여야 합니다.
나눗셈
- 나눗셈 오른쪽 피연산자는 숫자이어야 합니다.
- 0으로 나눌수 없습니다.
더하기
- 연산자 좌우에 공백이 있어야 합니다.
calc(A + B)
빼기
- 연산자 좌우에 공백이 있어야 합니다.
calc(A + B)
참고
- css변수를 사용할 수 있습니다.
--widthB: calc(var(--widthA) / 2)(IE대체 수단을 생각하고 주의하여 사용 합니다.) - 연산에 음수를 사용할 수 있습니다.
- 결과는 값으로 사용됩니다.
- 하나의 묶음 단위 연산항의 결과는 css 속성에 대입되는 수치(단위)를 가져야 합니다.
- 결과가 반영 되는 속성의 브라우저 렌더링은 각 브라우저에 따라 최소 사이즈가 존재 할 수도 있습니다.
예제
- 반응형에서 폰트사이즈의 크기를 화면에 비례하여 적용
font-size: calc(1.5rem + 3vw);
font-size: calc(20px + -3 * (100vw - 576px) / 624)
75 = (1200px - 750px) / 6
calc(26px - (6px - ((100vw - 750px) / 75)))
브라우저 지원
| 크롬 | 엣지&IE | FF | safari | opera |
|---|---|---|---|---|
| 26.0 19.0 -webkit- | 9.0 | 16.0 4.0 -moz- | 7.0 6.0 -webkit- | 15.0 |