CYWORLD

Nokcha님의 싸이홈

알림

[화제] DTD에 따른 Box Model

css를 이용한 페이지의 레이아웃을 구성하는데 가장 많이 쓰이는 css의 속성은 아마도 float, margin, padding 이 아닐까 생각한다.
아마 이전글에서도 말했듯이 제일 처음 겪었던 어려움도 Box Model에 대한 브라우저 마다의 차이였다.
페이지에 정의된 DTD에 따라 Box Model이 다르게 작동 할 수 있다는것도 차츰 알게 되고
이제 그것에 대해서 얘기해보겠다.
아래 이미지는 W3C의 CSS2에서 에서 볼수있는 Box Model에 대한 설명이다. 제일 적절한 설명이라고 사실 생각한다.
위의 그림이 얘기 하고자 하는것은 단순하다. Block 형태의 컨텐츠에서 CSS로 width와 height를 정의하고, 배경에 포함되지만 컨텐츠에는 포함되지않는 영역인 padding, 그 영역을 깜싸고 여역을 구분해주는 border, 다른 영역과의 간격을 정의하는 margin으로 구성 되어져 있고 각 border, padding, margin속성들은 상, 하, 좌, 우를 각각 설정 할 수있다.
물론 위에 말한 것이 Box Model의 전부는 아니지만 핵심적인 내용을 담고 있다. 꽤 명확한 정의임에도 불구하고, 이것들은 사용자들에게 꽤 혼란을 준다. 바로 저 Box Model을 IE의 쿽스모드에서는 무시하기 때문이다.
필자도 그랬다. padding은 width와 height안에 포함되는줄 알았다.
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
위의 코드는 Quirksmode DTD에서 실행 하게 될 페이지의 소스이다.
이것을 FF와 IE6 와 IE7에서 확인해보겠다.
보면 알겠지만 IE계열의 브라우저와 FF 계열의 브라우저의 출력된 컨텐츠에 모양이 조금 다르다. FF는 Quirksmode에도 W3C에서 정의된 Box Model에 입각한 랜더링은 해주는 반면 IE계열은 padding값이 box 의 width 와 height 에 포함 되는것을 볼수있다. padding이 width안에 포함되어 있으므로 실제 컨텐츠가 보여지는 width부분은 줄어들게 되고 다음 줄로 내려가는것을 볼수있다.
이런 브라우저간의 차이는 치명적이다. 페이지의 레이아웃을 CSS 이용해서 작성하는데 Box Model은 없어서는 안되는 꼭 필요한것이기 때문이다.
이제 DTD를 표준모드인 XHTML1.0 Transitional로 정의한 페이지의 소스를 확인해보자
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*DTD 를 제외하고는 페이지의 markup은 모두 같다.
이것도 역시 FF와 IE6 와 IE7에서 확인해보겠다.
이 페이지는 세 브라우저 모두 동일한 레이아웃을 보여주고 있는것을 볼수있다.
다행히도 상 하 겹쳐진 마진을 처리하는 방법은 W3C의 방법을 모두 따르고 있었다.
박스 모델만으로 봤을때는 표준 방식의 DTD선언이 좀더 유용함을 알수가 있다.
DTD 선언을 하지 않고 레이아웃을만드는데 있어서 크로스 브라우징을 완성시키는것은 생각만해도 끔찍하다.(물론 CSS핵등을 사용하여 문제없이 표현하는사람도 있겠지만...)
출처 : Standard Magazine(http://zine.standardmag.org)

댓글 0

TOP
TOP