이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.

너무 단순한 팁이지만 올려봅니다.!

calc 를 통해 CSS의 사이즈를 계산 적용 할 수 있습니다.

참고 : 예전에도 IE 같은 경우 100% - 1 이런식의 계산이 가능했습니다. 다만 익스플로러 저버전에서만 가능한 꼼수로 옛날 익스플로러 혼자 사이즈 이상할 때나 쓰는 핵취급 받았습니다.

때문에 여백과 테두리가 있는 경우 CSS로 속성을 주는 것이 매우 지저분했으며, 이 문제는 box-sizing 이라는 속성이 나오면서 어느정도 해결되었습니다. (다만 하위 호환성 대문에 이 글을 쓰는 시점에서도 많은 기업들을 사용할 수 없는 속성 취급을 받습니다….)

box-sizing를 사용하면 border-box 기준으로 가로 100px 이라고 하면 여백(padding)과 테두리(border)를 포함한 크기로 100px 가 되었고, 이를 피하기 위해 div를 중첩 하는 등의 지저분한 방법이 아닌, 담백한 코드로 처리할 수 있게 되었습니다.``` java /* 이 속성은 여백 4와 테두리 1을 포함하여 양쪽으로 5픽셀씩 10픽셀을 포함한 크기임으로 실제 내부크기는 90px 가 잡힙니다. */ .test-class1 { width:100px; box-sizing : border-box; padding:4px; border:1px solid #333; }

하지만 위 방법이 아니고 특정 크기를 지정해 주고 싶은 경우가 많습니다.
그럴경우 아래와같이 calc를 사용하면됩니다.
calc의 경우는 + - / * 를 지원합니다.
``` java
.test-class
{
	height: calc(100% - 100px);
}

위와 같이 사용할 수 있습니다.

호환성

• IE와 사파리만 써둡니다. (나머지 브라우저는 자동 업데이트가 잘되어 따로 신경 쓰지 않아도 되는 것 같습니다.) box-sizing IE 8, 사파리 5.1 calc IE 9, 사파리 7