아직도 박스 모델(CSS Box Model)이 어렵다구요?

* Clearboth Blog에 올렸던 글(2009/06/08)을 이전했습니다.

CSS TRICKS 에서 심심하면 한번씩 설명되는 CSS 박스 모델에 대해서 다시 한 번 이야기를 하고 있습니다.

파이어폭스의 부가기능 '파이어버그'를 이용해서 박스 모델을 시각적으로 확인하는 방법과, 박스모델을 계산하는 공식을 소개하고 있습니다.

너비에 따른 박스 모델

또한, 박스가 static 또는 relative인 경우에 너비를 정의했을 때와 정의하지 않았을 때 어떻게 다르게 표현되는지를 설명하고 있으며, Abolute로 처리된 박스에 대한 설명과 인라인 요소에 대한 설명도 함께 하고 있습니다.