관용모드와 표준모드 - Quirks mode & Standard mode

웹 페이지의 렌더링 방식에는 표준 모드(Standards mode)와 관용 모드(Quirks mode)라는 두 가지 렌더링 방식이 있습니다. 이를 이해하고 DOCTYPE의 중요성을 깨닭게 되길 바랍니다.

• 표준모드 - 모든 표준이 엄격하게 지켜진다.

• 관용모드 - 브라우저가 구버전 브라우저의 렌더링을 흉내냄으로써 기존의 비표준 기능도 허용된다.

표준 모드 선택

DOCTYPE이 지정된 모든 HTML 문서는 윈도우용 IE6 이상 버전을 포함한 모든 브라우저에서 표준 모드로 렌더링됩니다. 극 소수의 예외적인 경우를 제외하고는 표준 모드를 사용해야 합니다.

IE6 이상 버전에서 관용모드를 사용하면 사실 윈도우용 IE5.5와 똑같이 렌더링되는데 이는 기술적으로 엄청난 퇴보입니다. 나머지 브라우저에서는 관용 모드를 사용하면 IE5.5나 다른 브라우저와는 다르게 렌더링됩니다. 관용 모드는 DOCTYPE을 아예 정의하지 않거나 DOCTYPE 정의에 URL을 지정하지 않을때 적용됩니다.

DOCTYPE 선언 이전에 다른요소가 들어간다면 IE는 관용 모드로 렌더링됨에 주의해야하며, IE6 에서는 XML선언을 넣으면 관용모드로 작동합니다.(<?xml version="1.0' encoding="UTF-8"?>)

IE5와 5.5버전, 그리고 IE6 이상 버전의 관용 모드에서 나타나는 박스 모델 버그

아래의 CSS의 박스모델의 너비를 계산해보자.

p {
    width: 200px;
    margin: 20px;
    padding: 5px;
    border: 2px solid;
}

표준 CSS 박스모델의 너비 계산법
콘텐트의 너비(width) + 좌측패딩 + 우측패딩 + 좌측보더 + 우측보더
=> 200px + 5px + 5px + 20px + 20px + 2px + 2px = 254px

IE 관용모드의 CSS 박스모델의 너비 계산법
박스모델 너비(width)
=> 200px

이는 표준모드에서는 width를 해당요소의 콘텐츠의 너비만을 가리키지만 IE에서는 패딩과 마진, 보더, 콘텐트의 너비값을 합친 값을 width로 인지하기 때문입니다. 고로 콘텐트의 너비값은 표준에서는 width값, IE에서는 width에서 패딩,마진,보더 값을 뺀값이 해당요소의 콘텐트 너비가 됩니다.

서로 다른 방식으로 렌더링되기 때문에 그 차이가 발생합니다. 물론 이를 해결하는 가장 손쉬운 방법은 DOCTYPE을 설정해서 표준모드로 렌더링되게 하면 됩니다.