2021-06-11, 개발일지
학습한 내용
네이버 웹툰 화면의 상단영역과 왼쪽영역 카피캣 입니다.
레이아웃 구성
전체 페이지: 헤더, 왼쪽, 오른쪽 영역
헤더 영역 : 헤더 상단 , 헤더 하단
헤더 상단 : 왼쪽, 검색부분, 오른쪽
헤더 하단 : 왼쪽, 오른쪽
왼쪽 영역: carousel(슬라이더), 배너, 컨텐츠 영역
헤더영역
헤더영역은 상단과 하단으로 구성됩니다.
상단을 보면 만화|웹소설, 검색, 로그인 이렇게 3부분으로 나누어집니다.
레이아웃은 flex를 사용하여 x축으로 정렬합니다.
| 표시는 em 태그를 사용, 배경색으로 만듭니다.
검색영역은 input 태그와 button을 사용합니다.
input의 크기는 width: calc(100% - 35px);를 설정합니다 35px는 버튼 크기 입니다.
헤더영역의 하단부분 입니다.
왼쪽 : nav, ul, li
오른쪽 : div, i, a 를 사용하며 flex로 배치합니다.
on 클래스로 현재 페이지를 알려주는 녹색배경을 추가합니다.
오른쪽 부분(온천마을 ~ )에 마우스를 올렸을경우 밑줄이 생기도록 합니다.
a:hover {
text-decoration: underline;
}왼쪽, 슬라이드 영역
왼쪽영역입니다. 메인태그를 사용합니다.
슬라이드, 배너, 컨텐츠 들이 있습니다.
크게 왼쪽과 오른쪽으로 나누어 집니다.
오른쪽은 상단과 하단으로 나누어집니다.
float를 사용하여 왼쪽과 오른쪽을 나눕니다.
왼쪽 영역에서 선택된 글자의 색을 변경해 줍니다.
오른쪽 영역의 크기는 width: calc(100% - 112px); 입니다. 112px는 왼쪽 영역의 크기입니다.
오른쪽 영역의 상단은 이미지 하나로 구성됩니다.
오른쪽 영역의 하단 영역에서 가운데에 이미지 4개, 양끝에 버튼 1개씩 총 2개가 들어갑니다.
flex로 이미지 4개를 가로배치 시킵니다.
양끝 버튼은 position: absolute; 설정하여 왼쪽 버튼은 left:0; top:0으로, 오른쪽 버튼은 top: 0; right: 0;로 이동시켜줍니다.
배너 영역
검색은 영역으로 대체합니다.
컨텐츠 영역
컨텐츠 영역은
장르별 추천웹툰, 베스트 도전 추천웹툰, 장르별 인기 단행본 만화 총 3개로 구성됩니다.
장르별 추천웹툰 영역 입니다.
제목, 상단 네비, 하단 네비, 컨텐츠 아이템 6개 로 구성되어있습니다.
네비는 nav, ul, li를 사용합니다.
상단 네비에서 에피소드가 클릭되었다는 표시를 위해 border-bottom 녹색을 지정해줍니다.
다만 하단의 회색 border 과 겹치지 않기때문에 margin-bottom: -1px;을 설정하여 겹치게 해줍니다.
하단 네비에서는 flex 사용하여 오른쪽 배치를 시킵니다.
컨텐츠 아이템들은 ul, li, img, div태그 h4, p, span 으로 구성됩니다.
ul 태그에 flex를 적용시켜 한줄에 3개의 아이템이 표시되게 합니다.
베스트 도전 추천웹툰 영역
리스트 태그 안에 리스트 태그가 들어간 형태입니다.
밖에 있는 리스트(에피소드, 옴니버스, 스토리)는 flex를 사용하여 가로 배치를 합니다.
리스트안에 있는 아이템은 이미지와 텍스트의 가로축이므로 li태그안에 flex를 사용하여 가로배치를 합니다.
평점은 빨간색 박스로 대채 합니다.
장르별 인기 단행본 만화 영역은 베스트 도전 추천웹툰 영역과 동일합니다.
학습한 내용 중 어려웠던 점 또는 해결못한 것들
없습니다.
해결방법 작성
학습 소감
전체적으로는 헤더영역을 제외한 나머지 부분이 쉽지는 않다고 느꼇습니다.
리스트안에 리스트를 넣는 부분은 복잡했만 내용물이 많아 모바일 버전도 궁금해지는 화면입니다.
