(HTML) DOCTYPE

호두파파·2021년 1월 29일
1

doctype이란

"문서 형식 선언"(Document Type Declaration), 또는 doctype이란 문서의 유형을 정의하기 위해 사용하는 선언문이다.

문서 타입 정의는 HTML5, XHTML, HTML의 세가지 문서 유형이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성들ㅇ르 처리하는 기준이 되며 유효성 검사에 이용된다.

웹 문서의 시작을 알려주며 태그보다 먼저 선언한다. DOCTYPE은 웹 브라우저에서 처리할 문서가 HTML이며 어떠한 버전으로 사용했으니, 해당 방식대로 해석하라는 의미를 갖는다.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

위와 같이 간단하게 DOCTYPE을 선언하여 처리할 수 있다.

(HTML5에서는 SGML에 기반을 두지 않아서 DTD 참조가 필요 없으며, 최소한의 코드 작성이 기본 방향이라 매우 간단히 선언할 수 있다. DOCTYPE 선언은 선택적이지만 하위 호환성을 위해 위와 같이 사용하는 것이 추천된다.)

html에서는 대소문자를 구별하지 않지만, DOCTYPE의 경우 강조를 위해 대문자로 많이 사용한다.

doctype 선언의 중요성

DOCTYPE을 선언하지 않으면 각각의 브라우저들이 저마다의 기준대로 랜더링을 실시해버린다. (쿼크모드 랜더링)

  • 웹 브라우저에서는 문서 형식 선언이 없는 HTML 문서를 쿼크 모드로 렌더링하지만, 문서 형식 선언이 있는 HTML 문서를 표준 모드로 랜더링하기 때문에, 문서 형식 선언을 이용해서 어떤 웹 페이지가 모든 웹 브라우저에서 같은 레이아웃으로 제공되도록 할 수 있다.

결론 : 문서형 정의를 생략하는 경우, 웹 브라우저가 표준모드가 아니라 비표준모드(Quirks Mode)로 랜더링되어 크로스 브라우징에 어려움을 겪는다. 문서형 정의는 HTML 문서의 최상단에 위치해야 한다.

DTD(문서형 정의)이란?

문서형 정의(DTD: Document Type Definition)은 HTML5, XHTML, HTML의 세가지 문서 유형이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성 등을 처리하는 기준이 되며 유효성 검사에 이용된다.

이전 버전의 HTML(HTML2~HTML4)은 SGML(Standard Generalized Markup Language)에 기반을 두어 만들어졌기 때문에 DTD 참조가 필요하며, 이때문에 DOCTYPE 선언을 하려면 공개 식별자와 시스템 식별자가 포함된 긴 문자열을 작성해야 한다.

HTML과 XHTML은 각 버전에서 사용 가능한 태그나 속성 등을 DTD로 상세히 정의한다. DTD는 XML 문서들의 클래스에 논리적인 구조를 강요하는 법칙이다. 따라서 DTD는 모든 적법한 마크업을 쓰고 마크업이 문서에 포함될 수 있는 장소와 그 방법을 지정한다. 이런 요소 구문 또는 문법은 그들의 속성과 의미를 정의한다.


정리하기

  1. DTD(DOCTYPE)란?

    DTD는 Document Type Definition의 약자이다. 즉 문서 형식을 정의해주는 것이다.

  2. DOCTYPE 종류

    • 공통의 DOCTYPE 선언하기

      1. HTML5

        <!DOCTYPE html>

      2. HTML 4.01 Strict (엄격모드)

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

      3. HTML 4.01 Transitional (호환모드)

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

      4. XHTML 1.0 Strict (엄격모드)

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

      5. XHTML 1.0 Transitional (호환모드)

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

      위의 다섯가지가 제일 많이 사용되는 것이다.

      DTD를 적지 않는 브라우저들은 Quirks Mode 상태(어물쩡한 상태)로 렌더링 되기 때문에 바른 DTD를 적어주는 것이 좋다. 크로스 브라우징을 하기 위해서는 꼭 필요한 원칙이다.

      우리나라에서는 DOCTYPE 중에서 XHTML 1.0 Transitional를 제일 많이 사용중이다. 그 이유중에 하나는 IE중에서도 하위 브라우저를 사용하는 곳이 많기 때문이다. 또 하나는 표준모드는 너무 엄격하여 적용하기가 쉽지 않아 하위 브라우저 호환성을 고려하여 느슨한 상태의 호환모드 DOCTPYE 이다.

  3. Quirks MODE(쿼크모드) 렌더링과 DTD

    오래된 웹 브라우저를 위하여 디자인된 웹 페이지의 하위 호환성을 유지하기 위해 W3C나 IETF의 표준을 엄격히 준수하는 표준모드(Standards Mode)를 대신하여 쓰이는 웹 브라우저 기술을 가리킨다.참고문헌

  4. 쿼크모드의 발생 원인

  • DOCTYPE 선언이 존재하지 않거나 잘못 적혀있을 경우, 웹 브라우저는 문서를 쿼크 모드로 해석한다.

  • DOCTYPE 선언 내의 URL이 생략된 경우, 웹 브라우저는 문서를 쿼크 모드로 해석한다.

  • 호환 출력 방식(Quirks Rendering Mode)의 특징

    • 브라우저가 HTML을 읽는데 시간이 더 걸린다.
    • 브라우저가 HTML을 해석하는데 시간이 더 걸린다.
    • 브라우저가 HTML을 출력하는데 시간이 더 걸린다.
    • 브라우저마다 HTML을 각각 다르게 출력한다.

참조 : DOCTYPE(문서형 정의) 선언(https://webdir.tistory.com/40)

profile
안녕하세요 주니어 프론트엔드 개발자 양윤성입니다.

0개의 댓글