학습내용

네이버 연예 뉴스 main-left (1), (2)
github소스코드

media-headline

• border-radius: 1px 2px 1px 4px: 속성값으로 픽셀값 4개를 준다면 순서대로 top-left, top-right, bottom-right, bottom-left를 나타낸다.

ent-section-1, 2

• 둘 다 많이 연습했던 구조라 어렵지 않았다.
• 실제 사이트는 댓글 부분에 배경 이미지를 삽입한 것 같다.

ent-section-3

• max-width + 한 줄 말줄임: 길이 100% 될 때까지 늘어나다가 100% 넘어가면 말줄임으로 표시되도록 한다.

#ent-main .ent-left #ent-section-3 li span {
    position: absolute;
    background-color: #f40080;
    padding: 0 5px;
    max-width: 100%;

    font-size: 11px;
    font-weight: 700;
    color: #ffffff;

    left: 0;
    top: 0;

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

ent-section-4

ent-section-5

• default class 내용 바꾸지 않고 속성 하나만 바꾸기

<div id="ent-section-5">
	<ul class="ent-flex-start">
</div>

#ent-main .ent-left #ent-section-5 ul {
    /* display: flex;
    flex-wrap: wrap;
    align-items: center; */
    justify-content: space-around;
}

ent-section-6

• 제목과 그 아래 프로그램 이름 부분이 각각 다른 링크로 이어진 것 같아서 같은 a태그 안에 넣을 수 없었다.
• 글자 태그 안에 같은 태그 중복으로 사용할 수 없다. 특히 하이퍼링크가 연결된 <a>태그를 중복해서 사용하지 않도록 조심해야 한다.

<li>
  <a href="#">
    <div class="img-wrap">
      <img src="https://via.placeholder.com/148x85" alt="">
      <i class="icon-play"></i>
    </div>
    <h4>‘막무가내’ 배슬기, 최정윤×안재모에 시키는 대로 하라 강요!</h4>
  </a>

  <a href="#">
    <span class="source">SBS</span>
    <span class="program">아모르 파티 - 사랑하라, 지금</span>
  </a>
</li>

• after, before로 잡은 공간 조정하려면 vertical-align, margin을 적절히 이용한다.
• 글자 사이 점 찍기

#ent-main .ent-left #ent-section-6 .source::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 2px;
    background-color: #d3d3d3;
    vertical-align: top;
    margin: 10px 2px 0 4px;
}

ent-section-7

• 일부 태그에서 ent-flex-start클래스가 적용되지 않아 css 코드를 직접 적어주었더니 적용되었다.

#ent-main .ent-left #ent-section-7 .movie-wrap {
    display: flex;
    justify-content: flex-start;
    align-content: stretch;
}

ent-section-8

• 순위 리스트라 <ol>태그를 사용해주었다.
• 강의와 달리 숫자 부분은 a태그에 포함되지 않는 것 같아서 따로 빼 주었다. 그래서 flex를 적용하는 부분도 살짝 바꼈다.

<li class="ent-flex-start">
  <span class="rank">1</span>
  <a href="#">
    <div class="news-info-wrap ent-flex-between">
      <div class="news-info-txt">
        <h4>
          “집안이 반대하는 결혼식” ‘61세’ 최화정, 21살 연하남과 깜짝 놀랄 근황</h4>
        <p>[스포츠조선닷컴 박아람 기자] 배우 최화정의 깜짝 놀랄 근황이 전해졌다. 쇼핑호스트 이민웅은 28일 자신의 인스타그램에 "오늘 어쩜 이렇게 맞춰 입고 와갖구 ㅎㅎㅎㅎㅎㅎㅎ 집안이 반대하는 결혼식 했…
        </p>
        <span>스포츠조선</span>
      </div>
      <img src="https://via.placeholder.com/88" alt="">

    </div>
  </a>
</li>

ent-section-9

• 보통 x축 정렬할 때는 flex나 vertical-align:middle을 사용했는데 span태그가 inline요소임을 이용해서 자연스럽게 x축 정렬된 부분이 있었다. span 태그가 있는 열과 그 아래 열 사이 공백을 넣을 때 margin으로 인해 레이아웃이 틀어지지 않도록 아래 요소에 margin을 넣었다.

<div class="txt-wrap">
  <span class="program">TEN리뷰</span>
  <span class="source">텐아시아</span>
  <h4>잔나비 최정훈, 군입대한 김도형 언급…"'밥 같이 먹…</h4>
</div>

#ent-main .ent-left #ent-section-9 li .txt-wrap span {
    font-size: 11px;
}
#ent-main .ent-left #ent-section-9 li .txt-wrap h4 {
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    min-height: 36px;
    padding-top: 8px;
}

어려웠던 점

1. section-7의 movie-wrap 부분에 ent-flex-start 클래스를 적용했는데 내가 생각한대로 적용되지 않았다. 크롬에도 클래스 이름이 뜨고 적용되었다고 나오고 자식 태그 넓이도 조절해보았는데 속성이 적용되지 않았다.

해결방법

1. 원인은 결국 못 찾아서 클래스를 적용하는 것이 아니라 css파일에 직접 적어주었다.

소감

이번 페이지는 높이 2000px이 훨씬 넘어가는 긴 페이지라 다양한 레이아웃의 섹션들을 연습해볼 수 있었다.