오늘은 DOCTYPE 선언에 대해서 정리해보자.
여기저기 찾아보면 항상 첫번째 단골질문이 DOCTYPE 선언이었던 것 같다! 🤔🤔
우리가 html 문서를 작성할 때 가장 먼저 작성하는 태그 바로 <!DOCTYPE html>이다.
위치에서부터 알 수 있듯이 독타입 선언은 어떤 html 태그보다 먼저 작성되며 모든 웹 문서의 시작을 알려준다.
DOCTYPE 과 DOCTYPE 선언이란?
DOCTYPE 이란 Document Type 의 약자로 '문서의 유형'이다.
이러한 문서 유형을 선언하는 것을 DOCTYPE 선언, DOCTYPE Declaration이라고 하고,
DOCTYPE 선언은 문서가 어떤 버전의 HTML으로 작성되었는지를 정의하기 위해 사용한다.
그렇다면 왜 DOCTYPE을 선언 해줘야할까?
결론은 웹 문서를 브라우저에 의도한대로 온전히 올바르게 출력하기위해서이다.
(웹 브라우저 렌더링 엔진에게 어떤 모드로 렌더링할 것인지를 미리 알려주는 것!)
만약 선언을 생략한다면 어떻게 될까?
우리가 보고있는 브라우저의 화면은 작성된 웹 문서가 브라우저의 엔진으로 렌더링된 결과물이다.
웹 문서 내에 DOCTYPE을 올바르게 선언했다면 '표준모드'로 브라우저를 렌더링하게 된다.
하지만, 잘못된 방식으로 선언하거나 생략하게된다면 비표준 모드(호환 모드)로 렌더링하게되며
브라우저마다의 각기 다른 기준과 방식으로 렌더링을 하게되어 작성한 코드가 의도대로 동작하지 않을 수 있다.
(호환 모드와 표준 모드에 대해서는 하단의 MDN 링크를 참고하자!)
이렇듯 독타입 선언은
브라우저 렌더링 모드를 지정하고 유효성 검증의 기준이 되므로 '크로스 브라우징의 출발점'이자 '웹표준의 기초'이다.
+)
✔️ 이전에는 지금보다 복잡한 방식으로 선언했지만 HTML5의 경우 간단하게 선언하고 있다.
( HTML 버전별 DOCTYPE 선언은 W3C 공식 문서를 확인하자!)
✔️ <html> 태그는 html이 시작되는 지점을 알려준다. 그러므로 <DOCTYPE> 태그는 엄연히 말하면 html 태그는 아니다.
✔️ DOCTYPE 선언은 선택적이지만 필수적이다.
✔️ html에서 대소문자를 구별하지는 않지만 DOCTYPE의 경우 강조를 위해 대문자로 많이 사용한다.
DTD Tutorial
DTD Tutorial What is a DTD? A DTD is a Document Type Definition. A DTD defines the structure and the legal elements and attributes of an XML document. Why Use a DTD? With a DTD, independent groups of people can agree on a standard DTD for interchanging dat
www.w3schools.com
호환 모드와 표준 모드 - HTML: Hypertext Markup Language | MDN
과거 웹 페이지는 넷스케이프 내비게이터(Netscape Navigator)용과 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)용의 두 가지 버전으로 만들어졌다. W3C에서 웹 표준을 제정할 당시, 기존
developer.mozilla.org
HTML doctype declaration
HTML Declaration ExampleThe content of the document...... Try it Yourself » Definition and Usage All HTML documents must start with a declaration. The decla
www.w3schools.com
⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :) ⚠️
*** 혹시라도 잘못된 정보가 있다면 언제든지 알려주시면 감사하겠습니다 ! ***
'FE interview' 카테고리의 다른 글
| [FE interview] Networking : #4 GET 방식과 POST 방식 (0) | 2021.07.17 |
|---|---|
| [FE interview] Networking : #3 HTTP와 HTTPS의 차이 (0) | 2021.07.13 |
| [FE interview] Browser : #2 브라우저의 동작 (0) | 2021.07.11 |
| [HTML, CSS, Javascript] FE 기술 면접 질문 (0) | 2021.07.07 |