HTML5 기초 작성
- 문서의 맨 앞에 <!DOCTYPE html>을 입력해야 한다. 이 코드는 식별자 identifier로, 웹 브라우저에게 '이 문서는 HTML5이니까 HTML5 문서로 해석해라'라고 알려준다. 그러면 웹 브라우저는 콘텐츠를 HTML5 모드로 화면에 표시한다.
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
- 해당 문서에 사용될 주요 언어 표시는 <html> 태그안에 한다. 속성은 lang이며 값은 나라마다 다르다.
[참고] 언어 코드 참고 사이트(http://www.loc.gov/standards/iso639-2/php/code_list.php)
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body></body>
</html>
meta 요소
- 웹 브라우저에게 문서 정보(문서 작성자, 문서 형식, 문서 인코딩 방식 등)을 알려주는 역할을 한다.
- 시작 요소만 있고 맺음 요소가 없다. 따라서 meta요소는 속성(Attribute)과 속성 값(value) 정보를 담고 있을 뿐 내용을 감싸지는 않는다. 이러한 요소를 '내용을 가지고 있지 않은 요소(Empty Element)'라고 부른다.
[참고] 그 외의 Empty Element들 : img, area, br, hr, input 등이 있다.
[참고] meta요소 자세히 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body></body>
</html>
본문 요소 작성하기 : 목록
- 목록은 웹 디자인을 할 때 자주 사용하는 요소로, 목록 순서가 의미가 있을 때 사용하는 '순차 목록'과 의미가 없을 때 사용하는 '비순차 목록'이 있다.
- 비순차 목록(Unordered List)을 작성할 때는 <ul>요소를 사용하고, 각 목록 아이템(List Item)은 <li>요소에 담는다.
- 비순차 목록은 블릿(bullet) 또는 디스크(disc) 스타일로 구조화되는 것을 알 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
- 순차 목록(Ordered List)은 <ol>요소를 사용하고, 각 목록 아이템은 <li>요소에 담는다.
- 목록 아이템이 1,2,3,4 형식으로 표시되는 것을 알 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</body>
</html>
HTML5 아웃라인과 Section 요소
- HTML5와 기존의 HTML 4.01이나 XHTML 1.0과는 구조가 자동으로 생겨난다는 점이 다르다. 이는 눈에 보이지 않기 때문에 '암묵적인 구조 생성'이라고 한다. 이것은 HTML5에 도입된 아웃라인 개념 때문에 나타나는 현상이다.
- https://gsnedders.html5.org/outliner/에 접속하여 코드를 넣으면 구조를 눈으로 확인 할 수 있다.
| html └head └meta └title └body └h1 └p └h2 └ul └li └li ▲ HTML 4.01과 XHTML 1.0의 문서 트리 구조 |
- head와 body는 각자의 영역을 가지고 자식과 자손을 포함하는 관계도(Model)을 만든다. 이러한 관계도를 문서 객체 모델(Document Object Model, DOM)이라고 부른다.
- 하지만 HTML5에서는 <h1>, <h2>, <ul> 요소를 형제 요소로 보지 않는다. HTML5에는 기존 HTML문서와 달리 구조를 나누는 의미의 '섹션 요소'가 추가 되었다. 추가된 섹션 요소는 section, article, nav, aside이다.
| 섹션 요소 | 쓰임새 |
| section | 다용도로 쓸 수 있는 섹션 요소 |
| article | 독립적인 문서를 나타낼 때 쓴다. 블로그 포스트, 기사글, 위젯 등에 사용 |
| nav | 내비게이션을 나타낼 때 사용 |
| aside | 문서의 주요 내용(본문)과 분리되는 보조 내용(광고, 즐겨찾기 등)을 나타낼 때 사용 |
- 각 섹션은 내부에 제목을 하나만 가질 수 있다. 섹션 내부에 제목이 2개 이상 있을 경우, 암묵적으로(눈에 보이지 않게) 해당 섹션이 나누어지거나 내부에 하위 섹션을 만든다.(제목의 레벨에 따라 섹션이 나누어지고 하위 섹션이 만들어진다.)
'예전 포스팅 모음' 카테고리의 다른 글
| Ajax, xml, parser, json(JavaScript Object Notation), MVC pattern (0) | 2014.12.18 |
|---|---|
| multipart/form-data 파일 업로드 (0) | 2014.12.06 |
| JSTL(JSP Standard Tag Library) (0) | 2014.12.03 |
| 3. 웹 호스트 환경 만들기 (0) | 2014.12.03 |
| 2. 웹 클라이언트 테스트 환경 만들기 (0) | 2014.12.03 |