2021-06-15, 개발일지

학습한 내용

네이버 블로그 카피켓입니다.

작업 영역
1. 헤더 영역
2. 본문에서 왼쪽 영역

헤더영역

헤더영역은 윗부분(블로그 텍스트, 검색, 로그인 부분)과 하단의 네비 영역으로 나누어집니다.

상단부분은 블로그라고 적혀진 텍스트 부분과 검색영역을 left, 로그인부분을 right로 만들어 flex로 배치 시킵니다.

하단의 네비 영역은 왼쪽, 오른쪽으로 나누어집니다.
양쪽 모두 ul, li를 사용하며 가로열 배치는 flex를 사용합니다.
선택 표시 영역을 추가적인 클래스 추가로 표시해줍니다. 오른쪽 부분은 a태그를 사용합니다.

핫토픽 영역

헤더아래, 메인영역입니다.
왼쪽, 오른쪽 영역으로 나누며 양쪽 모두 오른쪽 상단에 페이지네이션이 있습니다.
왼쪽 영역에서 이미지는 width, hegiht가 100%이며 하단에 absolute와 bottom 0을 주어서 겹치게 합니다.
오른쪽은 배너 영역입니다.

메인영역의 왼쪽 부분

메인 영역안에서 핫토픽아래 부분입니다.

왼쪽과 오른쪽으로 나누어집니다.
flex를 사용하여 화면을 왼쪽과 오른쪽으로 나눕니다.

로그아웃 상태 영역이있습니다.
하단에는 네비 영역이 있습니다.
네비 영역아래로 게시글 컨텐츠 목록 영역이 있습니다.

네비게이션 영역은 ul, li, a 태그로 구성되며 flex를 ul에 적용합니다.

컨텐츠 목록은 왼쪽과 오른쪽 영역으로 나누지만 전체영역은 a태그로 클릭이 가능합니다.
왼쪽은 프로필, 타이틀, 본문내용, 공감과 댓글이 있습니다.
오른쪽 영역은 이미지 영역입니다.

학습한 내용 중 어려웠던 점 또는 해결못한 것들

헤더 부분 높이가 정상적으로 표시되지 않는점과 핫토픽 영역에서 페이지네이션 부분이 배너부분과 겹쳐져 패딩을 적용시켜 위로 올려야하는데 패딩이 적용이 안되어 곤란했습니다.

해결방법 작성

헤더부분은 오른쪽 영역까지 마무리해야 정상적으로 표시되었습니다.
핫토픽영역은 브라우저는 재실행하니 정상적으로 표시가 되었습니다.

학습 소감

기존 배웠던부분에서 점점 내용이 추가되는 느낌이며 pagination 이라는 새로운 용어를 알게되었습니다.