이 방법은 CSS3에서 지원되는 내용입니다.

div_A라는 요소의 width 속성이 100%이고, 여기서 150픽셀만큼 빼고 싶은 경우를 가정하겠습니다.

예전같았으면 자바스크립트를 이용해 100%로 설정된 width의 실제 픽셀수치를 구한 후에 150픽셀을 빼는 방법을 사용했습니다. 한마디로 번거로웠죠.

하지만 CSS3가 많이 사용되고 있는 현재, 그런 번거로운 작업을 하지 않으셔도 됩니다.

#div_A {width:calc(100% - 150px);}

위 처럼 한줄이면 됩니다. calc라는 함수인데요. 이름만 들어도 알 수 있듯 수치를 계산해줍니다. 상이한 단위와 상관없이 말이죠.

예제에서는 %와 px간의 계산이었지만 em, pt, mm 등등 css에서 사용되는 모든 단위를 사용할 수 있습니다.

연산 또한 빼기(-) 뿐만이 아니라 더하기(+), 곱하기(*), 나누기(/)도 가능합니다.