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

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

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

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

너비에 따른 박스 모델

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

입체로 보는 CSS Box Model

Douglas Livingstone의 웹사이트 Tstme에는 입체로 보는 CSS Box Model이 있습니다.
예전에 스터디 그룹 내에서는 공유가 된 적이 있는 곳인데, 블로그를 통해서는 소개되지 않은 것 같아서 포스팅 해 봅니다.

CSS Box Model은 CSS를 공부하기 시작할 때 꼭 한번은 이해를 해야 하는데 생각만큼 쉽게 이해하지 못하는 경우가 많습니다. 특히나 Quirks Mode로 작동되는 브라우저마다 CSS Box Model을 다르게 계산하는 경우가 있어서 더욱 혼란스럽게들 생각하는 것 같습니다.

위 플래시 데모는 슬라이드바를 움직여 CSS Box Model을 입체 상태로 변환시켜 보여주고 있어, 조금 더 쉽게 이해를 할 수 있게 해주고 있습니다.

CSS Box Model 관련 정보들:

• W3C Box Model (영문)
• CSS Positioning (영문)
• It's all about Boxes (영문)
• CSS Positioning Properties At-A-Glance Guide (영문)
• Box Model Hack for IE