DOCTYPE 스위치 및 표시모드
출처 : 웹표준의 교과서
저자 : 마시코 타카히로
번역 : 박진영
브라우저가 갖춘 복수의 표시모드
모던 브라우저*1)의 대부분이 복수의 표시모드(랜더링모드)를 갖추고 있다. 주로 문서형 선언의 서식 및 문서형 정의 (DTD)의 종류에 따라 표시모드를 바꾸기 위함이고, 이 기능을 [DOCTYPE 스위치](DOCTYPE switches)라고 한다.
*1) 모던브라우저 : 웹표준을 일정 부분 서포트 하는 브라우저로, Win IE6, Mac IE5, Mozilla, Firefox, Netscape6/7/8, Opera7/8, Safari 를 나타내는 경우가 대부분.
구조적으로, 브라우저에는 표시모드별로 별도의 스타일시트가 준비되어 있고, 문서형 선언의 서식이나 DTD의 종류에 다라 적용하는 스타일쉬트를 내부적으로 변경하게 된다.
복수의 표시모드를 갖추고 있는 브라우저는 다음과 같다.
- Win IE
- Opera 7/8
- Mozilla 0.6+
- Firefox
- Netscape 6/7/8
- Mac IE 5
- Safari
브라우저의 종류와 버전에 따라 표시모드가 2종류나 3종류로 크게 구별된다.
2종류의 표시모드를 갖춘 브라우저
Win IE 6.0, Mozilla 0.6+, Netscape 6, Opera 7/8, Mac IE 5에서는 다음의 두 종류의 표시 모드가 있다.
- 표준모드 (standards)
- W3C 사양서 등의 Web 표준에 준거한 표시모드
- 호환모드 (quirks)
- 오래된 브라우저와의 호환성을 우선한 표시모드
3종류의 표시모드를 갖춘 브라우저
Mozilla 1.1+, Firefox, Netscape 7/8, Safari 에서는 다음의 세 종류의 표시 모드가 있다.
- 표준모드 (standards)
- W3C 사양서 등의 Web 표준에 준거한 표시모드
- 거의표준모드 (almost standards)
- 기본적으로 Web 표준에 준거해 표시하나, 표나 센터링 등 일부의 표시에서는 후방호환성(오래된 브라우저도 문제없이 표시해, 안정적으로 동작하는 것)을 유지한 표시모드. Transitional DTD나 Frameset DTD 를 위해 준비된 모드라 할 수 있다.
- 호환모드 (quirks)
- 오래된 브라우저와의 호환성을 우선한 표시모드
여기서 [표준모드] 나 [거의 표준모드]에 준거하면 대체적으로 크로스브라우징이 실현되는 것에 비해, [과거호환모드]는 브라우저별로 적용되는 스타일이 크게 차이나므로 크로스브라우징이 매우 힘들다는 점에 주의하자.
단, 브라우저의 종류나 버전에 따라 표시모드를 바꾸는 방법이 달라지므로, 일부 브라우저에서는 [과거호환모드]가 적용되어 안전을 기대할 수 없는 경우가 있다. 잠정적인 해결책에 대해서는 마지막에 설명하겠다.
브라우저의 표시모드 및 Web표준상의 룰
2종류 혹은 3종류의 표시모드 중 어떤 것을 채용할 것인가는 문서형선언의 유무, XML선언의 유무, 시스템식별자의 유무에 따라 달라진다. 자세한 것은 [브라우저의 DOCTYPE 스위치 일람] 을 참고하길 바란다.
또한 Web 표준상 다음과 같은 룰이 있다는 점에 주의하자.
- HTML4.0 또는 4.01 에서는 시스템 식별자 생략 가능
- XHTML에서는 시스템식별자의 생략 불가능
- XHTML에서 XML선언은 그 문서의 문자코드셋이 [UTF-8] 혹은 [UTF-16] 이외의 경우 필수. 즉, [EUC-KR] 등의 경우에는 생략불가능하며 [UTF-8] 혹은 [UTF-16] 일 경우에는 생략가능하다. 단 어떤 문자코드셋을 이용하는 경우던지 XML선언의 지정은 사양상 강하게 추천되고 있다는 점에 주의
브라우저별 주의점
Win IE 6
- Strict DTD 에서는 기본적으로 [표준모드]가 채용된다.
- 어느 문서형에서도 시스템 식별자가 있으면 기본적으로 [표준모드]가 채용된다
- XHTML에서는 기본적으로 [표준모드]가 채용된다
- XHTML에서 XML선언이 있으면 [호환모드]가 적용되어 버린다. 문서형선언보다 앞에 공백류(스페이스나 줄바꿈) 이외의 문자가 있을 경우 [호환모드]가 채용된다는 장치가 마련되어 있지 않은 것이 원인이라고 생각할 수 있다.
Mozilla 0.6+, Netscape 6
- Strict DTD 에서는 기본적으로 [표준모드]가 채용된다.
- HTML4.0에 대해서는 Transitional DTD 및 Frameset DTD 에서는 시스템 식별자의 유무에 관계없이 [호환모드]가 채용된다.
- HTML4.1에 대해서는 Transitional DTD 및 Frameset DTD 에서는 시스템 식별자가 있으면 [표준모드]가 채용되고, 시스템식별자가 없으면 [호환모드]가 채용된다.
- XHTML에서는 기본적으로 [표준모드]가 채용된다.
Opera 7/8
- Strict DTD 에서는 기본적으로 [표준모드]가 채용된다.
- HTML4.0 및 HTML4.1에 대해서는 Transitional DTD 및 Frameset DTD 에서는 시스템 식별자가 있으면 [표준모드]가 채용되고, 시스템식별자가 없으면 [호환모드]가 채용된다.
- XHTML에서는 기본적으로 [표준모드]가 채용된다.
- Opera 7.0-7.03 에서는, XHTML에서 XML선언이 있으면 [호환모드]가 채용된다. 7.1 이후에서는 이 문제는 해결되었다.
Mac IE 5
- Strict DTD 에서는 기본적으로 [표준모드]가 채용된다.
- 어떤 문서형이건 시스템식별자가 있으면 기본적으로 [표준모드]가 채용된다.
- XHTML에서는 기본적으로 [표준모드]가 채용된다.
Mozilla 1.1+, Firefox, Netscape 7/8, Safari
- Strict DTD 에서는 기본적으로 [표준모드]가 채용된다.
- HTML4.0에 대해서는 Transitional DTD 및 Frameset DTD 에서는 시스템 식별자의 유무에 관계없이 [호환모드]가 채용된다.
- HTML4.1에 대해서는 Transitional DTD 및 Frameset DTD 에서는 시스템 식별자가 있으면 [거의 표준모드]가 채용되고, 시스템식별자가 없으면 [호환모드]가 채용된다.
- XHTML 1.0에서는 Transitional DTD 및 Frameset DTD 에서는 시스템 식별자의 유무에 관계없이 [거의 표준모드]가 채용된다.
- XHTML에서는 XML 어플리케이션 대상의 MIME타입(application/xhtml+xml, application/xml, text/xml)이 지정되는 경우 [표준모드]가 채용된다.
- XHTML에서는 기본적으로 [표준모드]가 채용된다.
잠정적 해결책
위와 같이 브라우저의 종류나 버전에 따라 표시모드의 전환방법이 달라지므로, 크로스브라우징을 실현하기 위해서는 다음과 같은 두 가지 해결책을 생각할 수 있다.
- 모든 브라우저에서 같은 표시모드가 적용될 수 있는 방법을 궁리한다.
- 브라우저별로 다른 표시모드가 적용되는 것을 전제로 디자인한다. CSS 핵 을 이용해서 크로스브라우징을 목표로 한다.
이하에서는 1의 해결책에 관해 (X)HTML의 서식에 저촉하지 않고 실현하는 방법을 설명한다.
모든 브라우저에서 [표준모드]가 적용되는 방법
HTML
- HTML4.0 Strict에 준거한다. 시스템식별자의 유무에 관계없다.
- HTMl4.01 Strict 에 준거한다. 시스템식별자의 유무에 관계없다.
XHTML
- HTML4.0 Strict에 준거하고, XML선언은 지정하지 않는다. (따라서 문자코드셋은 [UTF-8] 혹은 [UTF-16] 을 이용)
- XHTMl1.1 에서는 XML선언은 기술하지 않는다. (따라서 문자코드셋은 [UTF-8] 혹은 [UTF-16] 을 이용)
모든 브라우저에서 [표준모드] 혹은 [거의 표준모드]가 적용되는 방법
HTML
- HTML4.01 Transitional 혹은 Frameset에 준거하고, 시스템식별자까지 지정한다.
XHTML
- XHTML1.0 Transitional 혹은 Frameset에 준거하고, XML선언은 지정하지 않는다. (따라서 문자코드셋은 [UTF-8] 혹은 [UTF-16] 을 이용)
모든 브라우저에서 [호환모드]가 적용되는 방법
HTML
- HTML4.0 Transitional 혹은 Frameset에 준거하고, 시스템식별자를 지정하지 않는다.
- HTML4.01 Transitional 혹은 Frameset에 준거하고, 시스템식별자를 지정하지 않는다.
XHTML
- 없음