★Semantic Elements
- HTML5는 시맨틱 태그가 사용되어 어느 부분이 헤더이고 어느 부분이 실제 내용인지 쉽게 알 수 있도록 했다.
|
태그 |
설명 |
|
<header> |
제목 지정 |
|
<nav> |
문서를 연결하는 네비게이션 링크 |
|
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> |
제목 표시(숫자가 클 수록 글씨 크기 작음) |
|
<iframe> |
외부 문서 삽입 |
|
<section> |
콘텐츠 영역 나타내기 |
|
<article> |
<section>태그 내에 실제 콘텐츠 내용 넣기 |
|
<aside> |
본문 이외 내용 표시 |
|
<footer> |
제작 정보와 저작권 정보 표시 |
|
<adress> |
<footer>태그 내에 사이트 제작자 정보, 연락처 정보 표시 |
- HTML4에서 사용되던 <div>태그는 css를 적용할 때 사용한다.
▲ HTML5의 시맨틱 태그로 짜여진 웹 페이지 구조 예
★텍스트를 묶어서 처리하는 태그
<p>태그 - 단락만들기
기본형 : <p>...</p>
- 하나의 텍스트 단락을 만들어 준다.>>css 적용 시 편리
- 앞 뒤로 줄바꿈이 일어난다.
- <br>태그로도 줄바꿈을 할 수 있지만 텍스트 단락으로 인식이 되지 않는다.
<blockquote>태그 - 인용문 넣기
기본형 : <blockquote 속성="속성값">...</blockquote>
- 다른 사이트에서 인용할 경우 사용
- 사이트 주소가 명확할 경우 cite 속성을 이용해 인용 사이트 주소 표시
<pre>태그 - 입력하는 그대로 화면에 표시하기
기본형 : <pre>...</pre>
- HTML에서는 하나의 공백만 표시해주므로 <pre>태그를 사용해 한 번에 많은 공백을 브라우저에 표시해준다.
- 주로 프로그램 소스를 표시할 때 사용
※실습하기※
<html> <!--시작을 알려줌-->
<head> <!--브라우저에게 정보를 줌-->
<meta charset="utf-8"> <!--인코딩 방식-->
<title>대한민국</title> <!--웹 페이지 제목-->
<style> <!--css설정-->
h3 {color : red;} <!--<h3>태그 스타일-->
p {color : blue;} <!--<p>태그 스타일-->
blockquote {border : 1px solid magenta; <!--<blockquote>태그 스타일-->
border-left : 10px solid magenta;
margin-left : 0px;}
</style>
</head>
<body> <!--문서의 몸통-->
<h3>대한민국</h3>
<p>언어 : 한국어</p>
<p>면적 : 99,720㎢</p>
<p>애국가</p>
<p>동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라만세<br>
무궁화 삼천리 화려강산<br>
대한사람 대한으로 우리나라만세</p>
<blockqoute cite="http://terms.naver.com/entry.nhn?docId=1081705&cid=40942&categoryId=33748">
한국(韓國) 또는 남한(South Korea)이라고도 부르고, 북한에서는 남조선(南朝鮮)이라고 부른다. 남북으로 길게 뻗은 반도와 3,200여 개의 섬으로 이루어져 있다. 북쪽은 압록강과 두만강을 건너 중국의 만주와 러시아의 연해주에 접하고, 동쪽과 남쪽은 동해와 남해를 건너 일본에 면하며, 서쪽은 서해를 사이에 두고 중국 본토에 면한다. 중국, 일본 등과 함께 동아시아에 속한다. 행정구역은 1개 특별시, 1개의 특별자치시, 6개의 광역시, 1개의 특별자치도, 8개 도로 이루어져 있다. 분단국가로, 6.25전쟁 후인 1953년 휴전협정 체결 후 북한과 휴전 상태가 계속되고 있다.
</blockquote>
</body>
</html>
▲ 결과
'Programming > HTML5' 카테고리의 다른 글
| [6장]HTML5 태그(3) (2) | 2015.01.27 |
|---|---|
| [5장]File Zilla 사용법 (0) | 2015.01.24 |
| [4장]HTML5 태그(2) (0) | 2015.01.24 |
| [2장]실습 준비 (4) | 2015.01.11 |
| [1장]웹, HTML 시작하기 (4) | 2015.01.11 |