현재 HTML 작성할 때 기본적인 구조는 다음과 같습니다.
<!DOCTYPE html> <<<--- 이것은 무엇일까요~?
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TITLE</title>
</head>
<body>
</body>
</html>앞으로 이 기본적인 부분에 대해서 차근차근 살펴볼 예정입니다.
우선 첫 번째 줄에 보이는 <!DOCTYPE html> 에 대해 살펴봅시다!
<!DOCTYPE html> 이란
사실 이거 안써도 html 작성하는데 아무 문제 없는 것 같은데 왜 쓰는가 싶으시죠? 저도 그랬습니다.
우선 이것이 의미하는 것은 "이 문서는 HTML5 이상의 문서입니다" 라는 의미입니다.
<!doctype html>, <!DOCTYPE html> 대소문자 가리지 않고 작동합니다.
그럼 도대체 왜 쓸까요? 이것을 알기 위해서 부가적인 설명이 필요하므로 아래에서 차근차근 설명하겠습니다.
브라우저 호환모드, 표준모드
과거에는 웹 페이지가 넷스케이프 네비게이터와 인터넷 익스플로러용으로 두가지 버전이 만들어졌습니다. (다음에 브라우저의 역사에 대해서도 설명해야겠네요..)
W3C에서 웹 표준을 제정할 당시, 기존 브라우저들은 새롭게 만들어진 표준을 기반으로 웹사이트를 제대로 표현할 수는 없었습니다.
그래서 브라우저들은 새로운 표준으로 제작된 사이트 + 예전 방식으로 제작된 사이트를 렌더링 하기 위한 2가지 모드를 제공했습니다.
웹 브라우저 레이아웃 엔진으로 호환 모드(quirks mode), 거의 표준 모드(almost standards mode), 표준 모드(standards mode)의 3가지 방식이 존재합니다.
호환 모드는 기존 방식으로 제작된 웹사이트 표현을 위한 것.
표존 모드는 말 그대로 표준을 기반으로 웹사이트 표현을 위한 것
거의 표준 모드는 소수의 호환 모드 요소만 지원.
웹 브라우저는 HTML 페이지를 호환 모드, 표준 모드 무엇으로 렌더링 해야할 지 어떻게 결정할까?
브라우저는 문서의 첫 부분에 기술된 DOCTYPE을 참조합니다. 이것은 문서 타입 정의라고 하는데 이에 대한 자세한 설명은 아래에 따로 하겠습니다. 자 그러면 웹 페이지를 표준 모드로 렌더링 하려고 한다면 페이지 첫 부분에 DOCTYPE을 기술해야겠죠?
<!DOCTYPE html> 말고 다른 방식으로 문서 타입을 정의할 수 있는데, 지금 현존하는 브라우저는 이 DOCTYPE을 표준모드로 렌더링 할 것입니다. 이 간단한 것만 써도 다 표준모드로 동작한다는 말입니다.
다른 DOCTYPE을 사용하면 페이지가 호환 모드 또는 거의 표준 모드로 렌더링 될 수 있습니다.
또한 W3C에서도 문서의 타입을 정의하는 것이 굉장히 중요하다고 합니다. 왜냐하면 다른 브라우저에서 동일한 방식으로 구문이 분석되기 때문이라고 합니다.
문서를 열자마자 브라우저가 이 문서를 어느 방식으로 해석해야 할 지 알려주기 위해 문서의 맨 앞에 작성하는 것이 올바릅니다.
그러니까 꼭 문서의 맨 앞에 작성해주세요.
문서 타입 정의 (DTD)
HTML은 Hypher Text Markup Language로 HTML로 만들어진 문서는 마크업 문서입니다.
마크업 문서는 시작할 때 문서 타입을 정의를 합니다(Document Type Definition). 이렇게 정의를 해서 문서에 사용되는 마크업을 파서(parser)가 파악할 수 있게 해야합니다.
W3C 문법 검사기와 같은 것도 이 정의된 문서 타입을 기준으로 태그 및 속성이 정확한지 검사합니다.
W3C에서도 이와 같은 문서 타입 정의를 권장을 하고 있습니다.
자 그러면 현재까지는 <!DOCTYPE html> 로 HTML5라는 명시만 했었는데 다른 버전은 어떻게 명시하는 지 볼까요?
다양한 문서 타입 정의
<!-- HTML5 이상 DTD-->
<!DOCTYPE HTML>
<!-- HTML 4.01 DTD-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML 3.2 DTD -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!-- HTML 2.0 DTD-->
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<!-- XHTML 1.0 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- SVG 1.0 DTD -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">이렇게 다양한 문서 타입 정의가 있는데,
이전 버전의 HTML version을 정의하는 일은 없을 것 같고, 저희는 앞으로 HTML5라는 것을 명시하는 <!DOCTYPE html>을 사용하게 될 것입니다.
HTML5에서 변화한 점
HTML5라고 문서를 명시했으니 과연 버전 업이 되면서 어떤 것들이 생겨났을까요?
- 플러그인 도움 없이 비디오 오디오 기능 자체 지원
- SVG, 캔버스 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽 지원
- 서버와의 소켓 통신 지원으로 양방향 통신 가능
- 카메라, 동작센서등의 하드웨어 기능 직접 제어 가능!
- 오프라인과 저장소 지원, 오프라인 상태에서도 애플리케이션 동작이 가능하다는 뜻!
- 시멘틱 태그 도입해서 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명 가능!
- CSS3 완벽 지원 (여기에서 말하는 CSS3는 module version3를 모아놓은 것)
엄청난 기능들이 추가가 되었습니다. 나중에 하나하나씩 자세히 살펴보도록 하죠!
오늘도 고생하셨습니다. 틀린 지식이 있다면 말씀해주시면고치겠습니다.
참고 자료
- MDN (https://developer.mozilla.org/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)
- W3C (https://www.w3.org/TR/2011/WD-html5-author-20110809/introduction.html#introduction)
- 포이마웹 (https://poiemaweb.com/html5-syntax)
'초보가 왕초보에게 알려주는 웹 프론트엔드' 카테고리의 다른 글
| 프론트엔드 개발자는 어떤 일을 할까? (초보가 왕초보에게 알려주는 프론트엔드) (0) | 2022.11.06 |
|---|---|
| 초보가 왕초보에게 알려주는 웹 프론트엔드개발 시작! (0) | 2022.11.06 |
