오늘은 지난시간에 이어 네이버 뉴스 연예페이지를 완성했다. 오늘 진행한 부분은 메인의 우측이다. 설계도면에서 main의 ent-right에서 맨 위에 배너를 삽입했다. css에서 전체 ent-right부분의 크기를 설정하고 배너의 크기와 백그라운드컬러, 보더를 적용했다. 그다음으로 순위가 있는 목록이 들어갈 section-10의 설계도면 작업을 진행했다. div클래스로 타이틀랩안에 h3와 a태그로 상단에 들어갈 내용을 작성하고 ol li a태그로 순서에 들어갈 랭크를 작성했다. a태그 안에는 span태그와 p태그로 내용을 작성했다. 디자인 영역으로 넘어가서 전체 섹션에 패딩과 보더바텀을 적용하고 타이틀랩에 마진바텀을 적용했다. ol의 li태그에도 마진바텀을 적용하고 랭크가 들어가는 영역에 디스플레이를 인라인 블럭으로 설정하고 텍스트 정렬을 중앙으로 정렬시켰다. p태그에도 디스플레이를 인라인 블럭으로 적용하고 말줄임표시를 적용하였다. 순위를 총 10개 만들고 다음 섹션으로 넘어갔다.
html에서 섹션 11을 작성하였다. 글과 이미지가 x축으로 정렬되는 이번 섹션에서는 3개의 리스트를 구성하기 위해 ul태그안에 li a태그로 타이틀랩과 아티클 컨텐츠를 작성해주었다. 원래는 각각의 태그를 눌렀을때 페이지가 이동되도록 a태그를 적용해야하는데, 간소하게 한번에 묶어 작업하였다. 타이틀랩에 플렉스 비트윈을 적용하고 타이틀 레프트에는 span태그와 h3로 내용을, 반대쪽에는 icon-arrow를 화살표를 나타내는 클래스를 만들었다. 아티클 컨텐츠 영역은 컨텐츠 왼쪽에는 h4태그와 스팬태그로 내용을, 반대쪽에는 이미지를 삽입하였다. 컨텐츠 전체 영역에 플렉스 비트윈을 적용했다. 하단에는 bottom클래스를 만들어 버튼 랩을 만들었다.
디자인 작업에서 전체 섹션11영역에 보더바텀과 패딩을 적용하고 ul태그에 마진 바텀을 적용하였다. 타이틀랩에 카운트 영역에 공간과 색상을 설정하고 h3도 컬러와 폰트를 적용하였다. 다음으로 icon-arrow영역에서 크기를 설정하고 백그라운드 컬러를 넣었다. 아티클 컨텐츠에 있는 컨텐츠 왼쪽 전체의 크기를 지정하고 h4의 폰트와 마진을 적용하였다. 이미지의 크기도 지정하였다. 버튼랩 영의 버튼의 크기와 이전 다음 버튼의 컬러를 지정하였다. 타이틀은 총 3개를 만들고 다음 영역으로 이동했다.
섹션12에서는 이미지 하단에 글이 들어간 내용으로 구성되어 있는데 마찬가지로 타이틀랩을 작성하고 ul태그에 플렉스 비트윈을 적용한 상태에서 li태그 안에 img와 h4, span태그로 내용을 작성해 주었다. 디자인작업으로 마찬가지로 섹션 12영역에 패딩과 보더바텀을 적용하고 타이틀랩에 마진 바텀을 적용한 뒤, li태그 영역의 크기를 설정했다. li태그 안에 이미지는 li태그의 width 100%로 설정하고 보더값을 적용하였다. h4와 span태그의 폰트와 컬러, 간격을 설정하였다.
마지막으로 섹션 13에는 두 개의 div태그와 하나의 ul태그가 들어갔는데, 첫번째 div태그에는 타이틀랩이, 두 번째는 heading클래스로 플렉스 비트윈을 적용하였고 마지막 ul태그에는 li a태그로 5개의 컨텐츠를 작성하였다. 헤딩 영역은 인포 영역에 h4태그와 span태그로 내용을 입력하고 이미지를 삽입하였다. 섹션 13영역의 패딩 탑을 넣어주고 타이틀랩에는 마진 바텀을 적용하여 주었다. 헤딩영역 하단에도 마진을 적용해주고 헤딩 인포 영역에 width를 설정해 주었다. 스팬태그에 폰트를, 이미지에는 크기와 보더를 지정해주었다. ul의 a태그에는 디스플레이를 블럭으로 설정하고 말줄임표시를 설정하고 a태그 앞에는 기호가 오도록 배치해주었다. 이로서 네이버 뉴스 연예페이지 작업을 완료했다.
