<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹페이지 구조 작업하기</title>
<style type="text/css">
body, header, div, footer, h1, p, ul, li {
margin: 0;
padding: 0;
}
.clear:after {
content: "";
display: block;
clear: both;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
#wrapper {
background: lightgreen;
}
header {
float: left;
background: pink;
width: 100%;
}
h1 {
margin: 3px;
float: left;
}
header li {
margin: 3px;
float: left;
}
.menu {
width: 20%;
background: lightblue;
float: left;
}
.content {
width: 80%;
float: left;
background: lightgray;
}
footer {
background: gray;
}
</style>
</head>
<body>
<div id="wrapper">
<header class="clear">
<h1>
<a href="#">LOGO</a>
</h1>
<ul>
<li><a href="#">신상품</a></li>
<li><a href="#">인기상품</a></li>
<li><a href="#">할인상품</a></li>
<li><a href="#">무료배송</a></li>
</ul>
</header>
<div id="container" class = "clear">
<ul class = "menu">
<li><a href="#">상의</a></li>
<li><a href="#">하의</a></li>
<li><a href="#">신발</a></li>
<li><a href="#">가방</a></li>
</ul>
<div class="content">
<p>
Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit,<br>
sed do eiusmod tempor incididunt<br> ut labore et dolore magna
aliqua.<br> Ut enim ad minim veniam,<br> quis nostrud
exercitation ullamco laboris<br> nisi ut aliquip ex ea commodo
consequat.<br> Duis aute irure dolor in reprehenderit<br>
in voluptate velit esse cillum dolore eu<br> fugiat nulla
pariatur.<br> Excepteur sint occaecat cupidatat non proident,<br>
sunt in culpa qui officia deserunt<br> mollit anim id est
laborum.
</p>
</div>
</div>
<footer>
<p>회사소개 | 이용약관 | 개인정보처리방침 | ⓒ
</footer>
</div>
</body>
</html>
