이번에 다룰 내용은 브라우저와 DOCTYPE에 따른 width와 height 그리고 padding, border등의 관계에 대해서 다루겠습니다. 단순하게 말하자면 브라우저와 DOCTYPE에 따른 박스모델 구현 정도로 알아 두시면 되겠습니다.
일단 이미지를 보여드리겠습니다.
내용 적고, 소스 만드는 시간보다 저 이미지 만드는 시간이 훨씬 오래 걸렸답니다.
잡설은 집어치우고 계속 내용을 이어 가겠습니다. 한쪽은 승인된 DOCTYPE이 포함된 페이지이며, 한쪽은 DOCTYPE없는 페이지 입니다. IE에서 이처럼 차이를 나타내난 이유는 브라우저의 렌더링 차이 때문입니다.
IE는 기본적으로 렌더링 모드가 strict인지 quirks인지에 따라 렌더링 방식을 결정합니다. 즉 페이지에 선언한 DOCTYPE이나 혹은 DOCTYPE의 생략 여부에 따라 사용되는 렌더링 모드가 결정 된다는 말입니다.
IE는 quirks모드일 경우 width와 height안에서 엘리먼트를 구성합니다. padding과 border또한 처음 설정한 widht와 height안에서 결정 된다는 말이죠. 반면에 strict인 경우는 width와 height크기에 영향을 주지 않은 채로 padding과 border가 추가가 된다는 말이죠. (표현되는 엘리먼트의 크기는 이미지를 참고 하시기 바랍니다. 고생한 결과물은 봐줘야 합니다. ㅡㅡ;)
즉 박스모델은 padding및 border와 결합하여 엘리먼트의 컨텐츠 크기를 결정하게 됩니다. 참고로 margin또한 박스 모델의 일부분이지만 컨텐츠 크기를 결정하는 부분은 아닙니다. 사실 대부분의 브라우저가 W3C박스 모델을 지원하지만, 인터넷 익스플로러만 페이지의 렌더링 모드가 strict인지 quirks인지에 따라서 박스 모델을 결정하다 보니 엘리먼트의 크기가 달라진다고 할 수 있습니다.
사실 두 방법 중 어떤 방법이 더 좋다, 나쁘다 말할 수 없습니다. 서로 자신이 지지하는 방식에 따른 quirks방식이 좋다 strict방식이 좋다고 말할 뿐이죠.
마지막으로 글을 쓰다 보니 단순히 IE의 strict과 quirks에 대해서만 다루게 되었네요.
다음에 기회가 된다면 DOCTYPE에 대해서 다루겠지만, 본 내용을 잘 이해하시려면 DOCTYPE에 대해서 꼭 아셔야 합니다. 내용에 DOCTYPE부분이 많이 빠진 관계로 해당 내용은 링크로 대신합니다.
http://www.w3schools.com/tags/tag_doctype.asp
http://ko.wikipedia.org/wiki/XHTML
그리고 혹시 DOCTYPE 이슈에 관한 내용을 좀더 알고 싶다면(http://www.quirksmode.org/css/quirksmode.html) URL을 참고 하시기 바랍니다.
