calc.md

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

링크

• A Complete Guide to calc() in CSS