``의 목적은 무엇인가요?

Question

`<!DOCTYPE html>`의 목적은 무엇인가요?

Accepted Answer

``은 HTML 문서의 맨 첫 줄입니다. 브라우저에게 **quirks 모드**(1990년대 브라우저를 흉내내는 옛 버그 호환 모드)가 아니라 **표준 모드(standards mode)**로 렌더링하라고 알려줍니다. ```html ... ``` ## 표준 모드 vs quirks 모드 doctype이 없으면 브라우저는 **quirks 모드**로 후퇴하며, 이는 레이아웃 동작을 예상치 못한 방식으로 바꿉니다. 가장 유명한 것이 **box model**입니다. ```text Quirks 모드: width에 padding + border가 포함됨 (옛 IE box model) 표준 모드: width는 content box (CSS 명세) — 예측 가능함 ``` 그 밖의 quirks로는 table 셀의 line-height 처리 차이, 이미지 간격, CSS 단위 처리 등이 있습니다. 이러한 불일치는 공들여 작성한 CSS가 다르게 렌더링되게 만들므로 거의 항상 표준 모드를 원하게 됩니다. ## 지금은 왜 이렇게 짧은가 HTML4/XHTML에서는 doctype이 DTD(Document Type Definition)를 참조하는 긴 URL이었습니다. ```html ``` HTML5는 이를 단순히 ``로 간소화했습니다. 더 이상 DTD를 가리키지 않으며, 브라우저가 인식하는 순수한 모드 전환 장치입니다. ## 왜 중요한가 항상 ``을 첫 줄로 포함하십시오. 이는 모든 CSS 튜토리얼과 프레임워크가 전제하는 현대적이고 일관된 렌더링 규칙을 페이지가 사용하도록 보장하는 한 줄짜리 약속입니다. 이를 생략하면 영문 모를, 디버깅하기 힘든 레이아웃 차이로 이어집니다.