CSS에서 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의 값과 같다. |
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 이상에서 사용할 수 있습니다. (오페라와 모바일 브라우저에서는 아직 지원되지 않습니다)
여기에서 잘 정리되어서 퍼왔습니다.