DTD - noir1986/guide-web-development GitHub Wiki

HTML 문서의 최상단에 작성하는 DTD의 정의와 종류에 대해 설명한다.
Document Type Declaration의 약자로 브라우저가 어떤 렌더링 모드로 동작할지 결정하게 되는 기준이다.
문서 안에 작성된 markup language가 어떤 종류의 표준을 따르고 있는지 브라우저에게 알려주는 역할을 한다.
문서 최 상단에 DTD가 존재하지 않거나, 잘못 설정되어 있다면 브라우저는 Quirks Mode로 동작하게 되어, 의도치 않은 방식으로 렌더링 될 수 있다.
실제 브라우저에서 DTD는 어떤 렌더링 모드를 사용할지 여부를 결정하는 용도로만 사용된다.
다시 말하면 각각의 DTD 별로 정의된 제약조건을 지키지 않는다면 HTML Validator에서는 오류로 검출되지만, 브라우저에서 표현될 때 렌더링 모드에 따른 차이점만 있을 뿐, 정상적으로 동작하게 된다.

호환 모드로 기존에 비표준 방식으로 제작된 웹사이트들을 표현하기 위해 Netscape Navigator 4와 IE5의 비표준 동작들을 에뮬레이팅 하는 모드

유사 표준 모드로 표준 모드로 동작하나, 몇몇 호환모드를 지원하는 모드

표준 모드로 DOCTYPE 정보가 명확할 때 W3C나 IETF의 표준을 엄격히 준수하는 모드

에지 모드로 IE에서 최신 랜더링 모드를 지칭하는 말로 IE8부터 되입되어 가장 최신 모드를 사용하여 렌더링

DOCTYPE이 정의되어 표준 모드로 동작하고 있을 때 아래의 META 태그를 추가하여 특정 랜더링 엔진을 사용하여 동작하도록 할 수 있다. DOCTYPE이 정의되어 있지 않거나 DOCTYPE 상위에 다른 태그들이 존재 할 경우 브라우저는 쿼크 모드로 동작하게 되며, 해당 태그는 무의미 하게 된다.

쿼크 모드로 동작

<meta http-equiv="X-UA-Compatible" content="IE=5">

IE7 표준 모드로 동작

<meta http-equiv="X-UA-Compatible" content="IE=7">

IE8 표준 모드로 동작

<meta http-equiv="X-UA-Compatible" content="IE=8">

가장 최신 표준 모드로 동작

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

IE에 Chrome Frame 플러그인이 설치되었다면 Chrome Frame을 사용하여 동작

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">