Semantic Tag란?
사람이 이해하기 쉽도록 html문서 구조를 쉽게 파악할 수 있는 태그
Semantic Tag를 사용하면 보다 직관적으로 웹사이트 구성 가능
<header> 사이트의 머리부분에 사용
<main> 메인 콘텐츠를 나타내는데 사용
<section>제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소
<article> 개별 콘텐츠를 나타내는 요소
<aside>좌우측의 사이드 영역
<footer> 사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분
<hgroup> 제목과 부제목을 묶어서 나타내는 요소
<nav> 웹 페이지 메뉴를 만들 때 사용
Semantic Tag 사용예제1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>시맨틱 태그의 사용</title>
<style>
html,
body {
height: 100%;
}
header {
background-color: yellow;
}
nav {
float: left;
width: 30%;
height: 70%;
background: green;
}
section {
float: left;
width: 70%;
height: 70%;
background-color: olive;
}
footer {
background-color: rgb(125, 125, 194);
}
</style>
</head>
<body>
<header>This is a Header.</header>
<nav>This is a Navigation Bar.</nav>
<section>This is a Section.</section>
<footer>This is a Footer.</footer>
</body>
</html>아래와 같이 header, nav, section, footer부분으로 나뉘어진다.
Semantic Tag 사용예제2
1.HTML 에 Semantic Tag 사용하여 구조화
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시맨틱태그</title>
<link rel="stylesheet" href="semanticstyle.css">
</head>
<body>
<header>
<h1>BookStore</h1>
</header>
<nav>
<a href="">단행본</a>
<a href="">간행물</a>
<a href="">보고서</a>
<a href="">기타</a>
</nav>
<article>
도서안내 <br>
<section>
베스트 셀러 <br>
<ul>
<li>김미경의 마흔 수업</li>
<li>장하준의 경제학 레시피</li>
<li>살 때 팔 때 벌 때</li>
<li>거인의 노트</li>
</ul>
</section>
<section>
<h1>추천도서</h1>
<ul>
<li> 반지의 제왕 일러스트 특별판 </li>
<li> 사랑할 수 없는 두사람 </li>
<li> 더 크래시 </li>
<li> 이런 공부법 처음이야 </li>
</ul>
</section>
</article>
<aside>
이벤트
<p> 주목도서</p>
<p>작가와의 만남</p>
</aside>
<footer>
000(주)
사업자등록번호00000000
</footer>
</body>
</html>CSS파일로 디자인
header {
background-color: #82828248;
margin: 1px;
text-align: center;
}
nav {
border: 4px solid gray;
width: 12%;
float: left;
margin-left: 10px;
padding: 0px 10px;
}
nav a {
display: block;
margin-left: 5px;
margin-bottom: 5px;
padding: 1px;
text-decoration: none;
font-weight: bold;
}
article {
border: 4px solid gray;
width: 65%;
margin: 3px;
margin-left: 17%;
padding: 10px;
}
section {
background-color: #d2d2d2;
margin: 3px;
margin-bottom: 10px;
padding: 10px;
height: 20vh;
text-align: center;
}
section ul {
display: table;
margin: 0 auto;
}
/* ul 가운데 정렬 */
aside {
position: absolute;
border: 4px solid gray;
width: 10%;
top: 9vh;
right: 20px;
text-align: center;
min-width: 120px;
}
aside p {
display: inline-block;
border: 3px solid gray;
background-color: #d2d2d280;
width: 50%;
padding: 20px;
font-weight: bold;
min-width: 75px;
}
footer {
border-top: 4px solid gray;
margin-top: 30px;
padding: 10px;
text-align: center;
}- 실행결과
예제와 같이 구역별로 구조화 된 모습을 확인할 수 있다.
Semantic Tag 사용예제3
Semantic Tag 구조화 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시맨틱 태그 구조화 연습</title>
</head>
<body>
<header>
<h1>볼프강 아마데우스 모차르트</h1>
1756년 1월 27일 잘츠부르크에서 태어난 천재적인 오스트리아의 작곡가 모차르트(1756년 1월 27일~1791년 12월 5일)를 소개한다.
</header>
<nav>
<h3>목차</h3>
<ul>
<li> <a href=""> 생애 </a></li>
<li> <a href=""> 죽음 </a></li>
<li> <a href=""> 음악 </a></li>
</ul>
</nav>
<section>
<article>
<h3> 생애 </h3>
모차르트는 1756년 1월 27일 잘츠부르크에서 태어나서, 궁정음악가였던 아버지에게 피아노와 바이올린을 배웠고, <br> 다섯살 때 이미 작곡을 하기 시작하였으며, 1764년에서 1765년
사이에 바흐로부터 처음으로 교향곡을 작곡하는 법을 배웠는데 <br> 이것이 모차르트가 수많은 교향곡을 남기는 계기가 되었다. <br> 모차르트는 빈에서 1784년에 14세인 베토벤을 만나
베토벤을 교육시키는데 전념하기도 했다.
</article>
<article>
<h3> 죽음 </h3>
모차르트는 1791년 12월 5일 오전 0시 55분경에 갑자기 병으로 죽었으며 모차르트가 완성하지 못한 작품 레퀴엠은 프란츠 크사버 쥐스마이어(Franz Xaver Sussmayr)가
완성시켰다.
</article>
<article>
<h3> 음악 </h3>
오페라, 교향곡, 행진곡, 관현악용 무곡, 피아노 협주곡, 바이올린 협주곡, 교회용 성악곡, 칸타타, 미사곡 등 다양한 장르를 아우르며 600여곡을 작곡하여 후대에 남겼다.
</article>
</section>
<aside>
<h4>모차르트의 죽음에 얽힌 전설</h4>
모차르트의 장례식 날 비가 오고 천둥이 쳤다고 하나 New Groove에 따르면 사실은 구름 한 점 없는 쾌청한 날이였다고 한다.
</aside>
<footer>
2017년 10월 7일 작성, 위키피디아 참고
</footer>
</body>
</html>
