14. HTML 문서를 위한 올바른 문서형(DTD) 선택

이 글은 추지호, 아쿠아데라님의 공역입니다.

소개

13장에서 HTML 문서의 HEAD 섹션을 해부해 보면서 HEAD 안에 포함되어 있는 것들의 차이가 무엇이고 무슨 일을 하는지 간단히 살펴보았다.
이번 장에서 나는 문서형을 좀 더 자세하게 다룰 것이다. 문서형이 무엇을 보여주는지, 어떻게 HTML을 유요하게 하는지, 문서를 위한 문서형을 어떻게 선택하는지, 그리고 드믈게 필요할 수도 있겠지만 때때로 필요할 수 있는 XML 선언까지 알아볼 것이다.

  • 첫번재로 오는 DOCTYPE
  • 문서형 변경과 렌더링 모드
  • 유효성
  • 문서형 선택
  • XML 선언
  • 요약
  • 연습문제
  • 더 읽어볼 것들

첫번재로 오는 DOCTYPE

당신이 만든 HTML 문서안에서 가장 먼저 와야 하는 것은 DTD 선언이다. 만약에 당신이 이전에 DTD 선언에 대해서 누구에게도 듣지 못했다고 해도 걱정하지 마라. 종종 일을 좀 더 쉽게 하기 위해서 “문서형Doctype“이라고도 하는데 나 역시 그렇게 부르겠다.

당신은 “DTD“또는 문서형이 무엇인지 굼금해 하고 있을수도 있다. DTD는 “Document Type Definition”의 약자다. 그리고 특정 HTML상에서 사용이 허가되는 요소나 속성을 정의한 것이다.

문서형은 다른 종류의 소프트웨어에서 두가지로 사용된다:

  1. 웹 브라우저는 웹 브라우저가 사용할 렌더링 모드가 무엇인지를 결정하기 위해 문서형을 사용한다.(이후에 더 많은 렌더링 모드를 보자)
  2. 마크업 유효성 검사기는 문서를 검사하기 위한 규칙이 무엇인지를 결정하기 위해 문서형을 사용한다.(이후에 더 자세히 알아볼 것이다)

이것들 둘 다 당신에게 영향을 미친다. 하지만 둘의 차이는 이번 장 이후에 자세히 다룰 것이다.

예제를 보자:

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

지금, 이것은 당신에게 의미 없는 것처럼 보일 수 있다 그래서 이것이 어떻게 만들어졌는지 나와 가능한 간단하게 살펴보자. 각 문자들이 무엇인지 정확하게 파악해 보자. !DOCTYPE 글을 참고해보자.

문서형의 일부 가운데 가장 중요한 것은 인용부호로 감싸진 두개의 문자열들이다. -//W3C//DTD HTML 4.01//EN은 W3C에 의해 공개된 DTD 문서로, HTML 버전이 4.01이라는 것을 기술하고 있고, DTD가 영어로 작성되어 있다는 정보를 알려준다.

두번째 문자열인, http://www.w3.org/TR/html4/strict.dtd은 이 문서형을 사용하기 위한 DTD 문서의 위치를 가르키는 URL이다.

비록 문서형이 약간 이상하게 보일지라도, HTML과 XHTML 사양은 이것을 필요로 한다. 만약 당신이 문서형을 포함하지 않는다면 W3C 마크업 유효성 검증이나 다른 도구에서 HTML 문서의 에러를 찾아낼 수가 없을 것이다. 이런 도구들을 사용자들이 확장 기능을 설치해서 추가하는 동안 어떤 웹 브라우저는 기본적으로 같은 기능을 포함하기도 한다.

문서형 변경과 렌더링 모드

만약 당신이 문서형을 제공하지 않는다면, 브라우저는 어떤 방식으로든 문서를 조작하고 표시하려고 할 것이다. 그 웹 브라우저들은 각종 이상한 짓들을 시도하려고 할 것이다. 그래서 그것들은 거의 항상 아주 까다로울 수밖에 없습니다.

그래서 문서형이 없는 경우에 당신이 의도했던 대로 보이지 않을 수 있다. 왜냐하면 “doctype sniffing” 또는 “doctype switching”이라고 불리는 것들 때문이다.

21세기에 출시된 대부분의 웹 브라우저들은 HTML문서의 문서형을 보고, 문서의 저자가 웹표준을 준수하여 HTML과 CSS를 정확히 작성했는지를 결정하기 위해 문서형을 사용한다.

만약 잘 작성된 문서형을 찾는다면 웹 브라우저들은 페이지 레이아웃을 그리려 할 때 “표준 모드”라고 불리는 렌더링을 사용한다.
표준모드에서, 브라우저들은 일반적으로 CSS 사양에 따라서 페이지를 렌더링 하려고 노력한다.

한편, 만약 브라우저들이 올바르지 않은 문서형을 찾게 되면, 브라우저들은 오래된 방식이나 브라우저에서의 하위 호환성을 유지하기 위해 “Quirks Mode”를 사용한다.

역자주: Quirks Mode는 흔히 비표준 모드라고 이야기하는 것이다. IE의 Quirks Mode는 w3c의 박스 모델을 사용하지 않기 때문에 서로 다른 렌더링 결과를 보여준다.

Quirks 모드는 문서가 오래되었거나 웹표준으로 만들어지지 않았을 것이라고 가정하여 렌더링된다는 의미다. 그래서 브라우저에서 표시되는 렌더링 결과가 당신이 예상한것과 달리 실제로 약간 이상하거나 좋아 보이지 않을 수도 있다.

이러한 차이럼은 CSS가 어떻게 렌더링되느냐와 깊게 관련되어있으며 극소수의 경우에서만 HTML이 어떻게 다루어지는가와 관련이 있다.

당신이 웹 디자이너나 개발자라면 모든 브라우저들이 표준 렌더링 모드를 사용할 것이라고 확신할 때 가장 일관된 결과를 얻게 될 것이다.따라서 당신은 올바른 문서형을 사용하고, 웹표준을 준수해야 한다.

유효성

내가 전에 말했듯이, 문서형은 유효성 검증에서도 사용된다. 당신은 이 장 이후에 좀 더 자세히 배우게 될 것이다. 지금 당장은, 당신의 HTML 문서의 문법이 올바르고, 어떤 실수도 포함되지 않았다는 것을 확인하기 위해서 유효성 검증 도구를 알아둘 필요가 있다.

유효성 검증 프로그램은 당신이 어떤 규칙을 사용했는지 결정하기 위해 문서형을 확인한다. 이것은 문서에 작성된 언어의 철자를 확인하는 것과 같은데, 만약 당신이 문서형을 사용하지 않는다면 유효성 검증 프로그램은 철자나 문법 규칙을 확인할 방법을 알지 못할 것이다.

문서형 선택

당신은 문서형이 무엇을 위해 사용되고, 추가할 필요가 있다는 사실을 알고 있다. 그런데 당신은 어떤 것을 선택해야 하는지 알고 있는가? 하나만 있는게 아니다. 아주 많이 있다.
당신은

만약 당신이 더욱 진보된 웹페이지를 만들 수 있을것 같다면 그렇게 할 수 있을 것이다. 하지만 나는 여러 종류의 문서형에 대해서는 언급하지 않았다. 다음 두가지를 간단하게 설명해 보겠다.

만약 당신의 HTML 문서가 이것을 사용한다면:

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

또는, 당신의 HTML 문서가 이것을 사용한다면:

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

“진짜” XHTML은 XML로 웹브라우저에 전달되어져야 하지만 그렇게 되도록 하려면 이 장의 범위를 넘게 된다.

위 문서형 둘 다 브라우저에서 당신의 문서를 다룰 때 표준 모드를 사용할 것이다. 가장 눈에 띄는 효과는 CSS로 문서를 스타일링 할 때 더욱 더 일관된 결과를 얻게 되는 일이 될 것이다. 당신이 사용할 수 있는 몇개의 문서형을 보자. W3C는 당신이 웹 문서에서 사용할수 있는 DTD 목록을 공개했다.

당신은 아마 내가 여기에서 이야기한 “Strict”이라는 문서형을 주의해야 할 것이다. 조금 무섭게 들리긴 하겠지만 두려워 할 필요는 없다.

HTML과 XHTML 둘 다 엄격한 문서형과 전환형 문서형이 있다. 엄격한 문서형은 전환형 문서형보다 적은 시각적 마크업을 허용한 문서형인 경우를 의미한다. 시각적 마크업은 어떻게든 사용되어서는 안된다. 당신은 문서의 의미와 구조를 정의하기 위해 HTML을 사용할 수 있어야 하고, CSS로 문서를 어떻게 표현할지를 결정하는 것이다. 엄격한 문서형을 사용하면 유효성 검증 도구는 당신의 코드 속에 어떤 시각적 요소나 속성이 숨어 있더라도 그것들을 찾아서 경고를 해 줄 것이다.

XML 선언

나는 HTML 문서에서 가장 먼저 할 일이 문서형 선언이라고 했었다. 자, 사실 그것은 진실을 단순화 시킨 버전이다. XML 선언 역시 고려되어야 한다. 당신은 어떤 XHTML 문서에서 문서형 전에 아래와 같은 코드 조각을 본 적이 있을것이다.

<?xml version="1.0" encoding="UTF-8"?>

이것은 XML 선언이라고 부른다. 그리고 이것은 문서형을 선언하기 전에 선언되어야 한다.

IE6에에서 비표준 모드로 전환되는 문제가 있다. 당신은 비표준 모드로 전환되는 것을 원치 않을 것이다.

다행히 XML 선언은 당신이 정말로 XHTML 문서가 웹 브라우저에서 XML로 처리되기를 바라지 않는 이상 요구되지는 않는다. 그리고 당신은 UTF-8과 다른 문자 인코딩을 사용할 수 있고, 당신의 서버는 문자 인코딩을 결정하는 HTTP 헤더를 보내지 않아도 된다. 그래서 가장 쉬운 방법은 XML 선언을 생략해서 IE문제를 해결하는 것이다. 하지만 문서형은 잊지 말자.

요약

당신의 모든 HTML 문서들은 가장 먼저 문서형중 하나를 항상 포함해야 한다. 이것은 유효성 검증 도구가 당신이 사용한 HTML의 버전이 무엇인지 알게 해서, 당신의 실수들을 정확히 보고해 줄 수 있게 할 것이다. 이것은 또한 당신이 CSS로 문서를 스타일링 할 때 좀 더 일괄된 결과를 갖게끔 모든 최신의 웹 브라우저들로 하여금 표준 모드를 사용하게 할 것이다.

연습 문제

이 글을 읽은 당신은 여기 몇가지 질문에 대해서 답변을 할 수 있을 것이다:

  • HTML 문서에 문서형을 포함하는 두가지 목적은 무엇인가?
  • 엄격한 문서형 대신에 전환형 문서형을 사용하였을 때의 이점은 무엇인가?
  • XML 선언은 왜 문제가 될 수 있는가?
  • 나는 이번 장에서 Frameset 문서형은 언급하지 않았다. 이 것에 대해서 조사하고, 왜 이것을 사용하지 않았는지 알아보자.

더 읽어볼 것들

저자에 대해서

로저 요한슨은 웹 표준, 접근성 그리고 사용성에 대한 열정을 가진 웹 전문가이다. 그는 스웨덴의 웹 컨설턴트 기업 NetRelations에서 웹 사이트들을 개발하면서 지내고, 저녁과 주말에는 그의 개인 사이트 456 Berea Street Kaffesnobben에 글을 올리면서 지낸다.

컴퓨터 앞에 붙어 있지 않을 땐 종종 정원에 있거나 더루워진 손톱 밑을 손질하거나 낚시를 한다.

이 글과 비슷한 종류의 글은 'HTML' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.