[Chapter 1] DTD(DOCTYPE) 뜻과 종류
DTD(DOCTYPE)란?
DTD는 Document Type Definition의 약자이다. 즉, 문서형식을 정의해주는 것이다.
<!DOCTYPE html>
<html>
<head>
<title>DTD</title>
</head>
<body>
Hello, HTML5!
</body>
</html>
DOCTYPE 종류
HTML 4.01 and HTML5 공통 사용
<!DOCTYPE html>
W3C에서 html5를 공식 표준 권고안으로 2014년 10월 28일에 확정 발표했다.
HTML5 표준 권고안
공통의 DOCTYPE 선언하기
HTML5
<!DOCTYPE html>
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">
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">
위의 다섯가지가 제일 많이 사용되는 것이다.
DTD를 적지 않는 브라우저들은 Quirks Mode 상태(어물쩡한 상태)로 렌더링 되기 때문에 바른 DTD를 적어주는 것이 좋다. 크로스 브라우징을 하기 위해서는 꼭 필요한 원칙이다.
우리나라에서는 DOCTYPE 중에서 XHTML 1.0 Transitional를 제일 많이 사용중이다.
그 이유중에 하나는 IE중에서도 하위 브라우저를 사용하는 곳이 많기 때문이다.
또 하나는 표준모드는 너무 엄격하여 적용하기가 쉽지 않아 하위 브라우저 호환성을 고려하여 느슨한 상태의 호환모드 DOCTPYE 이다.
그렇지만 IE7이상에서 사용할 때는 HTML5를 사용해도 무관하니 참고 바람.
Quirks MODE(쿼크모드) 렌더링과 DTD
쿼크모드(Quirks mode)
오래된 웹 브라우저를 위하여 디자인된 웹 페이지의 하위 호환성을 유지하기 위해 W3C나 IETF의 표준을 엄격히 준수하는 표준모드(Standards Mode)를 대신하여 쓰이는 웹 브라우저 기술을 가리킨다.
참고문헌
쿼크모드의 발생 원인
- DOCTYPE 선언이 존재하지 않거나 잘못 적혀있을 경우, 웹 브라우저는 문서를 쿼크 모드로 해석한다.
- DOCTYPE 선언 내의 URL이 생략된 경우, 웹 브라우저는 문서를 쿼크 모드로 해석한다.
호환 출력 방식(Quirks Rendering Mode)의 특징
- 브라우저가 HTML을 읽는데 시간이 더 걸린다.
- 브라우저가 HTML을 해석하는데 시간이 더 걸린다.
- 브라우저가 HTML을 출력하는데 시간이 더 걸린다.
- 브라우저마다 HTML을 각각 다르게 출력한다.
IE10에서 쿼크 모드를 볼 수 있다.
DTD 정의 필요성
- 문서의 가독성 증가
- 브라우저 별 호환성 증가(크로스 브라우징)
- 문서 제작의 효율성 증가
참고사항
HTML5가 표준이 되었지만 아직 IE 웹 브라우저에서는 호환성 보기 헤더(X-UA-Compatible header)가 설정되지 않을 경우, 쿼크모드(Quirksmode)로 변경되는 문제를 가진다.
<!--[if IE]><![endif]-->
<!DOCTYPE html>
<!--
다소 DRY 원칙(Don't Repeat Yourself, 반복하지마라)에 어긋나 보이지만 `<html>` 요소가 코드에 반복처리되는 것은 아니니 큰 문제는 아님.
-->
<!--[if !IE]><!-->
<html lang="ko-KR" class="no-js">
<!--<![endif]-->
<!--[if IE 6]> <html lang="ko-KR" class="no-js lt-ie10 lt-ie9 lt-ie8 ie6"> <![endif]-->
<!--[if IE 7]> <html lang="ko-KR" class="no-js lt-ie10 lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]> <html lang="ko-KR" class="no-js lt-ie10 lt-ie9 ie8"> <![endif]-->
<!--[if IE 9]> <html lang="ko-KR" class="no-js lt-ie10 ie9"> <![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<title>Document</title>
<style>
body {background:green;}
.ie6 body {background:red;}
.ie7 body {background:orange;}
.ie8 body {background:yellow;}
</style>
</head>
<body>
contents
</body>
</html>