CSS3 calc() 함수

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의 값과 같다.
remem과 거의 같지만 루트 요소의 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 이상에서 사용할 수 있습니다. (오페라와 모바일 브라우저에서는 아직 지원되지 않습니다)

  1. 잘 읽었습니다.
    신기한 기능이네요 ^^

    한 가지 궁금한게 있는데,

    width:calc(100% - 100px); // 이렇게 적용하였을 때 -100px 가 오른쪽에서부터 적용이 되는데 왼쪽에서 적용이 되는 방법도 있는지요 ^^

댓글을 남겨주세요

This site uses Akismet to reduce spam. Learn how your comment data is processed.