<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="0414 웹개발 과제.css">
</head>
<body>
<header>
<h1 class="title">실습</h1>
<ul>
<li>홈</li>
<li>마이페이지</li>
<li>재생목록</li>
<li>커뮤니티</li>
<li>채널</li>
<li>정보</li>
</ul>
</header>
<section>
<div class="body-box">
<h2>width : 400 height : 300</h2>
<p>"시계처럼 살아라." - 이는 시계처럼 꾸준히 가라는 것이다. 시계처럼 시간도 지켜라</p>
</div>
<div class="body-box">
<h2>width : 400 height : 300</h2>
<p>시계는 화장실에 갖다 놔도 간다. 추워도 간다. 더운데 갖다 놔도 간다.</p>
</div>
<br>
<div class="body-box">
<h2>width : 400 height : 300</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="body-box">
<h2>width : 400 height : 300</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</section>
<footer>
<div class="bottom-box">
<h1>width : 1000 height : 150</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, qui?</p>
</div>
</footer>
</body>
</html>=========================================================================================================================
* {margin: 0; padding: 0;}
header {
text-align: center;
background-color: rgb(115, 201, 149);
margin: 0;
box-sizing: border-box;
height: 100px;
width: 100%;
}
.title {
color: white;
line-height: 60px;
}
li {
display: inline-block;
background-color: rgb(158, 83, 228);
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
padding: 6px;
color: white;
}
ul {
padding: 0;
}
section {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.body-box {
box-sizing: border-box;
border: 3px solid black;
width: 400px; height: 300px;
display: inline-block;
margin: 10px;
padding: 20px;
}
.bottom-box {
border: 3px solid black;
width: 1000px; height: 150px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
