html5

DTD(Document Type Definition) - 문서 형식 정의

  • doctype이 무엇을 하는지
  • 표준모드(standard mode)와 관용모드(quirks mode)의 차이

두 가지를 정의해보고자 한다.

DTD란?

  • 문서 형식 정의(DTD: Document Type Definition)는 마크업 문서의 요소와 속성등을 해석하는 기준을 명시하는 것이다.
  • 문서 형식에는 HTML5, XHTML, HTML 3가지 유형이 존재한다.
  • 이전 버전의 HTML(HTML2 ~ HTML4)은 SGML에 기반을 두어 만들어졌기 때문에 상세한 DTD 참조가 필요하며, 이 때문에 DOCTYPE을 선언하려면 공개 식별자와 시스템 식별자가 포함된 긴 문자열을 작성해야 한다.
  • HTMl 4.01 Strict 모드로 문서 형식을 정의할 경우
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DTD를 정의하지 않으면, 관용모드(quirks mode)로 렌더링된다.

  • DOCTYPE 선언이 존재하지 않거나 잘못 작성할 경우, 웹 브라우저는 웹문서를 관용모드로 읽는다.
  • 관용모드란 IE6 이전의 오래된 브라우저에 대응된 웹사이트의 하위 호환성을 지원하기 위해 웹 브라우저가 웹문서를 해석하는 방식이다.
  • 표준모드(standard mode)는 W3C나 IETF의 표준을 엄격히 준수하여 문서를 해석한다.
  • 관용모드는 같은 코드라도 브라우저마다 서로 다르게 해석하므로 다른 결과를 보여줄 수 있다.

표준모드와 관용모드의 대표적인 차이

  • IE 박스모델 버그

    • 관용모드: width 계산할 때, padding과 border를 포함한다.
    • 표준모드: width 계산할 때, padding과 border를 포함하지 않는다.

  • 인라인 요소의 수직정렬

    • 관용모드: box의 border bottom에 맞추어 이미지를 정렬한다.
    • 표준모드: baseline에 맞추어 정렬한다.

  • 테이블 안에 font-size 상속

    • 관용모드: 테이블 안에서 텍스트는 기본 폰트사이즈를 상속하지 않는다.
    • 표준모드: 테이블 안에서 텍스트는 기본 폰트사이즈를 상속받는다.