DOCTYPE(Document Type)?
HTML이 어떤 버전으로 작성되었는지 미리 선언할 때 사용하는 개념입니다.
이렇게 선언된 버전을 통해 웹 브라우저는 내용을 잘 표시할 수 있습니다.
HTML에서 !<DOCTYPE>으로 선언해서 사용하고, DOCTYPE 선언이 없으면 호환 모드(squirks mode)로 동작합니다.
호환모드란?
브라우저의 렌더링 옵션에는 표준 모드, 호환 모드가 있습니다.
HTML 문서에 DOCTYPE이 있으면 표준모드(Standards mode), 없으면 호환 모드(Quirks mode)로 동작합니다.
호환모드로 렌더링하면 오래된 페이지도 최신 버전 브라우저에서도 깨지지 않고 보이게 하는데, 이로 인해 브라우저마다 보이는 화면이 다를 수 있습니다. 이외에도 여러 이유로 표준 모드가 더 권장되므로 DOCTYPE을 명시하는 것을 추천합니다.
- GPT에게 물어본 표준 모드 권장 이유
- 요약 : 표준 모드는 최신 웹 표준을 준수하고, 일관성 있고 최적화된 웹 페이지를 제공하므로 권장됩니다. 이를 통해 개발자는 더 예측 가능하고 유지보수하기 쉬운 코드를 작성할 수 있으며, 사용자에게 더 나은 경험을 제공할 수 있습니다.
-
더보기
- 웹 표준 준수: 표준 모드는 최신 웹 표준을 준수합니다. 이는 HTML, CSS, JavaScript와 같은 웹 기술이 최신 사양에 맞게 동작한다는 것을 의미합니다. 이를 통해 일관된 결과를 얻을 수 있으며, 최신 기능을 사용할 수 있습니다.
- 호환성 향상: 표준 모드는 다양한 브라우저에서 동일한 방식으로 페이지를 렌더링하게 합니다. 이는 웹 페이지가 다양한 브라우저와 플랫폼에서 일관되게 보이고 동작하도록 보장합니다. 반면, 호환 모드는 과거 브라우저의 버그나 특이한 동작을 그대로 따르기 때문에 일관성이 떨어질 수 있습니다.
- 성능 최적화: 표준 모드는 최신 브라우저 엔진에서 최적화된 성능을 제공합니다. 이는 브라우저가 최신 렌더링 및 자바스크립트 엔진을 활용하여 더 빠르고 효율적으로 페이지를 처리할 수 있게 합니다.
- 미래 지향적 개발: 표준 모드는 최신 기술을 반영하고 있기 때문에, 새로운 기능과 API를 사용할 수 있습니다. 이는 개발자가 최신 기술을 활용하여 더 나은 사용자 경험을 제공하는 웹 애플리케이션을 만들 수 있게 합니다.
- 디버깅과 유지보수 용이: 표준 모드에서는 개발자가 의도한 대로 코드가 동작하므로, 디버깅과 유지보수가 더 쉽습니다. 호환 모드는 예측하지 못한 동작을 초래할 수 있어 디버깅이 어려울 수 있습니다.
DTD(Document Type Definition)
DOCTYPE 명시할 때 사용하는 문서 형식 정의입니다.
예시로 아래와 같은 DTD들이 있습니다.
- XHTML 1.1
- XHTML 1.0
- Strict DTD
- Transitional DTD
- Frameset DTD
- HTML 4.01
- Strict DTD
- Transitional DTD
- Frameset DTD
현재로서는 HTML 5의 방식으로 DOCTYPE을 선언하는 것이 바람직합니다.
아마 HTML 작성할 때 한 번쯤 적어봤던 아래 코드가 HTML 5 방식입니다.<!DOCTYPE html>
이전 HTML 버전들과 다르게 HTML 5은 DTD를 사용하지 않으며, 간단한 이런 한 줄 코드로 문서 타입 선언이 가능합니다.
이는 DTD가 SGML (Standard Generalized Markup Language, 표준 일반화 마크업 언어)에 기반해서 만들어졌는데 HTML5는 이 SGML에서 벗어나 더 유연한 구조로 전환되었기 때문입니다. 비록 디자인에 대한 철학과 웹 표준이 변화하고 발전하면서 DTD는 사용하지 않지만, HTML5를 문서화하려는 노력은 지속되고 있습니다.
참고자료
Must-Know-About-Frontend/Notes/html/doctype.md at main · baeharam/Must-Know-About-Frontend
:mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.
github.com
Must-Know-About-Frontend/Notes/html/standard-quirks.md at main · baeharam/Must-Know-About-Frontend
:mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.
github.com
HTML5 DTD Reference
The HTML5 specification lists tag omission rules for each applicable element (or element combination) individually. For example, the specification text for the p element reads A p element's end tag may be omitted if the p element is immediately followed by
sgmljs.net
'WEB' 카테고리의 다른 글
| [WEB] SVG (1) | 2024.08.07 |
|---|---|
| [WEB] 웹 표준 및 웹 접근성 (0) | 2024.08.06 |
| [WEB] 번들러 (0) | 2024.08.02 |
| [WEB] CI/CD (0) | 2024.08.02 |
| 웹 성능 최적화 여정(1) - 이미지 용량 압축 라이브러리 (0) | 2024.03.30 |
