-
HTML: DTD(Document Type Definition)란?STUDY/HTML&CSS 2022. 2. 22. 16:37
[ DTD(Document Type Definition; 문서 형식 정의)란 ]
브라우저에게 '이 문서가 어떤 문서 형식을 따르고 있다'는 것을 알려주는 것이다.
<!--우리가 HTML5에서 가장 처음으로 입력하는 그것!--> <!DOCTYPE html>HTML 개발을 진행하다보면 여러 브라우저의 호환성 문제인 크로스 브라우징(cross browsing)문제에 직면하게 된다. DTD를 작성하지 않아도 개발을 할 수 있지만, 이 경우 웹 페이지가 비표준모드(Quirks mode)로 렌더링 된다. 우리는 개발을 할 때 어떤 브라우저를 표준으로 두고 개발을 할 수 없다. 이 표준이라는 기준도 참 모호하며, 만약 크롬을 기준으로 개발을 한다고 해도 IE나 사파리에서 다르게 동작할 수 있다. 여기서 크로스 브라우징(cross browsing)문제가 터지는 것이다.
나는 이 비표준모드(Quirks mode)를 "HTML을 읽고 출력하는데 표준 방식이 없으니, 웹 브라우저가 각자 자기의 방식으로 이걸 해석하려 드는 것!"이라 해석했다. 그래서 비표준모드의 경우 브라우저가 HTML을 읽고/해석하고/출력하는데 시간이 더 오래 걸리며, 브라우저마다 HTML을 각각 다르게 출력하는 것이다.
다행히 우리와 브라우저가 함께 지켜야 하는 '표준 문서 형식'을 W3C나 IETF가 정해줬다. 말 그대로 HTML의 개발에 필요한 조금 엄격한 작성 규칙을 정해준 것. 그러니 우리는 DTD(문서 형식 정의)를 표준모드(Standards Mode)에서 그 형식에 맞게 개발을 진행하면 된다. 그렇게 우리가 작성한 HTML 문서는 구조적, 디자인적으로 검증기준을 갖게된다. 굳이 브라우저를 기준으로 두고 개발을 하지 않아도 되는 것이다. (물론 IE와 같이, 특정 브라우저를 위해 개발이 필요할 때가 있다.)
각 브라우저에서 이 DTD의 기준에 맞춰 렌더링을 해주고 있으니, 이 DTD를 제대로 수용하지 못하는 브라우저라면, 그 브라우저가 잘못된 것이지 우리의 문서 자체는 올바른 문서가 된다.
그러니, 가끔은 브라우저의 탓을 해도 괜찮지 않을까!
[참고]
https://singihae.gitbooks.io/front-end-developer-guide-book/content/chapter01.html
https://medium.com/@su_bak/web-dtd-document-type-definition-%EB%9E%80-1a1413771189
최대한 이해한 부분까지 작성해보려고 했습니다.
혹시나 틀린 정보가 있다면 꼭 댓글로 피드백 부탁드립니다.
'STUDY > HTML&CSS' 카테고리의 다른 글
HTML: 태그의 중요성, 스크린 리더 (0) 2022.03.03 HTML이란? (0) 2022.02.22