<!DOCTYPE html>은 HTML 문서의 맨 첫 줄입니다. 브라우저에게 quirks 모드(1990년대 브라우저를 흉내내는 옛 버그 호환 모드)가 아니라 **표준 모드(standards mode)**로 렌더링하라고 알려줍니다.
html
...
<!DOCTYPE html>은 HTML 문서의 맨 첫 줄입니다. 브라우저에게 quirks 모드(1990년대 브라우저를 흉내내는 옛 버그 호환 모드)가 아니라 **표준 모드(standards mode)**로 렌더링하라고 알려줍니다.
...
주니어부터 시니어까지 상세한 답변이 포함된 IT 면접 질문 라이브러리.
후원하기doctype이 없으면 브라우저는 quirks 모드로 후퇴하며, 이는 레이아웃 동작을 예상치 못한 방식으로 바꿉니다. 가장 유명한 것이 box model입니다.
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이었습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "...dtd">
HTML5는 이를 단순히 <!DOCTYPE html>로 간소화했습니다. 더 이상 DTD를 가리키지 않으며, 브라우저가 인식하는 순수한 모드 전환 장치입니다.
항상 <!DOCTYPE html>을 첫 줄로 포함하십시오.
이는 모든 CSS 튜토리얼과 프레임워크가 전제하는 현대적이고 일관된 렌더링 규칙을 페이지가 사용하도록 보장하는 한 줄짜리 약속입니다. 이를 생략하면 영문 모를, 디버깅하기 힘든 레이아웃 차이로 이어집니다.