1.3 HTML5의 구조(structure)
개인적으로 HTML 문서의 구조를 이해하는 가장 쉬운 방법은 먼저 HTML을
이용하여 만들어진 결과물을 통해 역으로 접근해보는 것이 이론적인 설명보다 빠르다고 생각합니다.
먼저 현재 HTML4.01 버전으로 잘 짜여진 웹 페이지를 보기 위해서 여러분들이 좋아하는
다음, 네이버, 네이트 등의 사이트를 IE, Firefox, Chrome 같은 웹 브라우저로 열어보는 것으로 시작하는데 여기서는 IE9를 이용하여 다음(Daum) 사이트에 접속하여 설명합니다.
위 화면의 여백에
마우스를 위치시키고 오른쪽 마우스 버튼을 클릭하면 나타나는 팝업 메뉴에서 밑에서 4 번째 정도에 나타나는
“소스 보기(V)” 부분을 클릭하고 주요 부분 코드를 나타내면
다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head><meta … />
<title>Daum - 생활이 바뀐다! Life On Daum</title>
<link … />
<style type=”text/css”>
…
</style>
<script type=”text/javascript”>
…
</script>
</head>
<body>
<div … >
…
</body>
</html>
위에서 “<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">” 부분은 웹 문서가 XHTML 1.0 표준을 따라서 작성되었다는 것을 명시하며 문서를 작성함에 있어서 사용 가능한 데이터 형식을 정의하는 기준으로 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”를 따랐다는 것을 명시합니다.
다음으로 HTML5로 만들어진 웹사이트를 한 곳 보도록 합니다. 애플 사이트를
한 번 볼까요?
IE9를 실행하여 “http://www.apple.com/” 사이트를 열면 레티나(Retina) 화면이 적용된 맥북 프로에 대한 화면이 나타납니다.
같은 방법으로
위 화면의 여백에 마우스를 위치시키고 오른쪽 마우스 버튼을 클릭하여 “소스 보기(V)” 부분을 클릭하고 주요 부분 코드를 나타내면 다음과 같습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Apple</title>
<meta … />
<link … />
…
<script src= …></script>
…
<body>
<script type=”text/javascript”> … </script>
<nav> …</nav>
…
</body>
</html>
다음(Daum) 사이트와 애플(Apple)사의 웹 사이트가 HTML의 어떤 버전으로 구축되었는지 확인하는 방법은 의외로 간단합니다. 다음과 같은 최상단에 있는 코드에 의해서 알 수 있습니다.
위와 같이 HTML5 이전의 HTML 문서는 위에서 보는 것처럼 전문적인 프로그래머
조차도 실제 코드를 작성할 때 “Ctrl+C”, “Ctrl+V” 할 정도로 상당히 복잡한 내용으로 해당
문서가 HTML 4.01 버전임을 명시하는 반면에 HTML5는
위와 같이 간단하게 나타내어 웹 브라우저로 하여금 해당 웹 문서가 HTML5 형식에 따라 처리하도록
알립니다.
이제 HTML5 문서의 전체적인 구조를 나타내면 다음과 같습니다.
위에서 <head> … </head> 블록 내에 위치하는 메타 데이터(metadata)들은 <body>…</body> 블록 내에서 사용된 HTML5 요소들에
대한 스타일(디자인 관련)이나 동작에 관련된 처리 즉, 마우스로 클릭하거나 웹 페이지가 로드될 때와 같이 이벤트가 발생하면 처리해줘야 할 코드들을 작성하거나 관련
스크립트 파일을 링크하는 코드를 작성하는 부분으로 이에 대한 구체적인 사용 방법은 메타데이터 요소(metadata
Element) 부분에 설명합니다.
다음으로 <body> …</body> 블록 내에는 물론 메타 데이터
요소들 중 script 요소도 올 수 있지만 일반적으로 IE9,
Firefox 같은 웹 브라우저를 통해 나타나야 할 텍스트, 이미지, 동영상, 표, 리스트
같은 데이터들을 나타내는데 p, table, img, audio, video 같은 HTML5 요소들을 이용하며 이에 대해서는 메타데이터 요소(metadata Element)를
설명한 후 그 뒤를 이어서 설명합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
그 처음 시작 부분이며
전체 내용은 http://fromyou.tistory.com/581 에 있습니다.
본 저작물에 대한 모든 권리는 본인(원철연)에서
있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.3.2 HTML5에서 요소의 속성(Attribute) 작성 방법 (6) | 2013.07.31 |
|---|---|
| 1.3.1 HTML5의 요소(Element) 작성 방법 (3) | 2013.07.31 |
| 1.2 웹 브라우저(Browser)의 기능과 한계 (3) | 2013.07.31 |
| 1. HTML5의 구조 및 기본 지식 익히기 (5) | 2013.07.31 |
| HTML5 등장 배경 및 표준화 현황 (3) | 2013.07.31 |
