[CSS] calc에 대해 알아보자

1. calc란

 

괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다.

 

 

2. 사용방법

See the Pen calc by limhaneul2244 (@limhaneul2244) on CodePen.

width, height, margin, padding 값을 사칙연산자를 이용해 표현할 수 있다.

width값을 %로 나눌때 33.3333%나오거나 딱 떨어지지 않을때가 있는데 이럴때 사용하면 좋다.

 

3. 사용시 유용한 팁

• 계산은 좌에서 우로 진행됨
• 사칙연산과 마찬가지로 곱하기, 나누기가 제일 먼저 연산된다.
• 예를 들어 calc(50% - 10px) 과 같이 연산시 다른 단위값들을 사용할 수 있다.
• calc(100% - 20px)과 같이 더하기( + ), 빼기( - ) 연산자의 경우 앞뒤 공백이 반드시 들어간다.
• 곱하기( * ) 나누기( / )는 공백이 필요하지 않는다.
• calc()는 오페라 브라우저와 IE9미만 브라우저는 지원되지 않는다. 
• 구 브라우저의 경우 접두어 필요 (-moz, -webkit, -o-)

height: calc(100% - 20px);
height: -webkit-calc(100% - 20px);  /*크롬, 사파리*/
height: -moz-calc(100% - 20px);     /*파이어폭스*/
height: -o-calc(100% - 20px);       /*오페라*/

 

4. 안긴 calc 함수

IE를 제외한 최신 브라우저 모두 지원

height: calc(calc(100% / 5) - 10px);

 

 

 

---

참고자료

CSS만으로 종횡비를 유지하며 배경 이미지 영역을 표시하는 방법

calc()함수 사용법

[func] CSS - calc() 함수 ★ - 계산 수행해 CSS 속성값 결정. (= calc함수 = 캘크함수) ※ 길이계산 = 계산값얻기 = 수식계산)