21.08.04

94900 ワード
大邱AI学校 TIL テキストリンク

Today I Learned


ent.html

<!-- 08-04 -->
<!-- ENT Banner -->
<div class="ent-banner"></div>

<!-- ENT Section 11 -->
<div class="ent-section-11">
  <div class="title-wrap ent-flex-between">
    <h3>많이 본 TV연예 뉴스</h3>
    <a href="#" class="more">더보기</a>
  </div>
  <ol>
    <li>
      <a href="#">
        <span class="rank">1</span>
        <p>동해물과 백두산이 마르고 닳도록</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="rank">1</span>
        <p>동해물과 백두산이 마르고 닳도록</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="rank">1</span>
        <p>동해물과 백두산이 마르고 닳도록</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="rank">1</span>
        <p>동해물과 백두산이 마르고 닳도록</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="rank">1</span>
        <p>동해물과 백두산이 마르고 닳도록</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="rank">1</span>
        <p>동해물과 백두산이 마르고 닳도록</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="rank">1</span>
        <p>동해물과 백두산이 마르고 닳도록</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="rank">1</span>
        <p>동해물과 백두산이 마르고 닳도록</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="rank">1</span>
        <p>동해물과 백두산이 마르고 닳도록</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="rank">1</span>
        <p>동해물과 백두산이 마르고 닳도록</p>
      </a>
    </li>
  </ol>
</div>

<!-- ENT Section 12 -->
<div class="ent-section-12">
  <ul>
    <li>
      <a href="#">
        <div class="title-wrap ent-flex-between">
          <div class="title-left ent-flex-start">
            <span class="count">14</span>
            <h3>타이틀 1</h3>
          </div>
          <div class="icon-arrow"></div>
        </div>
        <div class="article-content ent-flex-between">
          <div class="content-left">
            <h4>서브 타이틀서브 타이틀서브 타이틀서브 타이틀서브 타이틀</h4>
            <span class="source">스타뉴스</span>
          </div>
          <img src="https://via.placeholder.com/70" />
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="title-wrap ent-flex-between">
          <div class="title-left ent-flex-start">
            <span class="count">14</span>
            <h3>타이틀 1</h3>
          </div>
          <div class="icon-arrow"></div>
        </div>
        <div class="article-content ent-flex-between">
          <div class="content-left">
            <h4>서브 타이틀서브 타이틀서브 타이틀서브 타이틀서브 타이틀</h4>
            <span class="source">스타뉴스</span>
          </div>
          <img src="https://via.placeholder.com/70" />
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="title-wrap ent-flex-between">
          <div class="title-left ent-flex-start">
            <span class="count">14</span>
            <h3>타이틀 1</h3>
          </div>
          <div class="icon-arrow"></div>
        </div>
        <div class="article-content ent-flex-between">
          <div class="content-left">
            <h4>서브 타이틀서브 타이틀서브 타이틀서브 타이틀서브 타이틀</h4>
            <span class="source">스타뉴스</span>
          </div>
          <img src="https://via.placeholder.com/70" />
        </div>
      </a>
    </li>
  </ul>
  <div class="bottom ent-flex-between">
    <!-- 
                                button 태그는 inline-block의 성격을 가지고 있어 기본적으로 바깥 여백을 가지고 있다.
                                그래서 두 개의 버튼이 서로 떨어져 있는데, 이를 해결하려면
                                flex-start 속성을 부여해 여백없이 좌우배치를 할 수 있다.
                            -->
    <div class="btn-wrap ent-flex-start">
      <button class="btn btn-prev"></button>
      <button class="btn btn-next"></button>
    </div>
    <a href="#" class="more">더보기</a>
  </div>
</div>

<!-- ENT Section 13 -->
<div class="ent-section-13">
  <div class="title-wrap">
    <h3>연예가 HOT 포토</h3>
  </div>
  <ul class="ent-flex-between">
    <li>
      <img src="https://via.placeholder.com/146x138" />
      <h4>Title Title Title Title Title Titlee Titlee Title</h4>
      <span>스타들의 일상</span>
    </li>
    <li>
      <img src="https://via.placeholder.com/146x138" />
      <h4>Title Title Title Title Title Titlee Titlee Title</h4>
      <span>스타들의 일상</span>
    </li>
    <li>
      <img src="https://via.placeholder.com/146x138" />
      <h4>Title Title Title Title Title Titlee Titlee Title</h4>
      <span>스타들의 일상</span>
    </li>
    <li>
      <img src="https://via.placeholder.com/146x138" />
      <h4>Title Title Title Title Title Titlee Titlee Title</h4>
      <span>스타들의 일상</span>
    </li>
  </ul>
</div>

<!-- ENT Section 14 -->
<div class="ent-section-14">
  <div class="title-wrap ent-flex-between">
    <h3>연예가 인터뷰</h3>
    <a href="#" class="more">더보기</a>
  </div>
  <div class="heading ent-flex-between">
    <div class="heading-info">
      <h4>Title Title Title Title Title Title Title Title Title Title Title Title</h4>
      <span class="source">스포츠</span>
    </div>
    <img src="https://via.placeholder.com/70" />
  </div>
  <ul>
    <li><a href="#">동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</a></li>
    <li><a href="#">동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</a></li>
    <li><a href="#">동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</a></li>
    <li><a href="#">동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</a></li>
    <li><a href="#">동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</a></li>
  </ul>
</div>
</div>
</div>
</main>

<!-- ENT Footer -->
<footer id="ent-footer">
  <div class="ent-container">
    <ul class="ent-flex-center">
      <li>
        <a href="#">이용약관</a>
      </li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#" class="on">개인정보 처리방침</a></li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">이용약관</a></li>
      <li><a href="#">이용약관</a></li>
    </ul>
    <p class="ent-footer-paragraph">
      본 콘텐츠의 저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 법적 책임을 질 수 있습니다.
    </p>
    <p>Copyright © NAVER Corp. All Rights Reserved.</p>
  </div>
</footer>

style.css

/* ENT Banner */
#ent-main .ent-right .ent-banner {
    width: 300px;
    height: 250px;
    background-color: gray;

    border: solid 1px #000;

    margin-bottom: 30px;
}

/* ENT Section 11 */
#ent-main .ent-right .ent-section-11 {
    padding-bottom: 12px;
    border-bottom: solid 1px #e8e8e8;
}

#ent-main .ent-right .ent-section-11 .title-wrap {
    margin-bottom: 8px;
}

#ent-main .ent-right .ent-section-11 .title-wrap h3 {
    font-size: 16px;
}

#ent-main .ent-right .ent-section-11 .title-wrap a {
    font-size: 12px;
    color: #999;
}

#ent-main .ent-right .ent-section-11 ol {
}

#ent-main .ent-right .ent-section-11 ol li {
    margin-bottom: 10px;
}

#ent-main .ent-right .ent-section-11 ol li a {
}

#ent-main .ent-right .ent-section-11 ol li .rank {
    display: inline-block;
    width: 16px;

    font-size: 16px;
    color: #e2458f;

    text-align: center;
}

#ent-main .ent-right .ent-section-11 ol li p {
    display: inline-block;
    width: 270px;
    vertical-align: middle; /* span태그와 p태그를 한줄로 정렬하기 위함 */
    font-size: 12px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ENT Section 12 */
#ent-main .ent-right .ent-section-12 ul {
    margin-bottom: 12px;
}

#ent-main .ent-right .ent-section-12 ul li {
    padding: 14px;
    border-bottom: solid 1px #f2f2f2;
}

#ent-main .ent-right .ent-section-12 ul a {
}

#ent-main .ent-right .ent-section-12 ul .title-wrap {
    margin-bottom: 10px;
}

#ent-main .ent-right .ent-section-12 ul .title-wrap .title-left {
}

#ent-main .ent-right .ent-section-12 ul .title-wrap .title-left .count {
    width: 20px;
    height: 15px;
    padding: 2px 4px;
    border: solid 1px #e2458f;

    color: #e2458f;
    font-size: 10px;

    margin-right: 8px;
}

#ent-main .ent-right .ent-section-12 ul .title-wrap .title-left h3 {
    color: #e2458f;
    font-size: 12px;
}

#ent-main .ent-right .ent-section-12 ul .title-wrap .icon-arrow {
    width: 8px;
    height: 12px;
    background-color: #e2458f;
}

#ent-main .ent-right .ent-section-12 ul .article-content {
}

#ent-main .ent-right .ent-section-12 ul .article-content .content-left {
    width: 200px;
}

#ent-main .ent-right .ent-section-12 ul .article-content .content-left h4 {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    margin-top: 6px;
}

#ent-main .ent-right .ent-section-12 ul .article-content .content-left .source {
    font-size: 11px;
    color: #a6a6a6;
}

#ent-main .ent-right .ent-section-12 ul .article-content img {
    width: 70px;
    height: 70px;
    border: solid 1px #000;
}

#ent-main .ent-right .ent-section-12 .bottom {
    border-bottom: solid 1px #f2f2f2;
    padding-bottom: 24px;
}

#ent-main .ent-right .ent-section-12 .bottom .btn {
    width: 24px;
    height: 24px;
    border: solid 1px #f2f2f2;
}

#ent-main .ent-right .ent-section-12 .bottom .btn.btn-prev {
    background-color: gray;
    border-right: none;
}

#ent-main .ent-right .ent-section-12 .bottom .btn.btn-next {
    background-color: yellow;
}

#ent-main .ent-right .ent-section-12 .bottom .more {
    font-size: 12px;
    color: #999;
}

/* ENT Section 13 */
#ent-main .ent-right .ent-section-13 {
    padding: 20px 0 2px;
    border-bottom: solid 1px #e8e8e8;
}

#ent-main .ent-right .ent-section-13 .title-wrap {
    margin-bottom: 12px;
}

#ent-main .ent-right .ent-section-13 .title-wrap h3 {
    font-size: 16px;
}

#ent-main .ent-right .ent-section-13 li {
    width: 146px;
    margin-bottom: 19px;
}

#ent-main .ent-right .ent-section-13 li img {
    width: 100%;
    height: 138px;
    border: solid 1px #000;
    margin-bottom: 9px;
}

#ent-main .ent-right .ent-section-13 li h4 {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;

    /* 
    네이버 사이트의 경우는 어떤 요소엔 margin-top을 적용하고 어떤 요소엔 margin-bottom을 적용하고 중구난방..
    가능하면 일관성있게 작성하는 것이 좋다.
    */
    margin-bottom: 5px;
}

#ent-main .ent-right .ent-section-13 li span {
    font-size: 11px;
    color: #898989;
}

/* ENT Seciton 14 */
/* 스타일이 반복되는 요소는 하나의 클래스로 설정해서 사용하는 것이 유지보수에 좋다*/
#ent-main .ent-right .ent-section-14 {
    padding-top: 12px;
}

#ent-main .ent-right .ent-section-14 .title-wrap {
    margin-bottom: 8px;
}

#ent-main .ent-right .ent-section-14 .title-wrap h3 {
    font-size: 16px;
}

#ent-main .ent-right .ent-section-14 .title-wrap .more {
    font-size: 12px;
    color: #999;
}

#ent-main .ent-right .ent-section-14 .heading {
    margin-bottom: 8px;
}

#ent-main .ent-right .ent-section-14 .heading .heading-info {
    width: 210px;
}

#ent-main .ent-right .ent-section-14 .heading h4 {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

#ent-main .ent-right .ent-section-14 .heading .source {
    font-size: 11px;
    color: #999;
}

#ent-main .ent-right .ent-section-14 .heading img {
    width: 70px;
    height: 70px;
    border: solid 1px #000;
}

#ent-main .ent-right .ent-section-14 ul {
}

#ent-main .ent-right .ent-section-14 ul li {
    margin-bottom: 8px;
}

#ent-main .ent-right .ent-section-14 ul a {
    display: block; /* a태그의 범위를 늘려주기 위함 */
    width: 100%;
    font-size: 12px;
    color: #222;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ent-main .ent-right .ent-section-14 ul a::before {
    content: "";
    display: inline-block;
    width: 2px;
    height: 2px;

    vertical-align: top;
    background-color: silver;

    margin: 5px 5px 0 0;
}

/* ENT Footer */
#ent-footer {
    text-align: center;
    font-size: 12px;
}

#ent-footer .ent-container {
    width: 980px;
    height: 100%;

    padding: 48px 0 41px 0;
    border-top: solid 1px #e8e8e8;
}

#ent-footer .ent-container ul {
    margin-bottom: 9px;
}

#ent-footer .ent-container ul a::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    background-color: #d7d7d7;

    margin: 0 6px;

    vertical-align: -1px;
}

#ent-footer .ent-container li:first-child a::before {
    content: none;
}

#ent-footer .ent-container ul a.on {
    font-weight: bold;
}

#ent-footer .ent-container .ent-footer-paragraph {
    padding: 3px 0 15px 0;
}

Review


ネイバー演芸ニュースページの右側エリアでもカピケットをしました.Footer分野は自分でやったことがありますが、思ったほどスムーズではありません.やはり真似と自分でやってみるのは違うレベルです.私はもっと一人でレイアウトの仕事を練習しなければなりません.
JUnit試験手順
Node.js-アリEggのマルチプロセスモデルとプロセス間通信