브라우저 모드

브라우저 제작사들이 표준 호환 웹브라우저를 만들기 시작했을때 하위 호환성을 준수하려고
노력했습니다. 이를 위해 화면에 표시하기 위한 렌더링 모드를 두가지로 나눴는데
표준 호환 모드(standards mode) 와 비 표준 확장 모드 (quirks mode) 입니다.

표준 호환모드에서는 기술 명세서의 내용대로 페이지를 화면에 표시하고,
비표준 확장 모드 일때는 좀더 느슨하게 하위 호환을 고려하여 페이지를 화면에 표시합니다.


비표준 확장모드에서는 마이크로소프트 인터넷 익스플로러 4 혹은 넷스케이프 네비게이터 4처럼
구버전의 브라우저에서 예전 사이트가 깨져보이지 않도록 동작합니다.

이 두가지 모드의 가장 큰 차이점을 예로 들면 윈도우용 인터넷 익스플로러의 자체적인
박스 모델이 있씁니다. 인터넷 익스플로러 6가 출시됐을때, 표준 모드에서는 올바른 박스 모델을 사용하고,
비표준 확장모드일때는 구버전에서 사용하던 자체적인 박스모델을 적용했습니다.

IE5 이하 버전용으로 만든 사이트에서 하위 호환성을 유지하기 위해서 오페라 7 이상 버전에서는
비표준 호환모드일때 IE의 잘못된 박스 모델을 사용합니다.

브라우저마다 각각 표시하는 결과 화면모양이 조금씩 다릅니다. 16진수 색상값앞에
#문자를 넣지 않아도 제대로 표시한다던지 CSS 에 길이 단위를 명시하지 않을 경우에는 픽셀로 간주한다던지,
키워드를 사용할 경우 글씨 크기를 한단곘기 키우는 등 각자 방법을 활용합니다.
모질라와 사파리는 표준 근사 모드 (almost standards mode) 라는 별도의 모드를 통해
표준호환 모드처럼 동작하지만 테이블을 조금 다른 방식으로 처리하기도 합니다.


DOCTYPE 전환

HTML 4.01 문서의 경우 , strict DTD 를 사용하는 DOCTYPE 인 경우에는 표준 호환 모드로 동작합니다.
transitional DTD 와 URI 가 지정된 DOCTYPE 을 사용하는 경우에는
표준호환모드로 동작하지만, URI 가 지정되지 않은 transitional DTD 일 경우에는
비표준 확장모드로 동작합니다.
DOCTYPE 을 선언하지 않아썩나 잘못 쓴 경우에는 HTML 문서나 XHTML 문서 모두
비표준 확장 모드로 표시합니다.

DCOTYPE 의 존재에 따라서 브라우저의 렌더링 모드가 결정되는 효과를 DOCTYPE 전환 (DOCTYPE switching) 이라고 합니다.
모든 브라우저가 이런 규칙을 정확하게 따르는 것은 아니지만,
어떤 DOCTYPE 을 써야하는지 아는게 좋습니다.
에릭 마이어는 어떤 DOCTYPE 일때 어떤 렌더링 모드로 동작하는지 한눈에 알아볼수 있는 도표를 만들었습니다.
http://meyerweb.com/eric/dom/dtype/dtype-grid.html

DOCTYPE 전환은 브라우저가 예전 방식으로 작성된 문서와 표준 호환문서를 구분해서
처리하기 위해 사용됩니다. 유효한 CSS를 작성했음에도 불구하고 DOCTYPE 을 잘못 선택한 경우에는
비표준 확장모드로 동작해서 의도하지 않은 결과가 표시 될수도 있습니다.
따라서 사이트 내의 모든 페이지에 완벽한 DOCTYPE 선언을 하고 HTML 문서일 경우에는 strict DTD 를 사용하는 것이 중요합니다.

DOCTYPE 템플릿 페이지.
http://www.webstandards.org/learn/reference/templates/