코드쓰는사람

CSS3에 새롭게 추가된 기능 중 calc()라는 것이 있습니다. 이름에서 보듯이 계산을 해주는 속성인데 기존에 자바스크립트로 하던 계산을 상당 부분 덜어줍니다. 예를 들어, 모든 문단을 "100% 너비에서 20픽셀(px)만큼 뺀 너비"로 설정하고 싶다면 다음과 같이 작성합니다.

p {
  width : 95%; /* 구식 브라우저를 위한 대비책(fallback) */
  width : -webkit-calc(100% - 20px); /* for Chrome, Safari */
  width : -moz-calc(100% - 20px); /* for Firefox */
  width : calc(100% - 20px); /* for IE */
}

calc() 내부에 입력할 수 있는 표현식은 +, -, *, / 등의 사칙 연산이 가능합니다. 주의할 부분은 사칙 연산시 + 또는 - 는 반드시 기호 양쪽으로 공백을 삽입해야 한다는 것입니다. 예를 들어, calc(100%/6) 또는 calc(100%/6 - 30px)는 유효한 표현식이지만 calc(100%/6-30px)는 유효하지 않습니다. 또한, 계산은 같은 분류(길이면 길이, 각도면 각도)에 있는 값끼리 해야합니다.

속성에 따라 계산 결과가 보정되는 경우가 있습니다. 예를 들어, 다음 예제에 있는 두 속성의 값은 같은 값입니다.

width: calc(5px - 10px);
width: 0px;

표현식에 따르면 5px - 10px = -5px이지만, 너비의 경우 0보다 작은 값을 허용하지 않기 때문에 계산 결과는 0px와 같습니다.

표현식에 사용할 수 있는 단위로는 길이, 주기, 각도, 시간, 숫자 등이 가능합니다. 다음 표에서는 유용한 몇 가지 단위에 대해 정리해 보았습니다.

종류	단위	의미
길이	em	글자 크기에 상대적인 단위. 1em은 계산된 font-size의 값과 같다.
	rem	em과 거의 같지만 루트 요소의 font-size 값을 기준으로 비교한다.
	cm	센치미터
	mm	밀리미터
	in	인치
	px	픽셀 (1/96인치와 같다)
	pt	포인트 (1/72인치와 같다)
	pc	파이카 (12포인트와 같다)
각도	deg	도. 원을 360단계로 나눈 단위
	rad	라디안. 원은 2π 라디안이다.
	turn	턴. 원은 1턴이다.

주의할 점이 하나 있는데, 예전 버전의 크롬은 같은 요소, 같은 속성에 -webkit-calc()를 두 번 정의하지 못하는 버그가 있습니다. 예를 들어, 다음과 같은 코드를 가정해보겠습니다.

<input type="text">
<style> input { width:-webkit-calc(50% + 30px); }
input[type=text] { width:-webkit-calc(60% - 20px); }
</style>

input 속성에 적용되어야 하는 width 속성은 -webkit-calc(60% - 20px)이지만, 크롬에서는 먼저 정의된 -webkit-calc(50% + 30px)를 그 뒤에 나온 CSS가 덮어쓰지 못합니다. 다행히 이 버그는 크롬 22버전에서는 수정되었습니다.

이 함수는 크롬 19 버전 이상, 파이어폭스 16 이상, IE 9 이상, 사파리 5.2 이상에서 사용할 수 있습니다. (오페라와 모바일 브라우저에서는 아직 지원되지 않습니다)