호환 모드와 표준 모드

공헌자 숫자: 1명

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

과거 웹 페이지는 네스케이프 네비게이터(Netscape Navigator)를 위한 버전과 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)를 위한 버전, 두가지 버전으로 만들어졌다. W3C에 의해 웹 표준이 만들어질 당시, 기존 브라우저들은 새롭게 만들어진 표준을 기반으로 대부분의 웹 사이트들을 제대로 표현 할 수 없었다. 따라서, 브라우저들은 새로운 표준으로 제작된 사이트와 예전 방식으로 제작된 사이트를 렌더딩하기 위한 두 가지 모드를 제공했다.

웹브라우저의 레이아웃 엔진으로 호환 모드(quirk mode),  유사 표준 모드(almost standards mode), 표준 모드(standards mode) 세가지 방식이 존재한다. 호환 모드(quirks mode)에서는 기존 방식으로 제작된 웹사이트들을 표현하기 위해 네비게이터 4(Navigator 4)와 인터넷 익스플로러 5의 비표준 동작들을 에뮬레이터한다. 완전 표준 모드(full standards mode; 이하 표준모드)에서는 HTML과 CSS에 의해 웹 페이지 레이아웃이 결정된다. 유사 표준 모드(almost standards mode)는 몇몇 호환모드를 지원한다.

모드 구분하기

웹브라우저는 HTML 페이지를 호환 모드 또는 표준 모드로 표현하기 위해 문서 시작 부분에 기술된 DOCTYPE을 참조한다. 웹 페이지가 표준모드로 렌더링되길 원한다면 다음과 같이 페이지 첫 부분에 DOCTYPE을 기술한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <title>Hello World!</title>
  </head>
  <body>
  </body>
</html>

예제에서 <!DOCTYPE html>는 HTML5에서 권장하는 가장 간단한 방식이다. 이전 버전의 HTML 표준들은 다른 방식들을 권장하지만, 오래된 인터넷 익스플로러 6를 포함한 오늘날 현존하는 모든 브라우저들은, 이 DOCTYPE은 완전 표준 모드로 렌더링할 것이다. 여기에 더 복잡한 DOCTYPE을 사용할 다른 합당한 이유는 없다. 만일, 다른 DOCTYPE을 사용한다면, 해당 페이지가 유사 표준 모드 또는 호환 모드로 페이지가 렌더링 될 수 있는 위험이 있다.

DOCTYPE은 반드시 HTML 문서 첫 시작부분에 기술하자. 인터넷 익스플로러 9 또는 그 이전 버전에서는  DOCTYPE 이전에 주석이나 XML 선언부와 같은 엘리먼트들을 기술하면, 해당 문서를 호환 모드로 렌더링하게 된다.

HTML5에서는 DOCTYPE은 완전 표준 모드로 렌더링하기 위해서 사용한다. 이전 버전의 HTML 표준에서는 DOCTYPE이 추가적인 의미를 갖지만, 실제로 브라우저들이 호환 모드와 표준모드의 판단 이외의 목적으로 사용하지 않는다.

좀 더 자세한 내용은 "브라우저가 다양한 모드를 판단할 때"(when different browsers choose various modes)를 참고하자.

XHTML

여러분의 페이지가 Content-Type HTTP 헤더에 application/xhtml+xml MIME 타입을 사용해 XHTML로 제공된다면, 이런 페이지들은 항상 표준 모드로 렌더링 되기 때문에 DOCTYPE을 기술할 필요가 없다. 주의) 인터넷 익스플로러 8에서는 application/xhtml+xml으로 기술된 페이지들을 제대로 렌더링하지 않고 알 수 없는 형식으로 판단해 다운로드 다이얼로그(show a download dialog)박스를 보여줄 것이다. 인터넷 익스플로러는 XHTML을 버전 9부터 을 정식으로 지원한다. 

XHTML(XHTML-like) 같은 컨텐트를 text/html MIME 타입을 사용해 제공한다면, 웹브라우저는 이를 HTML로 인식하기 때문에, 표준 모드를 사용하기 위해 DOCTYPE을 기술하자.

페이지에 사용된 모드 확인하기

파이어폭스(Firefox)에서는 컨텍스트 메뉴(context menu)->뷰 페이지(View Page Info)->렌더 모드(Render Mode)를 확인한다.

인터넷 익스플로러에서는 F12 키를 누른 후, 문서 모드(Document Mode)를 확인한다.

모드간 차이점

호환 모드와 유사 표준모드를 비교하려면, 호환 모드 목록(list of quirks)과 유사 표준 모드(almost standards mode)를 참고하자. 

문서 태그 및 공헌자

Contributors to this page: besapius
최종 변경: besapius,