문서타입에 관해서

프로그램/웹표준,CSS 2013. 3. 8. 13:45

출처 : http://www.designshake.com/xe/?category=107&mid=css&sort_index=readed_count&order_type=asc&comment_srl=804&page=1&listStyle=webzine&document_srl=1215

찾아보게된 이유: ie8을 쓰는데 아무런 선언이 없는 곳에서 어디서는 호환성보기의 문서모드가 ie8 어디서는 ie7로 되는데 메타태그가 없이 그렇게 계속 바뀌길래 찾아봄

---------------

1. 문서타입

l문서타입

• 문서에 형식을 정의하는 것을 DTD(Document Type Definition)

• DTD는 HTML 태그가 아니다. DTD는 <html> tag 전에 기술

• DTD는 마크업 언어 Rule을 정의하고, 브라우저는 이에 맞춰 Rendering한다.

※ 브라우저가 올바로 Rendering할 수 있도록 , 항상 Doctype을 선언해라.

l (X)HTML Doctype Declarations

(X)HTML	Doctype 선언	Remarks
HTML 4.01 Strict	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	XHML 1.1에서는 Transitional, Frameset은 파기됨
XHTML Basic 1.1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">	XHTML 1.1의 축소형 모듈Set으로 모바일,PDA등에 적합
HTML5	<!DOCTYPE html>	Not standard yet No need DTD file

l DTD 타입 (HTML 4.01, XHTML 1.0)

• HTML 4.0, 4.01 규격에 있는 3가지 DTD 타입

• XHTML 1.0은 HTML 4.01을 XML 기반으로 변경한 것으로 동일하게 3가지 DTD 타입 유지

DTD 타입	HTML 4.01	XHMTL 1.0	설명
Strict	HTML 4.01 Strict	XHTML 1.0 Strict	엄격한 규격(웹 표준에 준거) . Presentational element 및 deprecated element 제외 . Frame 관련 element 제외
Transitional	HTML 4.01 Transitional	XHTML 1.0 Transitional	과도기의 규격(후방 호환성을 유지) . Frame 관련 element 제외
Frameset	HTML 4.01 Frameset	XHTML 1.0 Frameset	Transitional 에 Frame 관련 element 포함

※ XHTML 1.1은 XHTML 1.0 Strict 규격 기반으로 Transitional, Frameset 타입이 파기됨

l Strict vs Transitional(Frameset)

• Strict 타입은 W3C가 스타일시트 사용 장려를 위해 단계적으로 사라질 ‘표현(presentation)’에 관한 태그와 속성을 배제

• 가능하다면 Strict 타입을 사용해야 하지만(should), 불가피할 경우 Transitional 타입을 사용할 수도 있다(may).

l Strict DTD 에서 달라지는 점

사라진 Elements

사라진 Attributes

바뀐 Content Model

align (단, table관련<col><colgroup><tbody><td><tfoot><th><thead><tr>는 허용), language, background, bgcolor, border (<table>은 허용 ), height (<img><object>는 허용 ), hspace, name( HTML 4.01 Strict은 허용, XHTML 1.0 Strict <form><img>는 허용안함 ), noshade, nowrap, target, text, link, vlink, alink, vspace, width (<img><object><table><col><colgroup>은 허용)

. 모든 텍스트와 이미지는 <body>내에 직접 사용 불가 à 반드시 <div><p> 등 block level element로 감싸야 한다.

. <form> 내에 <input>을 직접 사용 불가 à <div><p><fieldset>등으로 감싸야 한다.

. <blockquote> 내의 text들은 <div><pd>등의 block level element로 감싸야 한다.

2. 문서타입선언 및 언어 지정 (HTML 4.01)

l HTML 4.01 지정 예

ex) 문서타입 : HTML 4.01 Transitional, 언어 : 한국어

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd">

<body> Contents </body>

</html>

l 문서 타입 지정

공개식별자와 시스템 식별자로 구성

• 공개 식별자 : "-//W3C//DTD HTML 4.01 Transitional//EN“

• 시스템 식별자 : "http://www.w3.org/TR/html4/loose.dtd"

※ 시스템 식별자 생략 가능

l 언어 지정

현재 문서의 언어 정보 제공. <html> 태그의 “lang” attribute에 지정

• 브라우저, 검색엔진, 음성장치에서 참조

• “lang” 속성 값 : ISO639 참고

※ Character encoding(<meta> “Content-type”의 charset )과 혼돈하지 말것

( Character encoding은 여러 언어를 대표할 수 있다. )

※ <meta> 의 “Content-Language” 선언은 문서의 언어해석 용도로 적절치 않고, 이용 빈도가 낮음

3. 문서타입선언 및 언어 지정 (XHTML)

l XHTML 1.0 지정 예

ex) 문서타입 : XHTML 1.0 Transitional, 언어 : 한국어

<?XML version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=“ko" lang=“ko">

<head> </head>
<body> Contents </body>
</html>

l XML 선언

XHTML은 XML 어플리케이션이므로 필수

• version : “1.0”

• encoding : 디폴트는 “UTF-8” 혹은 “UTF-16”. 생략할 수 있지만, 반드시 지정하도록 권장 (e.g. “UTF-8”, “EUC-KR”)

l 문서 타입 지정

공개식별자와 시스템 식별자로 구성

• 공개 식별자 : "-//W3C//DTD XHTML 1.0 Transitional//EN“

• 시스템 식별자 : "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

※ XHTML에서는 시스템 식별자 생략 불가

l Namespace 지정

<html> 태그의 “xmlns” 속성으로 지정. 값은 “http://www.w3.org/1999/xhtml"

l 언어 지정

• “xml:lang“ 속성 : XHTML 표준 지정 방식

• “lang” 속성 : XHTML 1.0에서 후방 호환성을 위해 지원.

※ XHTML 1.1에서는 “lang” 속성 지원 안함

4. 브라우저 렌더링 모드

l 브라우저의 렌더링 모드(표시 모드)

l Doctype switching

• 브라우저가 어떤 모드를 선택하는가는 문서의 문서형 선언(XHTML의 경우)및 문서형 정의(DTD)에 의해 결정되며, 이러한 기능을 Doctype switching 이라 함

• 브라우저는 모드별 스타일시트를 가지고 있고, 선택된 모드별 스타일시트를 변경하고 이를 표시

※ Doctype이 없는 오래된 문서의 경우 “Quirks mode”로 전환

l 렌더링 모드 종류

렌더링 모드	설명	비고
호환 모드 (Quirks)	웹 표준 이전 문서, 오래된 브라우저와의 호환성을 우선한 표시 모드	Win IE5, NS4의 경우 영구적으로 Quirks Doctype이 없는 문서의 경우 Quirks
표준모드 (Strict or Standard)	W3C 사양서 등의 웹표준에 준거한 표시 모드
거의표준모드 (Almost Strict or Almost Standard)	기본적으로 웹표준에 준거하나, 후방 호환성을 유지한 모드. Transitional/Frameset DTD를 위한 모드	<image> 태그의 경우, Strict Mode에서는 inline element이나, Almost Strict Mode에서는 예전과 같이 block element이다.

l Doctype switching에 따른 브라우저별 렌더링 모드

※ Q (Quirks mode), A (Almost Standard mode), S (Standards mode), N (Browser doesN’t interpret)

※ IE5.5(IE5.5), IE6(IE6/Opera7.0~7.03), IE7(IE7/Opera7.10~7.23), IE8,9(IE8/IE9/Opera7.5~8.54/Opera9.5~9.6),

OP9(Opera9.0~9.20), FF,SF (Mozilla1.0.1/Mozilla1.1beta~/Firefox/Netscape7~/Safari0.9~/Opera10~/Chrome

l Doctype switching flow - General

http://hsivonen.iki.fi/doctype/html5-mode.pdf

5. IE8, IE9 렌더링 모드

l IE8, IE9 렌더링 모드

• IE8,IE9는 IE8 브라우저에서 부터 추가된 “Compatibility View”(호환성 보기) 기능에 의해,

일반적인 렌더링 모드(Quirks/Almost Standards/Standards)를 보다 세분화하여 정의

• IE8의 경우 4가지 모드, IE9의 경우 7가지 모드를 가짐

※ IE8,IE9는 “Compatibility View”(호환성 보기) 기능과 “X-UA-Compatible” 메타 정보 설정에 의해 렌더링 모드 선택 처리가 더욱 복잡해짐

l Compatibility View (호환성 보기)

마이크로소프트는“IE8은 이전 버전의 IE를 기반으로 하는 일부 사이트에서 호환성 문제가 발생할 수도” 있으므로, 이러한 문제점을 해결하기 위해 “호환성 보기 기능을 제공” 한다고 함.

l “X-UA-Compatible” 메타 정보에 따른 렌더링 모드

• IE8, IE9 브라우저는 “Compatibility View” 모드 (브라우저,서버설정에 의한) 와 관련,

• IE8, IE9 브라우저는 “X-UA-Compatible” 설정이 있을 경우, “Compatibility View” 설정보다 우선시 한다.

• “X-UA-Compatible” 설정의 우선 순위는 <meta> 태그 설정이 HTTP Header설정 보다 앞선다.

• <meta> 태그 “X-UA-Compatible” 설정 예

• HTTP Header “X-UA-Compatible” 설정 예

X-UA-Compatible: IE=EmulateIE7

l “X-UA-Compatible” values

값	설명
“IE=5”	Quirks(IE5.5) 모드로 선택
“IE=7”	IE7 Standards 모드로 선택
“IE=EmulateIE7”	Doctype에 따라 Quirks(IE5.5) 또는 IE7 Standards 모드
“IE=EmulateIE8”	Doctype에 따라 Quirks(IE5.5) 또는 IE8 Almost Standards 또는 IE8 Standards 모드
“IE=EmulateIE9”	. IE8일 경우 à Doctype에 따라 Quirks(IE5.5) 또는 IE8 Almost Standards 또는 IE8 Standards 모드 . IE9일 경우 à Doctype에 따라 Quirks(IE5.5) 또는 IE9 Almost Standards 또는 IE9 Standards 모드
“IE=8”	Doctype에 따라 IE8 Almost Standards 또는 IE8 Standards 모드
“IE=9”	Doctype에 따라 IE9 Almost Standards 또는 IE9 Standards 모드
“IE=Edge”	. IE8일 경우 à Doctype에 따라 IE8 Almost Standards 또는 IE8 Standards 모드 . IE9일 경우 à Doctype에 따라 IE9 Almost Standards 또는 IE9 Standards 모드