<body id="shop_body">
<main role="main" id="shop_main">
<div class="shop_container">
<div class="brand_wrap shop_border">
<ul class="brand_lists">
<li><img src="https://via.placeholder.com/64"></li>
<li><img src="https://via.placeholder.com/64"></li>
<li><img src="https://via.placeholder.com/64"></li>
<li><img src="https://via.placeholder.com/64"></li>
<li><img src="https://via.placeholder.com/64"></li>
<li><img src="https://via.placeholder.com/64"></li>
<li><img src="https://via.placeholder.com/64"></li>
<li><img src="https://via.placeholder.com/64"></li>
<li><img src="https://via.placeholder.com/64"></li>
</ul>
</div>
</div>
</main>
<footer id="shop_footer">
<div class="shop_container">
<div class="policy_wrap">
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
<span>네이버 이용약관</span>
</div>
<p>네이버는 통신판매 당사자가 아닙니다. 거래에 관한 의무와 책임은 판매자에게 있습니다.</p>
</div>
</footer>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
img {
vertical-align: middle;
}
main {
overflow: hidden;
padding-top: 20px;
}
/* shop - main */
#shop_body {
background-color: #e9ecef;
}
.shop_container {
width: 1290px;
margin: 0 auto;
}
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
.shop_border {
border: solid 1px #ced2d7;
}
#shop_main .brand_wrap {
background-color: #fff;
}
#shop_main .brand_wrap .brand_lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 18px 18px;
}
#shop_main .brand_wrap .brand_lists li {
width: 64px;
height: 64px;
}
#shop_main .brand_wrap .brand_lists li img {
width: 100%;
height: 100%;
}
/* shop - footer */
#shop_footer {
padding-bottom: 80px;
text-align: center;
}
#shop_footer .policy_wrap {
border-top: solid 2px #5d5d5d;
padding-top: 50px;
margin: 30px auto 11px;
font-size: 12px;
}
#shop_footer .policy_wrap span:before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin: 0 8px;
background-color: #d7d7d7;
vertical-align: -1;
}
#shop_footer .policy_wrap span:first-child:before {
content: initial;
}
#shop_footer p {
font-size: 12px;
color: #888;
margin-bottom: 11px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.