0618_개발일지

Jurang Lee·2021년 6월 18일
0

오늘은 지난 시간에 이어 네이버 뉴스 카피캣을 진행하였다. 오늘은 메인의 우측과 하단 영역 작업을 진행하였다. 메인 우측의 설계도면으로 크게 div태그에 class로 news-right를 달았다. 메인 우측은 언론사별 가장 많이 본 뉴스인 news-popular태그와 뉴스 배너, 오늘 소식을 알려주는 news-today태그 3가지 영역으로 구분되었다.
먼저 메인의 popular태그에 div태그로 popular-header영역과 ul태그로 popular-lists영역을 나누고 헤더 영역에 div태그 안에 h3태그와 p태그로 내용을 작성하였다. 따로 오른쪽에 위치할 span태그는 이들 바깥쪽에 작성하였다. 다음으로 ul태그에 popular-lists에서 각각의 기사를 ul li태그 안에 넣어주었다. 기사는 popular-info안에 h4와 i, span태그로 각각 작성하고 우측에 올 이미지는 인포 바깥쪽에 넣어주었다.
css로 넘어와서 이전에 작성한 메인의 오른쪽 전체 디자인 영역에 이어 news-popular탭에 마진 바텀을 적용하고 popular-header영역에 align-item을 플렉스 스타트로 설정한다. html에서 flex-between으로 css값을 미리 적용해주었는데, 캐스캐이딩 현상이 적용되도록 헤더 영역에 다시 설정해준 것이다. 그 다음으로 h3와 p태그, span태그 각각의 폰트 사이즈를 정해주었다.
다음으로 news-popular-lists영역의 다지인 작업을 진행하였다. 리스트의 ul에 li태그에 패딩을 상하로 적용하고 info영역의 width값을 설정했다. 보더 바텀 값도 함께 넣어주고 h4영역의 폰트 사이즈를 적용해주었다. i태그에는 인라인 블럭과 버티컬 얼라인으로 아이콘이 중앙정렬되도록 하였다. 아이콘 옆에 올 언론사 span태그는 포지션을 렐러티브로 설정하고 top값을 적용하였다. 완성한 리스트를 여러개 복사 붙여넣기 했다.
배너는 기존에 진행했던 내용을 참고하여 간단하게 작업하였다. 설계도면에서 div태그로 배너를 설정하고 css에서 공간과 컬러, 바텀값을 적용해주었다.

그다음으로 news-today영역의 html작업을 진행하였다. div태그로 today-header영역과 today-body영역을 만들었다. today-header영역에 h3태그와 span태그로 내용을 작성하고 today의 body영역에 ul태그로 공지리스트 영역을 지정하고 div태그로 뉴스 스탁영역을 만들었다. 공지리스트에 각각의 내용을 li태그안에 h4와 p태그로 작성하고 스탁 랩 안에는 ul li태그를 이용하여 코스피, 코스닥 영역과 종목을 검색할 수 있는 서치랩 영역을 만들어줬다.
해당 영역에 대해 디자인을 적용해 주었다. 헤더에 마진 바텀 값을 넣어주고 h3와 span태그에 폰트사이즈를 정해주었다. span태그 앞에 기호를 삽입하고 버티컬 얼라인으로 높이를 조정해 주었다. 바디영역 패딩과 보더를 적용하고 리스트의 li태그에 보더와 패딩, 마진에 바텀값을 적용해 주었다. 마지막 li태그에는 마진 바텀값을 적용하지 않았다. h4영역에 디스플레이를 인라인블럭으로 적용하고 버티컬 얼라인을 미들로 적용했다. p태그도 마찬가지로 설정했다.
뉴스 스탁 랩 영역으로 넘어와서 패딩을 위아래로 적용하고 li태그에 width값을 50%로 설정했다. li태그 안에 span태그와 h3태그에 폰트사이즈와 마진 바텀값을 적용했다. down과 up의 값이 표시될 영역의 색상을 다르게 지정하였다. 스탁 서치랩에서는 공간과 보더값을 설정해주고 검색창 인풋 영역에 크기와 백그라운드 컬러를 적용하였다. 인풋의 포커싱이 되지 않도록 설정하고 버튼태그의 영역을 지정했다.
하단 푸터 영역은 이전에 진행한 부분과 같아 메인 하단 영역의 네비 바텀 영역을 끝으로 마쳤다. 설계도면에서 메인 하단에 news-nav-bottom탭을 만들고 중앙으로 위치하게끔 뉴스 컨테이너에 넣어주고 ul태그와 a태그로 양옆에 올 내용을 작성해주었다. 컨테이너가 있는 div태그에 flex-between도 미리 적용해주었다. css에서 보더값고 패딩값을 적용해주고 li태그에 마진라이트값을 적용하였다.




profile
웹프로그래밍

0개의 댓글