<body id="shop_body">
<header id="shop_header">
<div id="shop_header_top"></div>
<div id="shop_header_middle"></div>
<nav>
<div class="shop_container">
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">백화점</a></li>
<li><a href="#">아울렛</a></li>
<li><a href="#">스타일</a></li>
</ul>
</div>
</nav>
</header>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
img {
vertical-align: middle;
}
button {
border: none;
}
input, textarea {
outline: none;
}
.clearfix {
clear: both;
}
#shop_body {
background-color: #e9ecef;
}
.shop_container {
width: 1290px;
margin: 0 auto;
}
#shop_header #shop_header_top {
width: 100%;
height: 36px;
background-color: #03c75a;
border-bottom: solid 1px #e8e8e8;
}
#shop_header #shop_header_middle {
width: 100%;
height: 66px;
background-color: #03c75a;
}
#shop_header nav {
width: 100%;
background-color: #fff;
border-top: solid 1px #e8e8e8;
border-bottom: solid 1px #e8e8e8;
}
#shop_header nav ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
}
#shop_header nav ul li {
margin-right: 16px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.