<!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>

'HTML·CSS' 카테고리의 다른 글

[HTML,CSS] jQuery를 이용한 아코디언 액션  (0) 2021.08.17
DOM , BOM 개념 정리  (0) 2021.08.12
HTML CSS JS 이용한 로그인 페이지 만들기  (0) 2021.08.10
HTML/CSS 태그  (0) 2021.08.03
HTML/CSS 구조  (0) 2021.08.03

+ Recent posts