티스토리 뷰
1.3 HTML5의 구조(structure)
개인적으로 HTML 문서의 구조를 이해하는 가장 쉬운 방법은 먼저 HTML을 이용하여 만들어진 결과물을 통해 역으로 접근해보는 것이 이론적인 설명보다 빠르다고 생각합니다.
먼저 현재 HTML4.01 버전으로 잘 짜여진 웹 페이지를 보기 위해서 여러분들이 좋아하는 다음, 네이버, 네이트 등의 사이트를 IE, Firefox, Chrome 같은 웹 브라우저로 열어보는 것으로 시작하는데 여기서는 IE를 이용하여 다음(Daum) 사이트에 접속하여 설명합니다.
위 화면엣 F12키를 누르면 아래와 같은 개발자도구가 나타납니다.
주요 부분 코드를 나타내면 다음과 같습니다.
다른 사이트를 보다보면 아직까지
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
로 시작하는 사이트가 있을것입니다.
이것은 XHTML1.0 표준을 따라서 작성 되었다는 것을 명시하며 문서를 작성하는데 데이터 형식을 정의하는 기준으로
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”를 따랐다는 것을 명시합니다.
위의 이미지에서 보듯
<!DOCTYPE html>
HTML5는 위와 같이 간단하게 나타내어 웹 브라우저로 하여금 해당 웹 문서가 HTML5 형식에 따라 처리하도록 알립니다.
이제 HTML5 문서의 전체적인 구조를 나타내면 다음과 같습니다.
위에서 <head> … </head> 블록 내에 위치하는 메타 데이터(metadata)들은 <body>…</body> 블록 내에서 사용된 HTML5 요소들에 대한 스타일(디자인 관련)이나 동작에 관련된 처리 즉, 마우스로 클릭하거나 웹 페이지가 로드될 때와 같이 이벤트가 발생하면 처리해줘야 할 코드들을 작성하거나 관련 스크립트 파일을 링크하는 코드를 작성하는 부분으로 이에 대한 구체적인 사용 방법은 메타데이터 요소(metadata Element) 부분에 설명합니다.
다음으로 <body> …</body> 블록 내에는 물론 메타 데이터 요소들 중 script 요소도 올 수 있지만 일반적으로 IE9, Firefox 같은 웹 브라우저를 통해 나타나야 할 텍스트, 이미지, 동영상, 표, 리스트 같은 데이터들을 나타내는데 p, table, img, audio, video 같은 HTML5 요소들을 이용하며 이에 대해서는 메타데이터 요소(metadata Element)를 설명한 후 그 뒤를 이어서 설명합니다.
'HTML5-CSS' 카테고리의 다른 글
| 1.3.2 HTML5에서 요소의 속성(Attribute) 작성 방법 (0) | 2016.04.28 |
|---|---|
| 1.3.1 HTML5의 요소(Element) 작성 방법 (0) | 2016.04.28 |
| 1.2 웹 브라우저(Browser)의 기능과 한계 (0) | 2016.04.19 |
| HTML5 구조/기본지식 알아보기 (0) | 2016.04.01 |
| HTML5 란? (0) | 2016.03.30 |
