*.html 파일에서 느낌표(!)를 누르면 html 코드가 자동완성된다. 그 중에서 맨 상단에 위치한 DOCTYPE의 의미는 무엇인지 알아보자.
<!DOCTYPE html> 의 의미
지금껏 당연하다고 생각만 하고 별도로 공부할 생각을 못했던 DOCTYPE 선언은 HTML 문서가 어떤 버전으로 작성되었는지 브라우저에게 알려주는 것이다. 브라우저에게 HTML 의 버전 및 웹브라우저 내용을 잘 출력할 수 있도록 도와주는 역할을 하는 것이다. 이렇게 선언하는 이유는 호환성을 높이기 위함이다. 사용 용도와 발전된 기간에 따라 버전이 달라진 것이다.
선언하는 이유
자바스크립트로 그러하듯이 HTML 또한 버전마다 적용되는 태그와 적용되지 않는 태그가 있다. 구버전에서 신버전의 HTML 태그를 사용한다면, 웹브라우저에서 문법오류로 간주할 것이다. 선언을 통해 구버전과 신버전에 알맞게 문법을 검사하는 것이다.
또한 HTML 버전별로 DOCTYPE 을 쓰는 방법이 다르다.
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">
기억해야할 것은 DOCTYPE 은 html 파일의 최상단에 위치해야한다는 것!
참고
https://singihae.gitbooks.io/front-end-developer-guide-book/content/chapter01.html
'Front-End > Etc' 카테고리의 다른 글
| (프론트엔드의 첫걸음) npm (node Package Manager) 란? (0) | 2021.10.01 |
|---|---|
| (프론트엔드의 첫걸음) 바벨(Babel) 이란? (0) | 2021.10.01 |
| (프론트 엔드의 첫걸음) 브라우저 저장소에 대해 알아보자 (0) | 2021.09.30 |
| (프론트 엔드의 첫걸음) 3. 브라우저 동작 원리 (0) | 2021.02.16 |
| (프론트 엔드의 첫걸음) 2. HTTP 란 무엇인가? (0) | 2021.02.15 |
최근댓글