티스토리 뷰
이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다.
문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다.
DOCTYPE이란 무엇인가. 항상 코드의 맨 앞에 적으면서 무엇인지 궁금했던 DOCTYPE을 알아봅니다.
WHAT
DOCTYPE은 문서 형식 정의(DTD, Document Type Definition)입니다. HTML 태그는 아닙니다.
WHY
문서 형식 정의는 SGML(Standard Generalized Markup Language) 계열의 마크업 언어에서 문서 형식을 정의하는 것입니다.
웹 페이지는 초기에 넷스케이프 내비게이터(Netscape Navigator)용과 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)용으로 두 가지 버전이 있었습니다. 이후 W3C가 웹 표준을 제정했으나 이는 기존 페이지들과 달라 표준을 기반으로 만든 페이지는 브라우저에서 제대로 그릴 수 없었습니다. 예전 방식으로 제작한 페이지와 표준을 기반으로 제작한 페이지를 모두 잘 그리기 위해 브라우저는 렌더링 모드를 제공했습니다.
호환 모드(quirks mode)[참고]는 예전 방식으로 제작한 페이지를 위한 모드이고, 완전 표준 모드(full standards mode, 표준 모드)는 표준을 기반으로 제작한 페이지를 위한 모드입니다. 거의 표준 모드(almost standards mode)는 일부[참고]는 예전 방식, 나머지는 표준을 기반으로 제작한 페이지를 위한 모드입니다.
브라우저는 문서 형식 정의를 통해 문서가 어떤 마크업 언어, 어떤 버전으로 작성되었는지 확인하고 렌더링 모드를 결정할 수 있습니다.
간단히 말하면, 언어 별, 버전 별로 지원하는 태그가 다르거나 같은 태그여도 다르게 쓰일 수 있는데요. 이 때, 작성한 문서 형식을 브라우저에 미리 고지하여 브라우저가 바르게 표시할 수 있게 하는 것입니다.
HTML 5에서는 표준 모드 활성화와 하위 버전 호환을 위해 정의합니다.
WHERE
태그를 정의하기 전에 가장 먼저 선언합니다. 대소문자 구분 없이 사용 가능합니다.
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>HOW
적용 방법은 버전 별로 상이합니다. 지금은 HTML 5의 적용 방법만 알아도 될 것 같습니다.
// HTML 5
<!DOCTYPE html>
// HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
// HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
// HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
// XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
// XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
// XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">참고자료
'Web 개발 > HTML,CSS' 카테고리의 다른 글
| TIL | Sass - mixins vs @extend(inheritance) (0) | 2021.08.23 |
|---|---|
| PostCSS vs Scss ? (0) | 2021.06.23 |
| HTML Semantics (0) | 2021.06.16 |
| HTML | 기본 구조, meta tag, script tag (0) | 2021.06.07 |
- javascript event
- file opener preference
- 페이지 특정 위치 link
- 인가
- 자바스크립트
- createAction
- node mkdir -p
- fs-extra
- mkdirp
- 프로그래머스
- node file package
- ECONNRESET
- ELIFECYCLE
- make-dir
- jest
- 인증
- sass
- errno 253
- rimraf
- external editor
- 스터디
- JavaScript
- Storybook Error
- 웹팩 에러
- node fs
- node cp -r
- ModuleParseError: Module parse failed: Unexpected token
- node rm -rf
- Webpack Error
- 스토리북 에러