DOCTYPE의 기능
리액트를 공부하다 VanillaJS를 다시 학습하기 위해 돌아온 날이었다.
IDE의 단축키 기능으로 매번 html 파일을 세팅했었는데, 갑자기 눈에 들어온 <!DOCTYPE html> ...
문서 타입이 html이라고 지정해주는것 같긴 한데..🤔
DOCTYPE에 대한 궁금증을 해소를 위해 이번 포스팅을 작성하려고 한다.
DOCTYPE은 모든 문서의 최상단에서 찾을 수 있으며, 이는 필수로 들어가야하는 서문이다.
브라우저가 문서를 랜더링 할 때 html 문서가 어떤 모드로 작성되었는지 브라우저에게 알려주는 역할을 한다.
Why? 그리고 모드는 뭐지?
그렇다면 이렇게 선언하는 이유는 무엇일까?
오래된 웹 사이트들은 너무 오래되어서 현재의 웹 표준(W3C)에 부합하지 않다.
그러다 보니 렌더링 하는데 의도대로 출력되지 않는 등의 치명적인 문제가 발생하게 되었다.
그래서 이를 해결하기 위해 렌더링 모드를 갖게 되었고, doctype 선언을 통해 모드를 선택할 수 있다.
웹 브라우저에는 3가지 렌더링 모드가 있다.
- Standard mode : W3C 표준에 따라 렌더링
- Quirks mode : 오래된 브라우저의 행동을 모방하여 렌더링
- Almost Standard mode, Strict mode : Standard mode와 비슷하지만 table cell에서만 Quirks mode로 실행됨
렌더링 모드를 선택하는 과정을 Doctype Sniffing 또는 Doctype Switching 이라고 한다.
html을 작성할 때 doctype을 선언하면 Standard mode로 실행되고, 선언이 따로 없으면 기본적으로 Quirks mode로 실행된다.
또한 브라우저가 출력하고자 하는 문서가 최신이라고 판단되면 Standard mode로 렌더링 한다.
Quirks mode는 결국 오래된 웹 사이트들이 최신 버전의 브라우저에서 깨져 보이지 않으려는 것을 목표로 한다.
html은 모드마다 적용되는 태그와 적용되지 않는 태그가 나뉜다.
서로 다른 모드에서 html 태그를 사용한다면, 브라우저에서 문법 오류로 간주하게 된다.
따라서 doctype은 선언을 통해 모드에 맞게 문법 검사를 하는 역할을 수행한다.
// doctype 관련 메서드
document.doctype // <!DOCTYPE html>
// 문서 렌더링 관련 메서드
// BackCompat은 Quirks mode 일 경우
// CSS1Compat은 Quirks mode 를 제외한 나머지 모드인 경우
document.compatMode // BackCompat
document.compatMode // CSS1Compat<Ref>