학습내용

네이버 뉴스홈페이지 main-left, main-right, footer, 네이버 연예뉴스 header
github소스코드

뉴스 main

main-left

• before로 세로 줄 만드는 부분도 반복되니 다음부터 이것도 별도 클래스 만들어봐야겠다.
• 링크로 이동하는 a태그의 기능은 추후 javascript로 제거 가능하다고 하는데 영상에서 다루지는 않았다.
• 영상에서 다루지 않았던 헤드라인 뉴스 이미지 오른쪽 위 버튼을 임의로 추가해주었다.

<div class="img-wrap">
  <img src="https://via.placeholder.com/220x140" alt="">
  <h4>윤희숙 “죽음으로 도망쳐 성범죄 
    없던 일로…악순환 끊자”</h4>
  <div class="btn-wrap news-flex-start">
    <i class="icon-1"></i>
    <i class="icon-2"></i>
  </div>
</div>

#news-main .news-left .news-main-wrap.news-custome .news-main-body .img-wrap {
    position: relative;
    width: 300px;
    height: 190px;
}
#news-main .news-left .news-main-wrap.news-custome .news-main-body .img-wrap .btn-wrap {
    position: absolute;
    right: 0;
    top: 0;
}
#news-main .news-left .news-main-wrap.news-custome .news-main-body .img-wrap .btn-wrap i {
    width: 24px;
    height: 24px;
}

main-right

• flex 사용 시 align-item: 주로 center로 많이 사용하는데 인기 뉴스의 header 부분 정렬할 때 start 사용했다. 미리 만들어 둔 flex 클래스는 바꾸지 않고 cascading을 이용해 특정 속성만 변경해주었다.

#news-main .news-right #news-popular .news-popular-header {
    margin-bottom: 10px;
    align-items: flex-start;
}

• text-transform:uppercase 활용

<div class="news-today-header news-flex-start">
  <h3>today</h3>
  <span>07.28 (수)</span>
</div>

#news-main .news-right #news-today .news-today-header h3 {
    font-size: 14px;
    text-transform: uppercase;
}

• 주식 종목 검색창 버튼에 before로 아이콘 삽입해보았다.

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-search-wrap .btn-search::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(../img/search.png);
    background-repeat: no-repeat;
    background-size: 18px;
    margin: 3px 0 0 2px;
}

news-nav-bottom

news-footer

• shop-footer 가져와서 변형해서 사용했다.

연예 뉴스 header

• flex 클래스를 다양하게 만들고 시작했다.
• 실제 네이버 연예 뉴스 페이지의 가로 border는 좀 특이하게 만들어졌다. span태그에 bar클래스를 붙여서 사용하는 것 같았다.
• 형제 지간 마진병합 현상: margin-top, bottom에서만 일어나고 left, right에선 일어나지 않는다.

어려웠던 점

1. 실제 페이지에선 main-left와 main-right 사이 세로줄이 main의 끝까지 들어가 있었는데, 영상에 나온대로 main-right 부분에 border-left를 주니 실제 페이지처럼 되지 않았다.

해결방법

1. 처음엔 main-right의 height를 100%로 조절해주었는데 지금 생각해보면 잘못된 태그에 적었는지 모르겠지만 아무튼 원하는대로 되지 않았다. 그래서 생각을 바꾸어 main-left 부분에 border-right를 주었더니 원하는 대로 되었다.

소감

요즘 웹프론트만 계속 만들다보니 자꾸만 기능을 넣고 싶어진다. 빨리 영상강의를 다 보고 나면 혼자서 공부해보고 싶다.