제목 : DOCTYPE

정의

정확한 명칭은 Document Type Declaration 이라고 하여 줄임말로 DTD, 번역하자면 "문서 형식 선언"이라고 한다.
쉽게 설명하자면 내가 만드는 혹은 사용하는 이 문서가 어떤 종류인가를 페이지 맨 위에 선언하여 브라우저에게 알려주는 것이다.

DOCTYPE을 선언해야 하는 이유

불과 5년 전만 해도 <html>태그 상단에 DTD를 선언하지 않은 웹사이트가 훨씬 많았습니다. 왜냐하면 한국에서는 DTD를 선언하지 않음으로 인해서 화면에 표현된 부분이 틀어진다고 해도 인터넷 익스플로어(IE) 브라우저 하나만 맞추면 되었기 때문입니다. 하지만 이제는 많은 사람들이 인터넷 익스플로어 외 다른 브라우저를 사용하며, 웹을 PC에서만 보는게 아니라 모바일, 태블릿 등 다양한 기기에서 보기 때문에 정해진 표준에 맞춰 만들지 않으면 여기서는 깨지고 저기서는 틀어지고 어떤곳에서는 잘보이고..하는 문제가 생깁니다. 따라서 반드시 표준에 맞춰 작업을 해야 합니다.

DOCTYPE의 실제 적용 소스 ( XHTML1.0 transitional 을 적용한 페이지 )
<!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>
...생략...
</body>
</html>
DOCTYPE의 종류

HTML의 버전별로 각각 strict(엄격한 타입), transitional(유연한 타입), frameset(프레임셋 타입) 3가지로 구분됩니다. HTML의 4.01 버전 이하로는 최근에는 사용하지 않으니, HTML 4.01 / XHTML1.0 / HTML 5 정도로만 알아보겠습니다.

버전 형식 DTD구문
HTML4.01 strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0 strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML5 구분없음 <!DOCTYPE html>
DOCTYPE의 실제 사용법

쇼핑몰을 운영하면서 사실 위 DTD구문을 기억할 필요는 없으며, 나의 웹페이지 최상단에, 즉 <html> 태그 위에 올바르게 존재하는지만 확인하면 됩니다. 가장 많이 사용하는 구문 정도는 보관해 두고 있으면 편리합니다. 일반적으로 XHTML1.0 transitional 버전을 가장 많이 사용하며 최근에는 HTML5 버전이 급속도로 확산되고 있는 추세입니다.