semantic
- semantic: 의미론적인
- div에 class로 넣던 것을 해당 태그 이름으로 작성
- 태그 이름만 바뀐 div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_semantic</title>
<style>
*{
margin: 0;
padding: 0;
}
wrapper{
width: 800px;
height: 1000px;
background-color: #ff0;
display: block;
}
header, nav, aside, section, article, main, address, footer{
border: 1px solid #f00;
padding: 20px;
margin: 20px;
}
aside{
width: 200px;
height: 200px;
float: left;
}
main{
width: 400px;
height: 500px;
float: right;
}
footer{
clear: both;
}
</style>
</head>
<body>
<h1>03_semantic</h1>
<wrapper>
<header>
헤더입니다.
<nav>메뉴바입니다.</nav>
</header>
<aside>
측면입니다.
</aside>
<main>
메인입니다.
<article>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perferendis quo repellendus veritatis veniam, quis ea
facere reprehenderit. Suscipit excepturi modi, deleniti
nihil accusamus, obcaecati quaerat aliquam a dolorem blanditiis sed?
</article>
<article>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perferendis quo repellendus veritatis veniam, quis ea
facere reprehenderit. Suscipit excepturi modi, deleniti
nihil accusamus, obcaecati quaerat aliquam a dolorem blanditiis sed?
</article>
<section>
section 입니다.
</section>
</main>
<footer>
바닥입니다.
<address>
주소입니다.
</address>
</footer>
</wrapper>
</body>
</html>
semantic 태그
⌨️ 문법
<wrapper></wrapper>
<header></header>
<nav></nav>
<aside></aside>
<section></section>
<article></article>
<address></address>
<footer></footer>
- wrapper
(정확히는 semantic 태그는 아님 : div가 아니어서 display block 작성해야함)
- header
- nav
- aside
- section
- article
- address
- footer
