오늘은 네이버 뉴스페이지를 카피캣하였다. 이전에 홈페이지 html파일에 뉴스 탭을 추가하고 파일을 연결해 주었다. 이전 내용을 복사하고 body부분만 새롭게 작성했다. 뉴스 페이지는 상단 헤더영역 안쪽으로 상단과 하단 네비태그 영역으로 구분되어있고, 그 아래에 헤드라인 파트와 메인 파트로 나뉘었다. 상단 헤드라인파트까지 작성해보았다.
먼저 상단의 헤더영역을 작성했다. 전체 헤더 영역안에 뉴스 컨테이너를 작성하고 그 안에 플렉스를 적용하기 위한 div태그를 넣는다. 헤더 왼쪽에는 플렉스 스타트로 ul li태그로 내용을 작성하고 첫번째 li태그 안에 on으로 클래스를 작성했다. 오른쪽 헤더 영역에는 플렉스 엔드를 클래스로 적고 로그인 버튼과 버튼 메뉴를 작성했다. 아래쪽 서브 네비태그 안에도 뉴스컨테이너를 넣고 헤더영역과 동일하게 div태그 안에 뉴스 플렉스 비트윈을 작성했다. ul li로 네비영역을 작성하고 오른쪽에는 인풋태그와 버튼태그를 삽입했다.
해당내용을 바탕으로 css작업을 진행했다. 먼저 뉴스 전체 컨테이너에 대한 크기를 설정하고 미리 설계도면에서 작성한 flex값을 각각 작성해주었다. 미리 between, start, end를 html에서 적용시켜서 css공간을 많이 차지하지 않도록 하였다. 뉴스 헤더에 백그라운드 컬러를 적용하고 헤더의 왼쪽 부분에 패딩을 적용하였다. 각각의 li태그에 폰트사이즈를 입력하고 on로 클래스를 적용한 부분의 폰트를 키웠다. li의 a태그 앞에 기호를 넣고 가장먼저 오는 a태그 앞에는 기호를 제외시켰다.
헤더의 오른쪽에 로그인 버튼의 디스플레이를 블럭으로 적용하고 공간과 보더 값을 적용시켰다. 라인헤이트로 y축으로 중앙정렬시키고 컬러와 폰트사이즈를 적용했다. 로그인 우측에 위치할 메뉴 버튼의 크기와 백그라운드 컬러도 설정했다. 보더 레프트와 라이트 값을 적용하였다.
헤더의 아래부분인 서브 네비의 디자인으로 백그라운드와 보더 값을 적용했다. 안에 들어가는 li태그의 with를 오토로 설정하고 마진 라이트로 여백을 주었다. li의 a태그도 위와 마찬가지로 디스플레이를 블럭으로 설정하고 보더 값을 투명으로 주었다. 첫번째 on이 들어간 클래스에는 보더 바텀 값을 적용하고 컬러도 설정하였다. 네비 우측에 인풋과 버튼태그의 공간을 설정하고 컬러와 패딩을 적용하였다. 인풋태그에 아웃라인이 적용되지 않도록 설정하였다.
다음으로 헤드라인의 html을 작성하였다. 헤드라인안에 뉴스 컨테이너를 넣고 그 안에 div태그로 헤드라인의 메뉴 랩과 리스트를 div와 ul태그로 작성하였다. 메뉴 랩은 다시 메뉴리스트와 서브리스트 두 개의 ul li로 나뉘었고 아래에 이미지가 나오는 리스트 부분을 ul li안에 a태그를 넣고 다시 그 안에 article로 하나의 리스트를 먼저 작성하였다. article안에는 h3으로 언론사를 넣고 div태그안에 이미지 랩을 넣어 내용을 작성하였다. 이미지랩은 이미지가 들어가는 영역과 아이콘과 설명이 들어가는 오버레이로 구성되어 있다.
해당내용에 대한 디자인작업을 했다. 뉴스 헤드라인 전체에 패딩 탑을 적용하고 뉴스 컨테이너 안에 보더 바텀과 패딩 바텀을 적용하였다. 메뉴랩과 그 안에 li태그에 마진 값을 적용하고 서브리스트 li의 a태그 앞에 기호를 삽입했다. 위와 마찬가지로 맨 앞에 오는 a태그의 앞에는 기호를 제외시켰다.
뉴스리스트에 li태그에 공간을 적용하고 a태그에 디스플레이를 블럭으로 적용했다. a태그 안으로 들어가서 아티클 파트는 포지션을 relative로 하고 아티클 안에 h3의 크기를 지정했다. 이미지 랩 또한 포지션을 렐러티브로 적용하고 이미지랩 안에 이미지를 포지션 앱솔루트로 적용하고 width와 height를 100%로 적용하였다. 나머지 오버레이 내용이 이미지 위쪽으로 나오도록 포지션을 앱솔루트로 적용하고 width와 height를 100%로 적용하였다. 백그라운드 컬러는 rgba로 적용하였다.
오버레이 안에 헤드라인 인포 영역을 포지션 앱솔루트로 넣어주어 레프트와 바텀 값이 적용되도록 하였다. 아이콘의 디스플레이는 블럭으로 지정하여 공간의 크기를 갖게 해주고 보더 레디우스로 원형으로 만들었다. 아이콘 옆에 위치할 내용의 div서랍의 width값을 지정해주고 각각의 span태그와 p태그의 폰트사이즈를 지정하였다.
마지막으로 헤드라인 아래에 들어갈 버튼영역의 설계도면 작업을 진행하였다. 언론사 리스트 하단에 div태그로 news-headline-arrows를 작성하고 플렉스 엔드를 적용하여 내용을 작성하였다. 이전, 다음을 설정할 버튼을 하나의 div태그에 버튼 랩으로 묶고 위로 올라가는 버튼은 바깥으로 따로 입력해주었다. css로 넘어가서 버튼 랩 안에 마진 라이트를 적용하고 버튼에 디스플레이 블럭을 적용하였다. 이전 버튼에는 보더 라이트 값을 적용하고 각각의 버튼에 색상을 넣었다. 메인의 전체적인 구성을 살펴본뒤 마무리했다.
