0728 개발일지

Yesol Lee·2021년 7월 28일

대구AI스쿨

AI스쿨_개발일지

목록 보기

23/57

학습내용

네이버 뉴스홈페이지 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;
}