2021-01-15 09:39:21

어떤 웹사이트들의 CSS를 보면 가끔 calc라는 이름의 함수를 만나곤 합니다. 이름(calculation)으로 예측할 수 있듯이 속성의 값을 계산을 해주는 함수입니다. + - * / 사칙연산을 지원합니다. calc 함수는 CSS3 버전부터 제공되는 함수입니다. 

 

calc 함수는 브라우저의 크기에 따라 요소의 너비가 높이가 변화해야하는 경우 사용하기 적절합니다. 아래 예제 코드를 보시면 쉽게 이해하실 수 있을 것입니다. 

 

See the Pen CSS calc 함수 사용법 예제 by kyohoonsim (@kyohoonsim) on CodePen.

 

주의하실 점은 + 또는 -를 해줄 때 +와 - 양 옆에 띄어쓰기를 해줘야합니다. 붙여서 쓰면 작동하지 않습니다.