[css] width, height의 이해

우리가 어떠한 내용을 꾸미고 꺼낼때 대충 크기를 정하고 채우는 것에 border, padding, margin이 포함되어 있지.. 내용을 다 만들어 놓고 border, padding, margin을 바꾸는 것은 다시 도화지나 인쇄 프린터 용지나 모니터 화면을 바꾸듯 자연스럽지 않은 것입니다.

위의 그림과 같이 CSS에서 처리하는 width, height는 단지 content 영역이며 border외에 다른 것들이 포함되지 않으며, 레이아웃을 꾸미는 경우, border 및 padding의 조절은 다시 width 및 height를 조절해야하는 만큼 꽤나 번잡합니다. 레이아웃을 테이블로 짜는 이유는 이러한 번잡함을 떠나 확실히 자리 위치를 외곽에서 결정하기 때문에 간편하겠지만 본래 테이블은 이러한 용도로 제시된 것이 아닙니다. address 요소를 단순히 italic 글꼴 용도로 이용하는 것처럼 기괴한 것입니다. 

이러한 지적은 본래 마크업 언어의 이해에서 출발합니다. SGML은 전산처리가 발전함에 따라 대량의 처리가 요구되면서 이때 교정기호 사용하듯 마크업을 이용하면 보다 용이해졌기 때문입니다. 그래서 마크업 언어의 본질은 목적에 맞게 정의된 요소의 기능대로 사용하는 것이며 그것이 검색엔진 같은 다른 처리에 도움이 되는 것입니다. 

여기에 또다른 처리방식이 있는데 IE 방식이라고 하지만 사실 IE에서 대부분 DTD를 표준모드로 처리하기에 엄밀히 말하여 IE에서 쿼크모드 처리방식입니다. IE의 쿼크모드 처리방식은 border 및 padding 까지 포함됩니다. 오히려 IE의 처리 방식이 인간의 측면에서 이해하기 편합니다. 그러나 웹표준을 염두해야하겠고 더불어 다른 모든 브라우저가 동일하게 처리한다는 아주 큰 장점에 IE 쿼크모드로 문서를 작성한다면 모험이며 말리고 싶습니다.

위와 같은 3개의 div가 필요합니다. 이것을 하나의 div 처럼 생각하면 됩니다. width는 가장 밖의 div에 적용시킵니다. 본래 margin으로 예상했던 것은 2번째인 가운데 div의 padding으로 적용시킵니다. border는 가장 내부의 div에 적용시킵니다. 또한 padding도 가장 내부의 div에 적용시킵니다. 

이렇게 3개의 div를 이용하면 width 부분에서 복잡하게 계산할 문제가 발생하지 않습니다. 1개의 div내에 3개의 div로 넣을 경우 테두리,패딩, 마진을 계산할 필요도 없으며 3개의 width만 합산해보면 됩니다. 또한 표준모드가 아닌 쿼크모드에서도 브라우저 차이 없이 작동되나 어디까지나 DTD를 적고 표준모드로 작성하는 것이 좋을 것입니다.

사실 width 및 height 계산은 제대로 계산하기 그리 어려운 것도 아니며 제대로 알았다면 문제가 생기지도 않습니다. 그러나...% 단위는 좀 조심이 필요합니다. 요소의 속성이나 display 내지 position 및 float에 따라 content 영역이 아닌 padding을 포함할 수도 있으며, 대상으로 하는 부모 요소가 변경될 수도 있습니다.