CodePen Embed - Naver 1 (main-blog)

<main role="main" class="container">

      <div id="blog_wrap">
        <div class="blog_header">

          <div class="left_header">
            <h3>오늘 읽을만한 글</h3>
            <span>주제별로 분류된 다양한 글 모음</span>
          </div>

          <div class="right_header">
            <span class="count"><strong>1,853</strong> 개의 글</span>
            <span>관심주제 설정</span>
          </div>

        </div>

        <nav class="blog_nav">
          <ul>
            <li><a href="#">주제1</a></li>
            <li><a href="#">주제2</a></li>
            <li><a href="#">주제3</a></li>
            <li><a href="#">주제4</a></li>
            <li><a href="#">주제5</a></li>
            <li><a href="#">주제6</a></li>
            <li><a href="#">주제7</a></li>
            <li><a href="#">주제8</a></li>
          </ul>
        </nav>

        <div class="blog_list_wrap">
          <ul>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/170x114">

                <div class="blog_list_info">
                  <span>경제M</span>
                  <h4>Title</h4>
                  <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p> 

                  <div class="date_wrap">
                    <span>뉴스얌</span>
                    <span>4일 </span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/170x114">

                <div class="blog_list_info">
                  <span>경제M</span>
                  <h4>Title</h4>
                  <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p> 

                  <div class="date_wrap">
                    <span>뉴스얌</span>
                    <span>4일 </span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/170x114">

                <div class="blog_list_info">
                  <span>경제M</span>
                  <h4>Title</h4>
                  <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p> 

                  <div class="date_wrap">
                    <span>뉴스얌</span>
                    <span>4일 </span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/170x114">

                <div class="blog_list_info">
                  <span>경제M</span>
                  <h4>Title</h4>
                  <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p> 

                  <div class="date_wrap">
                    <span>뉴스얌</span>
                    <span>4일 </span>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>

        <div class="blog_media_wrap">
          <ul>
            <li>
              <img src="https://via.placeholder.com/232x130">
              <div class="blog_media_info">
                <h4>Title</h4>
                <span>동영상</span>
              </div>
            </li>
            <li>
              <img src="https://via.placeholder.com/232x130">
              <div class="blog_media_info">
                <h4>Title</h4>
                <span>동영상</span>
              </div>
            </li>
            <li>
              <img src="https://via.placeholder.com/232x130">
              <div class="blog_media_info">
                <h4>Title</h4>
                <span>동영상</span>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <div id="main_right">
      
    </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;
}

.container {
  width: 1130px;
  margin: 0 auto;
} 


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

/* main - blog */

main #blog_wrap {
  padding-top: 35px;
}

main #blog_wrap .blog_header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  padding-bottom: 17px;
}

main #blog_wrap .blog_header .left_header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

main #blog_wrap .blog_header .left_header h3 {
  font-size: 14px;
  margin-right: 8px;
}

main #blog_wrap .blog_header .left_header span {
  font-size: 12px;
  color: gray;
}

main #blog_wrap .blog_header .right_header {
  display: flex;
  flex-wrap: wrap;  
  justify-content: flex-end;
  align-items: center;
}

main #blog_wrap .blog_header .right_header span {
  font-size: 12px;
  color: gray;
  margin-right: 8px;
}

main #blog_wrap .blog_header .right_header span strong {
  color: #000000;
}

main #blog_wrap .blog_nav ul {
  overflow: hidden;
  border: solid 1px #eae1e6;
}

main #blog_wrap .blog_nav ul li {
  float: left;
  width: 12.5%;
  height: 49px;

  border-right: solid 1px #eae1e6;
}

main #blog_wrap .blog_nav ul li:last-child {
  border: none;
}

main #blog_wrap .blog_nav ul li a {
  display: block;
  width: 100%;
  height: 100%;

  line-height: 49px;
  text-align: center;
}

main #blog_wrap .blog_list_wrap {
  padding-top: 18px;
  border-bottom: solid 1px #dae1e6;
}

main #blog_wrap .blog_list_wrap li {
  margin-bottom: 18px;
}

main #blog_wrap .blog_list_wrap li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

main #blog_wrap .blog_list_wrap li img {
  width: 170px; 
  height: 114px;
  margin-right: 21px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info {
  width: 559px;
  padding-right: 47px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info span {
  font-size: 12px;
  color: #35ae5e;
}

main #blog_wrap .blog_list_wrap li .blog_list_info h4 {
  font-size: 13px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info p {
  font-size: 13px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info .date_wrap span {
  color: #505050
}

main #blog_wrap .blog_media_wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  padding: 18px 0;

  border-bottom: solid 1px #dae1e6;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info {
  padding-top: 12px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info h4 {
  font-size: 13px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info span {
  font-size: 12px;
}

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.