[http://mnworld.co.kr 의 shakej 가 직접 쓴 글입니다.]
[구글 개발자가 들려주는 HTML5 활용 을 공부하고 쓴 글입니다.]
문서타입
소스 코드 맨 위부터 알아볼까요?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
헤드 윗부분에 이런 코드가 자주 오시는 걸 보실 수 있을거에요^^;
이 태그는 마법처럼 긴 역사를 가진 문서타입입니다. 마이크로소프트는 맥용 인터넷 익스플로러 5를 개발하면서 심각한 문제를 하나 발견했는데, 표준을 만들어놓으니 예전 페이지가 제대로 표시 되지 않는 다는 심각한 문제점이 발견되었습니다.
사용자들은 깨진 페이지도 렌더링 되기를 원했고, 당시 대부분의 저작자가 넷스케이프4나 익스플로러4 같은 브라우저에 맞추어 놓았기에 웹페이지가 깨져보인 것입니다.
마이크로소프트는 한가지 기발한 생각을 했는데, 대부분의 HTML 소스에서 'doctype'은 제일 위에 문서타입을 체크했습니다. 이전 방식은 문서타입이 없었기 때문에, 맥북 IE5는 옛날 방식의 페이지 경우 옛날방식으로 렌더링 할 수 있게 되었습니다. (당연히 안깨어졌겠지요^^;)
이야기가 샜는데, 다시 돌아와서,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
는 '표준모드' 중 문서타입 15가지 중 하나입니다. HTML5는 위의 문서타입 형식과는 다른 코드를 사용하는데,
<!DOCTYPE html>
을 사용합니다! 굉장히 짧고 쉽죠?^^+
그리고 모든 브라우져에서 '표준모드'로 렌더링됩니다.
루트 엘리먼트
흠.. 굉장히 어려운 용어들이 계속 난무하는 가운데, 되도록 쉽게 설명드리고 표현하려니 어렵네요.
엘리먼트가 뭘까요!? 엘리먼트를 먼저 알아야 하는데, 엘리먼트는
HTML 요소란 HTML 문서에서 사용되는 태그를 의미한다. 이 태그는 문서의 제목을 의미하는 태그와, 문서의 시작과 끝을 알리는 태그와, 서식 태그 등이 있다.
출처: HTML 요소 위키백과쉽게 말해서 <img> 등과 같은 태그들을 각 요소, 즉 엘리먼트라고 합니다.
루트 엘리먼트, 루트의 뜻은 "최상위"라는 뜻이지요?^^
"최상위 요소" 루트엘리먼트는 제일 위쪽에 있는 모든 엘리먼트의 아버지가 되는 것을 이야기 합니다.
HTML 페이지의 루트 엘리먼트는 <HTML> 이 되겠지요.
기존 HTML4 의 <html> 태그의 속성은
<html xmls="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
인데 HTML 5 는 <html lang="en" xml:lang="en">
으로 간단하게 표현이 됩니다. lang = "영어" 라는 언어를 사용한다라는 것을 두개의 속성으로 나타낼까요!?
이건 xhtml 의 잔재로 보시면 됩니다.
따라서 정확히는 HTML 5는 간.단.하.게 <html lang="en"> 으로 간단하게 표현이 됩니다.
<head>엘리먼트
루트엘리먼트의 가장 첫번째 장남은 <head>엘리먼트입니다. (말그대로 순서대로 보시면되요^^)
<body>가 밖으로 보여지는 사람의 외모라면 <head>는 뇌입니다. 밖에선 보이지 않죠. 그 사람을 이해할 때 성격, 뇌, 그사람이 어떠한지 판단할 때 사용되는 게 <head>부분입니다. HTML 도 이와같습니다.
페이지 자체의 메타데이터를 가지는 부분입니다.
HTML 헤더에는 문자인코딩 부분이 들어갑니다. 사람들이 사용하는 문자들을 어떠식으로 인코딩해서 보여줄 지 적어주는 부분인데요.
브라우저는 서버가 보낸 데이터의 문자인코딩을 판단을 해야 합니다.
Content-Type : text/html; charse="utf-8"
이라는 헤더를 많이들 보셨을 거에요. 헤더를 분석해보자면 웹서버가 HTML 전송할 때 UTF-8 문자인코딩을 사용할 거라고 알려주게 됩니다. 보통 웹상에서 글을 쓰는 저작자가 (필자가) http 서버를 제어할 수 있는 경우는 드뭅니다. 예를 들어 제가 이곳에 정보와 컨텐츠를 쓰고 있지만, 서버는 티스토리 다음에서 제공을 해주기에, 저는 http 서버(웹서버)를 제어할 수가 없습니다.
상황이 이렇기에 HTML4 는 HTML 문서 자체에 문자 인코딩을 정의하는 방법을 제공합니다. 제가 만약 html 페이지를 만든다면 (서버를 건드릴 수 없다는 조건아래에서)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
로 적어서 웹서버와는 무관하게 제가 만든 HTML 페이지에 접속하는 분들께 제 페이지는 UTF-8 문자인코딩을 사용한다고 표현할 수 있습니다.
조금 쉬어진 HTML 5 에선 다음과 같습니다.
<meta charset="utf-8"/> 로 간단하게 쓸 수 있겠네요.
특수한 문자나 언어를 사용하진 않아도 문자인코딩은 선언해야 해요. 왜냐하면!!!
안적으면 보안상의 위험이 있다고 하네요^^;
현재까진 HTML4의 기존 엘리먼트와 HTML 5는 얼마나 간단하게 표현이 간단한지 설명을 드렸습니다.
숙제: 문자인코딩의 개념에 대해서 인터넷상에 나와있는 걸 읽고 이해한 뒤 쉽게 설명해보세요!
'옛글 > 프론트 이야기' 카테고리의 다른 글
| 혁명적인 jquery mobile web, HTML5와 jquery로 모바일 어플 만들기 (1) | 2011.03.18 |
|---|---|
| [쉬운제로보드]간단한 자기홈페이지 만들기 (0) | 2011.01.19 |
| [HTML5이야기] Video & Audio 태그 집중 분석 (4) | 2011.01.03 |
| [HTML5이야기] HTML5 지원여부 감지 (0) | 2011.01.03 |
| [쉬운HTML] 두번째 시간 - 티스토리 블로그 HTML/CSS를 파헤쳐보자 (3) | 2011.01.03 |
![[쉬운제로보드]간단한 자기홈페이지 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F207C91474D367A1E32)
![[HTML5이야기] Video & Audio 태그 집중 분석](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F1149EB584D217EC111)