CodePen Embed - Naver 3 (webtoon

<main role="main" id="webtoon_main">
  <div class="webtoon_container">
  
    <div class="webtoon_main_right">

          <div class="webtoon_challenge_wrap webtoon_border">
            <h3><span>새로운</span> 베스트 도전만화</h3>
            <img src="https://via.placeholder.com/202x110">
            <div class="webtoon_info">
              <div class="webtoon_title_wrap">
                <h4><a href="#">돈벌다 만난사이</a></h4>
                <a href="#">twinee018</a>
              </div>                
              <p><a href="#">회사에서 돈 벌다 만나서 함께하는 서로 다른 성향의 두 여자 이야기</a></p>
            </div>
          </div>

          <div class="webtoon_banner_type_1 webtoon_border"></div>

          <div class="webtoon_popular webtoon_border">
            <div class="webtoon_popular_header">
              <h2>인기급상승 만화</h2>
            </div>
            <ul class="webtoon_popular_tabs">
              <li class="tab active">
                <span>인기순</span>
              </li>

              <li class="tab">
                <span>업데이트순</span>
              </li>
            </ul>

            <div class="webtoon_popular_ranking">
              <ol>
                <li>
                  <div class="rank_content">
                    <span class="rank">1</span>
                    <div class="rank_content">
                    <a href="#">모죠의 일지-214화. 쿠키 굽기</a>
                  </div>
                  </div>
                  <div class="rank_box">
                    <!-- status_stay, up, down -->
                    <div class="status status_stay"></div>
                    <span class="number">0</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank">2</span>
                    <div class="rank_content">
                    <a href="#">모죠의 일지-214화. 쿠키 굽기</a>
                  </div>
                  </div>
                  <div class="rank_box">
                    <div class="status status_up"></div>
                    <span class="number">1</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank">3</span>
                    <div class="rank_content">
                    <a href="#">모죠의 일지-214화. 쿠키 굽기</a>
                  </div>
                  </div>
                  <div class="rank_box">
                    <div class="status status_down"></div>
                    <span class="number">1</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank">1</span>
                    <div class="rank_content">
                    <a href="#">모죠의 일지-214화. 쿠키 굽기</a>
                  </div>
                  </div>
                  <div class="rank_box">
                    <!-- status_stay, up, down -->
                    <div class="status status_stay"></div>
                    <span class="number">0</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank">2</span>
                    <div class="rank_content">
                    <a href="#">모죠의 일지-214화. 쿠키 굽기</a>
                  </div>
                  </div>
                  <div class="rank_box">
                    <div class="status status_up"></div>
                    <span class="number">1</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank">3</span>
                    <div class="rank_content">
                    <a href="#">모죠의 일지-214화. 쿠키 굽기</a>
                  </div>
                  </div>
                  <div class="rank_box">
                    <div class="status status_down"></div>
                    <span class="number">1</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank">1</span>
                    <div class="rank_content">
                    <a href="#">모죠의 일지-214화. 쿠키 굽기</a>
                  </div>
                  </div>
                  <div class="rank_box">
                    <!-- status_stay, up, down -->
                    <div class="status status_stay"></div>
                    <span class="number">0</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank">2</span>
                    <div class="rank_content">
                    <a href="#">모죠의 일지-214화. 쿠키 굽기</a>
                  </div>
                  </div>
                  <div class="rank_box">
                    <div class="status status_up"></div>
                    <span class="number">1</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank">3</span>
                    <div class="rank_content">
                    <a href="#">모죠의 일지-214화. 쿠키 굽기</a>
                  </div>
                  </div>
                  <div class="rank_box">
                    <div class="status status_down"></div>
                    <span class="number">1</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank">3</span>
                    <div class="rank_content">
                    <a href="#">모죠의 일지-214화. 쿠키 굽기</a>
                  </div>
                  </div>
                  <div class="rank_box">
                    <div class="status status_down"></div>
                    <span class="number">1</span>
                  </div>
                </li>
              </ol>
            </div>
          </div>

          <div class="webtoon_popular webtoon_border">
            <div class="webtoon_popular_header">
              <h2>30대 실시간 인기만화</h2>
            </div>
            <ul class="webtoon_popular_tabs">
              <li class="tab active">
                <span>남자</span>
              </li>

              <li class="tab">
                <span>여자</span>
              </li>
            </ul>

            <div class="webtoon_popular_ranking">
              <ol>
                <li>
                  <div class="rank_content">
                    <span class="rank rank_custom">1</span>
                    <div class="image_wrap">
                      <img src="https://via.placeholder.com/30x33">
                      <div class="webtoon_info">
                        <a href="#">헬퍼 2 : 킬베로스</a>
                        <span class="author">삭</span>
                      </div>
                    </div>
                  </div>
                  <div class="rank_box">
                    <!-- status_stay, up, down -->
                    <div class="status status_stay"></div>
                    <span class="number">0</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank rank_custom">1</span>
                    <div class="image_wrap">
                      <img src="https://via.placeholder.com/30x33">
                      <div class="webtoon_info">
                        <a href="#">헬퍼 2 : 킬베로스</a>
                        <span class="author">삭</span>
                      </div>
                    </div>
                  </div>
                  <div class="rank_box">
                    <!-- status_stay, up, down -->
                    <div class="status status_stay"></div>
                    <span class="number">0</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank rank_custom">1</span>
                    <div class="image_wrap">
                      <img src="https://via.placeholder.com/30x33">
                      <div class="webtoon_info">
                        <a href="#">헬퍼 2 : 킬베로스</a>
                        <span class="author">삭</span>
                      </div>
                    </div>
                  </div>
                  <div class="rank_box">
                    <!-- status_stay, up, down -->
                    <div class="status status_stay"></div>
                    <span class="number">0</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank rank_custom">1</span>
                    <div class="image_wrap">
                      <img src="https://via.placeholder.com/30x33">
                      <div class="webtoon_info">
                        <a href="#">헬퍼 2 : 킬베로스</a>
                        <span class="author">삭</span>
                      </div>
                    </div>
                  </div>
                  <div class="rank_box">
                    <!-- status_stay, up, down -->
                    <div class="status status_stay"></div>
                    <span class="number">0</span>
                  </div>
                </li>

                <li>
                  <div class="rank_content">
                    <span class="rank rank_custom">1</span>
                    <div class="image_wrap">
                      <img src="https://via.placeholder.com/30x33">
                      <div class="webtoon_info">
                        <a href="#">헬퍼 2 : 킬베로스</a>
                        <span class="author">삭</span>
                      </div>
                    </div>
                  </div>
                  <div class="rank_box">
                    <!-- status_stay, up, down -->
                    <div class="status status_stay"></div>
                    <span class="number">0</span>
                  </div>
                </li>

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

          <div class="webtoon_banner_type_2 webtoon_border"></div>

          <div class="webtoon_banner_type_2 webtoon_border"></div>

          <div class="webtoon_banner_type_2 webtoon_border"></div>

          <div class="webtoon_banner_type_2 webtoon_border"></div>

        </div>

    </div>

  </main>

* {
  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;
}




/* webtoon */
.webtoon_border {
  border: solid 1px #ced2d7;
}

.webtoon_container {
  display: flex;
  flex-wrap: wrap;  
  justify-content: space-between;
  align-items: center;

  width: 960px;
  margin: 0 auto;
}

#webtoon_main .webtoon_container {
  overflow: hidden;
}  
  


/* webtoon - main right */
#webtoon_main .webtoon_main_right .webtoon_challenge_wrap {
  width: 100%;
  height: 252px;
  background-color: #f9f9fc;

  padding: 20px 18px;
  margin-bottom: 20px;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap h3 {
  font-size: 18px;
  margin-bottom: 11px;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap h3 span {
  color: #00d564;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap img {
  width: 100%;
  height: 110px;

  margin-bottom: 18px;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info .webtoon_title_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 5px;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info .webtoon_title_wrap h4 {
  font-size: 16px;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info .webtoon_title_wrap a {
  font-size: 12px;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info p {
  font-size: 13px;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info p a {
  color: grey;
}

#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info a:hover {
  text-decoration: underline;
}

#webtoon_main .webtoon_main_right .webtoon_banner_type_1,
#webtoon_main .webtoon_main_right .webtoon_banner_type_1 {
  margin-bottom: 8px;
}

#webtoon_main .webtoon_main_right .webtoon_banner_type_1 {
  height: 240px;
  background-color: gray;
}

#webtoon_main .webtoon_main_right .webtoon_banner_type_2 {
  height: 86px;
  background-color: gray;
}

#webtoon_main .webtoon_main_right .webtoon_popular {
  background-color: #fff;
  margin-bottom: 8px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; 
  align-items: center;

  padding: 9px 12px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_header h2 {
  font-size: 14px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  border-top: solid 1px #e1e1e1;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_tabs .tab {
  width: 50%;
  height: 30px;
  border-bottom: solid 1px #e1e1e1;

  text-align: center;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_tabs .tab:first-child {
  border-right: solid 1px #e1e1e1;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_tabs .tab.active {
  border-bottom: solid 1px #fff;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_tabs .tab span {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 30px;

  font-size: 12px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking {
  width: 100%;
  background-color: #fff;

  padding: 15px 0 7px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 7px;
  padding: 0 13px;

  font-size: 12px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
 
#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_content a {
  display: inline-block;
  overflow: hidden;
  width: 140px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_content .rank {
  margin-right: 5px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box {
  position: relative;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  width: 30px;
  height: 12px;

  top: -2px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .status {
  width: 12px;
  height: 12px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .status.status_stay {
  background-color: black;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .status.status_up {
  background-color: red;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .status.status_down {
  background-color: blue;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .number {}


/* 썸네일 이미지가 포함된 랭킹 */
#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank.rank_custom {
  position: relative;
  top: -10px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .image_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;

  width: 140px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .image_wrap img {
  width: 30px;
  height: 33px;
  margin-right: 5px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .image_wrap .webtoon_info {
  /*background-color: yellow;*/
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .image_wrap .webtoon_info a {
  width: 100px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking .image_wrap .webtoon_info .author {
  display: block;
}

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.