2021-06-14, 개발일지

hj·2021년 6월 14일

학습한 내용

네이버 웹툰 카피캣 3,4 학습 내용입니다.

메인화면의 오른쪽 영역 입니다. footer 영역도 있습니다.

메인화면 오른쪽 부분은 새로운 베스트 도전만화, 노란색 배너 부분, 인기급상승만화, 30대 실시간 인기만화, 핑크색 배너 부분 총 5영역 입니다.

새로운 베스트 도전만화 영역
상, 중, 하 영역으로 나눕니다. 상단은 h3와 span 태그를 용합니다.
중간은 이미지 영역입니다.
하단의 제목과 아이디는 하나로 묶습니다. 제목은 h4로 처리합니다.
줄거리는 p태그를 사용합니다.

노란색 배너영역
높이값과 배경색만있는 영역입니다.
회색 border값이 존재하며 margin-bottom: 8px의 간격이 있습니다.

핑크색 배너 부분
높이값과 배경색이 있는 영역입니다
회색 border값이 존재하며 margin-bottom: 8px의 간격이 있습니다.

인기급상승 만화
헤더, 탭, 랭킹 3가지 영역입니다.
헤더는 h2를 사용합니다.

탭영역은 인기순, 업데이트 순으로 분류합니다.
회색 borde 영역이며 선택하는 효과로는 추가로 active 클래스를 주어서 border-bottom white 색으로 설정하여 랭킹부분과 이어진것처럼 보이게 됩니다.

랭킹영역은 ul, li 가 아닌 ol, li를 사용합니다.
숫자 rank는 span으로 만화제목은 a 태그로 처리하며 묶습니다.
랭크 상승 화살표및 순위는 div와 span태그를 사용합니다.
랭크 상승 화살표 표시는 사각형으로 대체합니다.
검은색은 그대로, 빨간색은 상승, 파란색은 하락 입니다.
flex로 가로정렬시킵니다.

제목은 a태그를 사용하여 inline-block으로 변경하고 width값과 말줄임표시를 위해
white-space: nowrap; text-overflow: ellipsis; 사용합니다.

30대 실시간 인기만화
인기급상승 만화영역과 헤더, 탭부분은 동일합니다.
랭킹부분에서 순위 숫자는 span 태그를 사용하며 가운데 가아닌 상단에 위치하여 top:-10px 설정 입니다.

이미지 부분은 flex로 컨텐츠는 왼쪽으로 각아이템들은 가운데 정렬 시켜줍니다.
상단은 만화제목이며 하단은 작가명입니다.

오른쪽의 검은색박스와 숫자는 인기급상승 만화영역과 동일합니다.

footer 영역입니다.

왼쪽, 오른쪽, 하단 영역 나눕니다.
flex를 사용하여 width 는 50%로 설정합니다.

상세화면입니다.

상세화면 레이아웃 구성입니다.
상세화면의 오른쪽 영역은 메인화면의 오른쪽 영역과 동일합니다.
홈 네비 밑에 요일별, 장르별, 작품별 네비가 있습니다.
요일전체, 월요웹툰 ~ 목요웹툰 네비가 있습니다.
신규웹툰, 배너, 요일별 전체 웹툰, footer 가 있습니다.

요일전체 아래에 선택되었다는 표시를 클래스를 추가하여 표시하비다,
신규웹툰에서는 나중에 나오는 태그가 위에 표시되는점을 이용해서 이미지 태그 다음 span태그를 이용해서 new 파란색 글자를 이미지와 겹치게 만듭니다.
제목은 h3, 작가명은 span, 줄거리는 p 태그를 사용합니다.

배너(검은색 박스)로 높이값과 배경을 추가합니다.

요일별 전체 웹툰
타이틀 부분의 제목은 h2, 필터메뉴는 ul, li를 사용합니다.
월~일웹툰 리스트 부분은 ul, li 그리고 li 태그안에 ul, li 태그를 사용하여 리스트안에 리스트 형태로 만듭니다.

밖의 ul은 가로형태로 flex를 사용합니다.
align-items: stretch; 로 설정하여 전체 아이템이 보이도록 설정합니다.