Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
05-07 14:57
관리 메뉴

zyint's blog

DOCTYPE 본문

예전글들

DOCTYPE

진트­ 2009. 6. 2. 17:41

 

요약

 

 

 

 

DOCTYPE 정의

DOCTYPE은 HTML, XHTML 문서의 <HTML>엘리먼트 앞, 문서 처음에 선언합니다.

DOCTYPE은 HTML 엘리먼트가 아니고, 현재 문서가 어떠한 구조를 갖고 있는지, 어떠한 표준을 준수하고 있는지를 브라우저에게 알려주는 역할을 합니다.

브라우저에서는 DOCTYPE의 Document Type Definition(DTD) 파일을 참조하게 되며(DTD 파일에는 마크업 언어의 규칙들을 선언해 두었습니다.), 이를 이용하여 내용을 브라우저에 상관없이 일관성있게 렌더링 하도록 합니다.

 

 

DOCTYPE을 사용해야 하는 이유

DOCTYPE을 선언하는 경우

DOCTYPE을 지정해주면 브라우저에서는 DOCTYPE에서 선언한 표준대로 웹페이지를 렌더링하게 되며,

만일 웹 페이지에서 표준을 준수하였다면, 서로 다른 다양한 브라우져로 페이지에 접속하더라도 동일한 형식의 페이지를 볼 수 있습니다.(물론 브라우저별로 완전히 동일하지는 않습니다.)

DOCTYPE을 선언하더라도 웹 표준대로 페이지를 작성하지 않았다면 브라우저는 예전 버전의 HTML로 인식하고 쿼크 모드(quirks mode)로 페이지를 분석하고 화면에 출력해줍니다.

quirks mode는 브라우저가 예전 버전의 HTML 페이지를 읽기 위한 규칙입니다.

 

 

DOCTYPE을 선언하지 않는 경우

하지만,

DOCTYPE을 페이지 첫 부분에 선언하지 않으면, 동일한 페이지 서로 다른 브라우저들이 제각기 다른 모양으로 표현하는 문제가 발생할 수 있습니다.

DOCTYPE을 지정하지 않은 문서를 읽을경우, 브라우저는 W3C의 HTML 표준이 아닌, 이전 버전의 HTML을 위한 규칙으로 페이지를 읽게 됩니다.

브라우저는 예전 버전의 HTML 페이지로 인식하고 quirks mode로 페이지를 읽게 됩니다.

이전 버전의 HTML에서 발생할 수 있는 이상한점들이 매우 많이 있기 브라우저에서 이러한 문서들을 표현할 때, 브라우저별로 제각기 다른 방식으로 처리하게 됩니다.

따라서 아무리 표준을 지켜서 HTML 페이지를 작성하였다고 해도, DOCTYPE을 선언하지 않으면 사용자의 브라우저에 따라서 페이지가 잘못 표시되는 문제가 발생할 수 있습니다.

 

웹페이지를 표준대로 지키면서 작성하였다면, DOCTYPE을 지정하고 이를 페이지 가장 처음 부분에서 선언하여야 합니다.

 

 

 

DOCTYPE 선언문의 구조

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

　　①　　　 ②　　③　　　　　　　　　　④　　　　　　　　　　　　　　　　　　　　　　⑤

① <!DOCTYPE: DOCTYPE 선언문은 일반 HTML 엘리먼트가 아닙니다. 일반 엘리먼트들과 다르게 '<' 다음에 '!'이 나오게 됩니다.

② html: <html>이 페이지의 루트 엘리먼트라는 의미입니다.

③ PUBLIC: HTML 4.01표준이 공개적으로 사용 가능하다는 의미입니다.

④ "-//W3C//DTD HTML 4.01 Transitional//EN": HTML 4.01 Transitional 버전을 사용하며 HTML 마크업이 영어로 작성되었다는 것을 말합니다.

⑤ "http://www.w3.org/TR/html4/loose.dtd": 표준을 식별하기 위한 파일을 가리킵니다.

 

 

 

DOCTYPE 종류

DOCTYPE은 사용 용도에 따라서 다양한 종류를 제공합니다.

 

 

HTML

HTML 4.01

Strict: 이 DTD는 모든 HTML element와 attribute를 포함하고 있습니다. 하지만 presentational elements, deprecated element(e.g. font), Framesets는 사용할 수 없습니다.

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

 

Transitional: 이 DTD는 모든 HTML element와 attribute를 포함하고 있습니다. presentational elements, deprecated element(e.g. font)도 포함되어 있습니다. 하지만, framesets은 사용할 수 없습니다.

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

 

Frameset: 이 DTD는 HTML 4.01의 Transitional과 동일하며, frameset을 사용할 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

 

 

HTML 2.0

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

 

HTML 3.2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

 

 

XHTML

XHTML 1.0

Strict: 이 DTD는 모든 HTML element와 attribute를 포함하고 있습니다. 하지만 presentational elements, deprecated element(e.g. font), Framesets는 사용할 수 없습니다. 마크업 언어는 XML 형식을 지켜야 합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Transitional: 이 DTD는 모든 HTML element와 attribute를 포함하고 있습니다. presentational elements, deprecated element(e.g. font)도 포함되어 있습니다. 하지만, framesets은 사용할 수 없습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Frameset: 이 DTD는 HTML 4.01의 Transitional과 동일하며, frameset을 사용할 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

 

XHTML 1.1

이 DTD는 XHTML 1.0 Strict와 동일합니다. 여기에 모듈이 추가되었습니다(예: 동아시아 언어를 지원하기 위한 ruby의 지원)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

XHTML Basic 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

 

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+MathML+SVG

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

 

XHTML + MathML + SVG Profile (XHTML as the host language)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

 

XHTML + MathML + SVG Profile (Using SVG as the host)

<!DOCTYPE svg:svg PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

 

 

MathML

MathML 1.01

<!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd">

 

MathML 2.0

<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">

 

 

SVG

SVG 1.0

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

 

SVG 1.1 Full

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

 

SVG 1.1 Basic

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">

 

SVG 1.1 Tiny

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

 

 

 

 

 

예제

XHTML 1.0 Transitional DOCTYPE을 선언한 경우:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>문서의 제목</title>
</head>

<body>
본문
</body>

</html>

 

 

 

Validator

웹표준 테스트 도구를 이용해서 HTML/XHTML 페이지가 바르게 작성되었는지 여부를 자동으로 테스트 할 수 있습니다.

 

 

 

참고자료

 

이 글은 스프링노트에서 작성되었습니다.

'예전글들' Related Articles more
Comments