입체로 보는 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