본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

doctype (독타입)

최초 작성일
최종 수정일
이번 시간에는...
웹 표준에 있어서 가장 먼저 선언되어야 할 HTML 독타입(doctype)에 대해 살펴 봅니다. 그리고 이를 통해 HTML4.01 같은 버전이 무엇인지, 그리고 HTML과 XHTML은 또 무엇인지 알아 봅니다.

지난 시간에는 웹 표준에 대해 알아보았습니다. 웹 페이지를 제작할 때, 왜 표준을 지켜야 하는지에 대해 아셨으리라 봅니다. 이번에는 이 웹 표준을 준수하기 위해서 가장 먼저 선언해야 하는 독타입(doctype)에 대해서 알아보도록 하겠습니다.

독타입의 종류

사실 웹 표준을 지키는 문서의 타입에는 몇 가지 종류가 있습니다. 거의 비슷한 듯, 다른데요 보통 엄격하게 보느냐 느슨하게 보느냐의 차이입니다. 그리고 이 문서가 어떤 문서의 타입(document type)을 사용하는지를 선언하는 것이 독-타입(doc-type)인 것입니다.

그렇기 때문에 독타입은 언제나 가장 먼저 선언해 줘야만 합니다.

독타입의 버전과 타입

독타입은 버전과 타입의 형태로 이루어져 있습니다.

독타입 버전 종류

일단 이 외에도 문서의 버전은 더 있지만, 일단 주로 사용하며 W3C에서 권장하는 독타입 버전은 다음과 같습니다. (일단 HTML5는 제외하였습니다.)

  • HTML 4.01
  • XHTML 1.0
  • XHTML 1.1

위의 세가지 버전 중 XHTML 1.1은 가장 엄격한 독타입으로 보통 잘 사용하지 않습니다. 여기서 엄격하다는 것은 XHTML 1.0에서 쓸 수 있는 태그 요소들 중에 몇몇은 XHTML 1.1에서 사용할 경우 비 표준이 됩니다. 보통 비 표준으로 인식하는 태그 요소들은 주로 외형적인 요소 들입니다. 이는 CSS로 대체할 수 있기 때문에 비 표준으로 처리하여 해당 요소를 안 쓰도록 하는 것입니다.

나머지 'HTML 4.01'과 'XHTML 1.0'에서 쓸 수 있는 태그 요소는 동일합니다. 하지만 'HTML'과 'XHTML'은 태그를 작성하는 방식이 조금 다릅니다.

HTML vs XHTML

우리가 처음 태그 작성하는 것을 배울 때에 태그 형태로 두 가지를 배웠습니다. 하나는 열리고 닫히는 태그이고, 다른 하나는 스스로 닫히는 태그입니다.

여기서 우리가 배운 방식으로 작성한 것은 XHTML 방식입니다. 만약 HTML 방식으로 작성한다면 img 요소를 다음과 같이 작성할 수 있습니다.

차이점을 확인 하셨나요?

네 끝을 보시면 '/'이 있고 없고의 차이가 있습니다. HTML 버전에서는 스스로 닫는 태그를 <br />이 아닌, <br>의 방식으로 표현해도 문제가 없습니다. 또한 p 요소나 li 요소 같은 경우, 굳이 닫아주지 않아도 됩니다. 다음 블록 요소가 오면 알아서 닫은 것으로 인식합니다.

언뜻 보기에 이러한 방식이 더 간편하고, 효율적으로 보입니다. 물론 이는 작성자의 선택입니다만, 저는 절대 이런 방식을 추천하지 않습니다.

이것은 작성자의 습관의 문제인데요, 이러한 방식은 페이지가 커질 수록 소스의 가독성을 떨어트릴 수 있습니다. 그나마 스스로 닫는 태그에서 '/'이 빠지는 것은 아주 큰 문제까지 되는 것은 아니지만, p나 li 같은 요소를 안 닫아주는 습관은 조금 위험합니다. 본인의 작성 습관 때문에 태그를 닫지 않아, 레이아웃이 깨질 수도 있습니다. 특히 나중에 오타나, 자신도 모르게 닫는 것을 빠트렸을 때, XHTML 방식보다 HTML 방식에서 문제를 찾는 것이 더 어렵습니다.

처음 배우시는 분이라면, (기존에 원래 할 줄 아시는 분이라 할지라도) XHTML 버전으로 작성하는 습관을 들이시길 권장합니다.

독타입의 타입 종류

독타입의 타입 종류는 HTML 4.01과 XHTML 1.0에 있습니다. 그 외의 XHTML 1.1나 HTML5 같은 경우에는 굳이 타입 종류가 따로 없습니다. 이 타입에 따라 몇몇 태그 요소가 표준일 수도 있고, 비 표준일 수도 있습니다.

  • Strict
  • Transitional
  • Frameset
Strict

Strict의 타입은 엄격한 규격을 나타냅니다.

이 Strict 타입에서는 우리가 굳이 배우진 않았던 center, font 요소 등을 사용할 수 없습니다. (center와 font는 각각 문단의 가운데 정렬과 글씨체에 스타일을 줄 수 있는 HTML 요소입니다. 각각 CSS의 text-align, font 등으로 대체할 수 있습니다.) 왜냐하면 이런 요소는 외형적인 것을 나타내는 요소로, 의미와 외형의 분리가 기본인 웹 표준 정신에 위배되므로 앞으로 사라질 요소들입니다.

그렇기 때문에 만약 새로 페이지를 만든다면, 특히 그것이 여러분의 학습을 위한 페이지라면 이 타입을 추천 드립니다.

Transitional

Transitional 타입은 과도기 적인 규격을 나타냅니다.

center나 font 요소 같은 경우 앞으로 사라질 요소들입니다. 이 비 표준적인 요소들이 사실, 표준이 보급되지 않았던 시절에는 많이 사용되어 왔습니다. 때문에, 만약 이미 예전부터 서비스하고 있던 페이지를 수정할 경우, 이런 요소들을 불가피하게 남겨놓을 수 밖에 없습니다. 그럴 경우 이 타입을 사용하면 됩니다.

실제로 이런 이유로 업체들이 많이 사용하는 타입이기도 합니다.

Frameset

프레임을 사용하는 페이지를 나타냅니다. 사실 지금은 거의 사용하지 않는 타입입니다.

이 프레임이라는 것은 예전 인터넷이 보급되던 시절, 나모 웹 에디터 같은 것으로 웹 페이지를 만들 때 사용하던 방식입니다. 일단 프레임을 두 세 개로 레이아웃을 나누어 잡고, 위 쪽에는 head.html, 왼쪽에는 menu.html, 몸통에는 body.html 이런 식으로 각기 다른 html 파일 들을 하나의 페이지처럼 보여주는 방식입니다.

예전 frameset으로 구역을 나누어 레이아웃을 잡던 모습
프레임셋을 이용한 레이아웃

하지만 이런 방식은 한 개의 페이지가 아닌, 세 개의 페이지를 한 페이지처럼 보여주는 것이기 때문에, 검색 엔진이나 접근적인 면에서 좋지 않습니다. 그런 이유로 지금 대부분의 사이트들이 사용하지 않으며, 앞으로도 없어질 타입입니다. HTML5에선 폐기가 되었습니다. 그러니, 예전에는 이런 방식이 있었다는 것만 알아두시고 넘어가면 되겠습니다.

독타입의 종류별 선언

이제 그럼 앞서 살펴본 버전과 타입을 조합하여 실제로 어떻게 선언되는지 살펴보겠습니다.

일단 독타입은 처음 말씀 드렸듯이 문서의 가장 처음으로 와야 브라우저가 페이지의 타입을 인식합니다. 맨 앞에 선언되어야만 표준입니다.

HTML5 이전의 독타입은 SGML기반이라 뒤에 'dtd 참고 URL'이 들어갑니다. 이런 이유는 굳이 아실 필요는 없으며, 왜 이렇게 길게 들어가야 하는 지만 받아들이시면 됩니다.

HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
XHTML 1.0 Strict
XHTML 1.0 Transitional
XHTML 1.0 Frameset
XHTML 1.1

독타입은 보시다시피 꽤 깁니다. 이것을 굳이 외울 필요는 없고, 필요에 따라 복사해서 붙여 넣으시면 됩니다.

표준과 비 표준

어쩌면 여러분은 아직까지도 왜 굳이 이렇게 표준에 연연해야 할까 생각할지 모릅니다. 그래서 같은 내용을 작성한 두 페이지를 하나는 독타입을 넣어 표준 모드로 랜더링 되도록 하고, 나머지 하나는 독타입을 제거하여 비 표준 모드로 랜더링 하도록 하겠습니다.

일단 페이지에는 차이를 조금 더 보여주기 위해서, 내용에도 비 표준의 소스를 더 적었습니다. 다음의 링크를 각 브라우저에서 열어 내용을 비교해 보세요.

그나마 크롬이나, 파이어 폭스에서는 큰 차이가 없습니다. 테이블 부분의 글씨 크기 정도가 다릅니다.

하지만 IE에서는 의외의 큰 차이를 확인 할 수 있습니다. 이 페이지를 IE8 버전에서 열어보시기 바랍니다. 현재 여러분 PC의 IE 버전이 8 이상이라면, IE Tester를 통해 확인해 보시기 바랍니다. (준비하기 강의 참조)

예상과 다르게 많이 어긋나 보이는 IE8의 비 표준 모드
IE8 비 표준 모드에서 본 페이지

비 표준 모드에서 많은 부분이 일그러져 있습니다. 일단, 전체 박스가 가운데 정렬이 아닌 왼쪽으로 치우쳐져 있습니다. 그리고 안에 내용이 아래로 떨어져 버렸고, 테이블 형태도 좀 다른 것을 알 수 있습니다.

이 만큼 비 표준이라는 것은 여러분에게 예측하기 힘든 결과를 가져다 줍니다. 만약 화면이 깨져 보이더라도, 모든 브라우저가 동일한 모습으로 깨진다면 수정이 어렵지 않을 것입니다. 하지만, 비 표준 모드는 브라우저마다 보여지는 모습이 다를 수 있습니다. 그리고 이는 여러분이 바라던 결과는 아닐 것입니다.

여러 브라우저에서 올바르게 나오도록 하는 것을 크로스 브라우징이라고 합니다. 그리고, 이 크로스 브라우징의 가장 기본적인 시작은 바로 표준 모드 준수입니다. 만약 여러분이 작업하면서 페이지가 계속 이상하게 나온다면, 페이지가 표준 모드로 보여지는지부터 확인하시기 바랍니다.

파이어폭스에서 페이지 정보를 보면, 해당 페이지가 지금 표준 모드인지 또는 비 표준 모드인지 확인할 수 있습니다.
파이어폭스에서본 페이지 정보
요점 정리
  • 웹 표준을 준수하는데 가장 먼저 해야할 일은 문서 맨 상단에 !doctype을 선언하는 것.
  • HTML은 태그 사용에 좀 더 유연한 반면, XHTML은 태그 사용에 매우 엄격함.
  • 하지만 XHTML같은 엄격한 표준은 작성자에게 보다 좋은 습관을 들이게하며, 추후 유지보수 수정이 더 쉬워짐.
  • HTML 4.01의 strict는 엄격한 규격. 표현에 관련된 태그는 사용 불가
  • tranditional은 과도기적인 규격
  • frameset은 과거 프레임을 나눠 레이아웃을 제작하던 방식의 규격. 현재는 사용하지 않음.
  • 비표준 문서로 렌더링 시, 기존 표준 문서와는 다른 형태로 렌더링 될 수 있음.
  • 웹 페이지의 크로스 브라우징을 위해선 꼭 표준을 지켜야 하며, 표준을 위해 꼭 올바른 독타입(doctype)을 선언해야 함.

이 글이 유용하셨다면 친구들에게 공유 해주세요.