찾아보게된 이유: 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" |
|
|
HTML 4.01 Transitional |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
|
|
HTML 4.01 Frameset |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" |
|
|
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 |
|
<applet><embed><basefont><font><center><dir><menu><u><s><strike><frame><frameset><iframe><noframes> |
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">
<html lang=“ko”>
<head> </head>
<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” 모드 (브라우저,서버설정에 의한) 와 관련,
<meta> 태그 또는 HTTP Header에 “X-UA-Compatible” 정보를 설정(문서에 의한) 하여 모드 선택이 가능하다.
• IE8, IE9 브라우저는 “X-UA-Compatible” 설정이 있을 경우, “Compatibility View” 설정보다 우선시 한다.
• “X-UA-Compatible” 설정의 우선 순위는 <meta> 태그 설정이 HTTP Header설정 보다 앞선다.
• <meta> 태그 “X-UA-Compatible” 설정 예
<meta http-equiv="X-UA-Compatible" content="IE=5">
• 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 모드 |
l IE8, IE9 모드 switching flow
※ IE8모드 flow
: http://hsivonen.iki.fi/doctype/ie8-mode.pdf
※ IE5.5 ~ IE9 모드 flow
: http://hsivonen.iki.fi/doctype/ie-mode.pdf
6. 브라우저모드 선택
“신규 웹사이트 구축 시 크로스브라우징 목표를 위한 브라우저 모드 선택을 위한 단계”
