HTML CSS
기본구조: header main footer
sj0020
2021. 8. 16. 18:19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>콘텐츠 구분 예제</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<header>
<!-- 이 예제에서는 nav를 header 내부에 썼지만 꼭 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:id@gmail.com">id@gmail.com</a>
<a href="tel:+8201099998888">010-9999-8888</a>
</address>
</footer>
</body>
</html>
main.css
header{
background-color: tomato;
margin: 10px;
padding: 20px;
}
header nav {
}
header nav ul{
display: flex;
}
header nav ul li{
list-style-type: none;
margin: 10px;
}
main{
display:flex;
}
section {
width: 70%;
background-color: lightgray;
margin: 10px;
padding: 10px;
box-sizing: border-box;
}
section h1{
background: lightpink;
}
article{
background-color: lightsalmon;
margin-bottom: 10px;
padding: 10px;
}
article h2{
}
article p{
}
aside{
width: 30%;
background-color: lightgreen;
margin: 10px;
padding: 20px;
box-sizing: border-box;
}
footer{
background-color: lightblue;
margin: 10px;
padding: 20px;
}
footer address a{
display: block;
}