오늘은 네이버 블로그 페이지를 카피캣해보았다. 이전에 네이버 index페이지의 블로그 부분의 a태그에 블로그.html을 연결하여 새롭게 파일을 만들었다. 파일의 형식은 webtoon.html에서 그대로 복사해오고 바디 부분만 새롭게 작성했다. 오늘은 블로그 페이지의 상단 영역과 메인의 왼쪽부분을 작업했다.
먼저 설계도면 작업으로 헤더 영역을 작성했다. 헤더는 블로그 헤더로 id를 만들고 그 안에 div태그로 블로그 헤더 상단 영역과 블로그 헤더 네비 부분을 만들었다. 헤더-top영역은 다시 컨테이너로 묶고 탑의 left영역과 right부분을 각각 작성했다. 왼쪽은 검색창과 버튼 영역과 통합검색의 버튼영역을 따로 만들고, 오른쪽은 로그인과 버튼 영역을 만들었다. 네비 태그영역에서는 오른쪽과 왼쪽의 네비 내용을 ul li태그로 감싸서 작성하였다. 첫번째 오는 li태그안에는 class로 on을 생성했다.
상단 영역에 대한 css작업으로 넘어와 전체 컨테이너 영역의 width값과 마진 값을 적용하고 헤더-top영역에 높이와 백그라운드 컬러, 보더 값을 적용하였다. 상단의 블로그 컨테이너와 헤더 왼쪽 영역에 디스플레이로 플렉스를 적용하고 h2영역과 a태그의 컬러와 폰트를 지정했다. 인풋영역과 검색영역을 감싸는 부분의 디스플레이를 플렉스로 적용하고 공간의 크기를 설정했다. 인풋창의 크기와 백그라운드컬러, 보더를 설정하고 인풋창에 디폴트로 들어간 아웃라인을 해지했다. 상단 오른쪽에 로그인 버튼에 대한 디스플레이를 인라인 블럭으로 지정하고 보더값과 패딩, 마진값을 적용했다. 메뉴 버튼은 간략하게 공간과 보더값을 지정했다.
상단 네비 부분에서도 동일하게 디스플레이를 플렉스로 설정하고 ul의 li태그 안에 높이와 마진값을 적용하고 보더 바텀은 투명색으로 지정했다. li태그 중에 on이 적용된 태그에는 보더 바텀에 초록색을 적용했다. 각각의 a태그는 디스플레이를 블럭으로 설정하고 높이와 너비값을 지정하였다. 라인헤이트를 적용하여 y축으로 중앙정렬되게 하였다. 네비태그 오른쪽도 왼쪽과 마찬가지로 적용했는데, li태그 중 on이 들어간 클래스가 있는 a태그에는 보더값을 rgba의 값으로 적용했다. 나머지 li태그의 a태그도 보더와 백그라운 컬러, 폰트를 설정해주었다.
메인의 설계도면은 위쪽과 아래쪽으로 나뉘는데, 위쪽의 핫 토픽 영역을 먼저 작성했다. 핫토픽의 왼쪽은 토픽 헤딩과 토픽 리스트로 클래스를 지정하고 페이지 영역도 pagination-wrap으로 작성해주었다. 오른쪽 영역은 배너와 페이지영역을 적어주었다.
css에서 메인의 핫토픽 영역 전체의 높이값과 백그라운드 컬러를 지정해주고 핫토픽 컨테이너 영역을 플렉스로 설정해주었다. 핫토픽의 왼쪽 영역은 포지션을 렐러티브로 설정하고 토픽 헤딩 부분의 디스플레이는 플렉스로 설정했다. 헤딩 파트의 들어가는 속성들의 폰트, 크기를 설정하고 i태그는 디스플레이를 블럭으로 적용하였다. 토픽 리스트들의 디스플레이는 플렉스로 설정하고 각각의 li태그는 포지션 렐러티브를, 이미지와 p태그는 포지션 앱솔루트를 설정하였다. 페이지가 있는 페이지네이션 영역을 포지션 앱솔루트로 감싸 좌표 기준점이 포지션 렐러티브인 부모를 기준으로 되게 탑과 라이트 값을 적용하고 페이지네이션의 a태그의 크기와 컬러, 보더값을 설정하였다. 핫토픽의 오른쪽 영역은 포지션 렐러티브로 설정하고 토픽의 배너의 크기를 설정하였다.
다음으로 메인의 하단에 컨텐츠 부분을 작성했다. 컨텐츠는 블로그 메인 레프트와 라이트로 나뉘었는데, 이번 시간에는 레프트 영역에 대해 진행했다. 레프트 영역 가장 위쪽에 공지로 로그아웃 상태를 알리는 글을 p태그로 작성해주고 아래에 blog-article영역을 작성하여 아티클의 nav영역과 lists영역을 ul과 li태그를 이용하여 작성해주었다.
디자인 영역으로 넘어와서 메인의 컨텐츠 전체 영역에 디스플레이를 플렉스로 설정해주고 왼쪽 영역 전체의 width를 지정했다. 공지 영역의 색상을 흰색으로 하고 p태그의 폰트와 라인헤이트를 설정했다.
다음으로 아티클 영역의 네비 파트의 색상과 보더값을 지정하고 il태그의 디스플레이를 플렉스로 설정했다. 아티클 리스트들의 위드 값을 100%로 설정하고 리스트 li의 a태그는 디스플레이를 블럭으로 설정했다. 리스트 프로필 안에 이미지의 크기를 설정하고 보더 레디우스로 원형으로 만들어줬다. 프로필의 h3와 p태그의 폰트와 컬러를 설정했다. 리스트의 h2태그와 패러그래프의 마진 탑을 설정하고 아래 코멘트 영역의 폰트와 마진을 적용하였다.
