<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>콘텐츠 구분예제</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<header>
<nav>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Section</h1>
<article>
<h2>Article1</h2>
<p>Contents...</p>
</article>
<article>
<h2>Article2</h2>
<p>Contents...</p>
</article>
<article>
<h2>Article3</h2>
<p>Contents...</p>
</article>
</section>
<aside>
Aside
</aside>
</main>
<footer>
<address>
<a href="mailto:chef1yoon@naver.com">chef1yoon@naver.com</a>
<a href="tel : 111-222-333">111-222-333</a>
</address>
</footer>
</body>
</html>
header{
background : tomato;
margin : 10px;
padding : 20px;
}
header nav{
}
header nav ul{
display : flex;
}
header nav ul li{
list-style : none;
margin : 10px;
}
main{
display : flex;
}
section{
width : 70%;
background: tomato;
margin : 10px;
padding : 10px;
box-sizing: border-box;
}
section h1{
}
article{
background : yellowgreen;
margin-bottom : 10px;
padding : 10px;
}
article h2{
}
article p{
}
aside{
width : 30%;
background : tomato;
margin : 10px;
padding : 10px;
box-sizing : border-box;
}
footer{
background : tomato;
margin : 10px;
padding : 20px;
}
footer address{
}
footer address a{
display : block;
}