CodePen Embed - Naver 1 (main

  <main role="main" class="container">
    
        <div id="main_right">
      <div id="account">
        <p>네이버를 더 안전하고 편리하게 이용하세요</p>
        <a href="#">로그인</a>
        <div class="account_sub">
          <div class="left">
            <span>아이디</span>
            <span>비밀번호 찾기</span>
          </div>
          <span>회원가입</span>
        </div>
      </div>

      <div id="banner"></div>

      <div id="shop_wrap">
        <div class="shop_title">
          <h3><a href="#">트렌드쇼핑</a></h3>
          
          <div class="right">
            <h4><a href="#">상품</a></h4>
            <h4><a href="#">쇼핑몰</a></h4>
            <h4><a href="#">MEN</a></h4>
          </div>
        </div>
      
        <div class="shop_content">
          <ul class="commerce_lists">
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">11번가</a></li>
          </ul>

          <div class="shop_goods">
            <ul class="product_lists">
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
          </ul>
          </div>

        </div>
      </div>
    </div>

  </main>

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000000;
}

img {
  vertical-align: middle;
}


main {
  overflow: hidden; 
  padding-top: 20px;
}

main #main_right {
  float: right;
  width: 350px;
}

  
/* main - right */
#main_right #account {
  width: 100%;
  border: solid 1px #dae1e6;
  padding: 16px 16px 12px 16px;

  margin-bottom: 12px;
}

#main_right #account p {
  font-size: 12px;
  padding-left: 3px;
  margin-bottom: 11px;
}

#main_right #account a {
  display: block;
  width: 100%;
  background-color: #19ce60;
  border-radius: 2px;

  padding: 15px 0;
  margin-bottom: 14px;

  text-align: center;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}

#main_right #account .account_sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  padding: 0 8px;
}

#main_right #account .account_sub span {
  font-size: 12px;
}

#main_right #banner {
  width: 348px;
  height: 198px;
  background-color: lightgray;

  margin-bottom: 20px;
}

#main_right #shop_wrap .shop_title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  padding: 12px 0;
}

#main_right #shop_wrap .shop_title h3,
#main_right #shop_wrap .shop_title h4 {
  font-size: 13px;
}

#main_right #shop_wrap .shop_title h4 {
  margin-left: 15px;
}

#main_right #shop_wrap .shop_title .right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

#main_right #shop_wrap .shop_content {
  border: solid 1px #e4e8eb;
  padding: 0 0 22px;
}

#main_right #shop_wrap .shop_content .shop_goods {
  padding: 55px 8px;
}

#main_right #shop_wrap .shop_content .commerce_lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  padding: 12px 4px;
  background-color: #f7f9fa;
  border-bottom: solid 1px #dae1e6;
}

#main_right #shop_wrap .shop_content .commerce_lists li {
  font-size: 12px;
  margin-left: 10px; 
  margin-bottom: 5px;
}

#main_right #shop_wrap .shop_content .commerce_lists li:nth-child(1),
#main_right #shop_wrap .shop_content .commerce_lists li:nth-child(8) {
  margin-left: 0;
} 

#main_right #shop_wrap .shop_content .product_lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

#main_right #shop_wrap .shop_content .product_lists li {
  margin-bottom: 10px;
}

#main_right #shop_wrap .shop_content .product_lists h3, 
#main_right #shop_wrap .shop_content .product_lists span {
  font-size: 12px;
}

#main_right #shop_wrap .shop_content .product_lists .product_info {
  text-align: center;
}

This Pen is owned by naheeyu on CodePen.

See more by @naheeyu on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.