<!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;
}'HTML CSS' 카테고리의 다른 글
| <a> (0) | 2021.08.18 |
|---|---|
| dl, dt, dd 태그 사용 시 css를 먹히고 싶을 때 바꿀 수 잇는 방법 (0) | 2021.08.16 |
| header, body (0) | 2021.08.14 |
| span tag 공백 (0) | 2021.08.14 |
| input text box 투명하게 만드는 방법, 박스 테두리 없애기 (0) | 2021.07.29 |
