특별한 기능을 하는 것은 아니나, 태그의 의미(semantic) 을 부여하여 작성.
<header> : 헤더
<article> : 본문
<nav> : 메뉴 등 navigation
<aside> : 사이드 요소
<footer> : 푸터
<section> : 문서의 섹션 <summary>
<details> : 추가 세부 정보
<main> : 문서의 메인 content
<mark> : 강조 텍스트
<time> : 날짜/시간
- Semantic 사용 X
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Semantic 이전</title>
<style>
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 0.9em;
}
div#header, div#footer{
background-color: black;
color: white;
padding: 10px;
}
div#content{
background-color: lightgrey;
margin: 5px;
padding: 10px;
}
div.article{
background-color: white;
margin: 5px;
padding: 10px;
}
div#menu ul{
padding: 0;
}
div#menu ul li{
display: inline;
margin: 5px;
}
</style>
</head>
<body>
<div id="header">
<h1>Monday Times</h1>
</div>
<div id="menu"> <!-- div는 컨테이너 역할을 함 -->
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<div id="content">
<h2>News Section</h2>
<div class="article">
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class="article">
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>
<div id="footer">
<p>© 2014 Monday Times. All rights reserved.</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>- Semantic 사용 O
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Semantic 적용</title>
<style>
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 0.9em;
}
header, footer{
background-color: black;
color: white;
padding: 10px;
}
section{
background-color: lightgrey;
margin: 5px;
padding: 10px;
}
article{
background-color: white;
margin: 5px;
padding: 10px;
}
nav ul{
padding: 0;
}
nav ul li{
display: inline;
margin: 5px;
}
</style>
</head>
<body>
<header>
<h1>Monday Times</h1>
</header>
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>>
<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>'웹개발 > HTML' 카테고리의 다른 글
| [HTML] 여러가지 input types (0) | 2021.09.22 |
|---|---|
| [HTML] form attributes and elements (0) | 2021.09.21 |
| [HTML] element를 식별하는 수단 3가지(id, class, name) (0) | 2021.09.21 |
