오늘은 지난시간에 이어 네이버 웹툰 카피캣을 진행하였다. 이전시간에 작업했던, 웹툰 홈 페이지의 상단과 메인 왼쪽에 이어, 오늘은 메인의 우측과 하단 푸터 부분, 그리고 웹툰 디테일 페이지도 완성하였다. 작업한 내용이 많아 간략하게 작성하겠다.
먼저 웹툰의 홈페이지의 메인 우측을 작업했다. 메인 우측은 베스트 도전이 있는 webtoon-challenge-wrap과 배너가 있는 webtoon-banner-type-1, 인기 순위가 들어가있는 webtoon-popular, 연령별 인기만화가 들어가있는 또다른 webtoon-popular, 그리고 다른 형태의 배너 webtoon-banner-type-2으로 구성되어 있다. 각각의 설계도면을 작성하고 css작업을 진행하였다.
먼저 전체 메인 오른쪽에 대한 플롯을 지정하고 가장 위 챌린지 랩 부분의 크기와 컬러, 마진과 패딩값을 적용하였다. 그리고 안에 들어가는 내용의 폰트와 컬러, 이미지의 크기와 위치를 지정하였다. 챌린지 랩의 아래 정보 부분은 디스플레이를 플렉스로 적용하여 좌우로 배치되게 하였다. 그리고 마우스를 올렸을때 밑줄이 표시되도록 텍스트 데코레이션을 적용하였다. 그 밑에 올 배너에는 마진 바텀값을 넣고 각각의 배너의 크기와 색상을 지정했다.
그 다음으로 인기 순위 부분의 디자인 작업을 했다. 마찬가지로 헤더 부분에 디스플레이를 플렉스로 적용하고 각각의 폰트사이즈와 컬러를 적용했다. 인기순, 업데이트 순 부분도 좌우로 정렬되게끔 플렉스를 적용했다. 아래에는 보더 값을넣었다. 인기순 아래에 만화의 랭킹 순위를 넣은 것을 토대로 컨텐츠의 디자인 작업을 진행하였다. 만화제목은 디스플레이를 인라인 블럭으로 지정하고 오버플로우, 위드값 등을 적용하여 말줄임표 효과를 넣었다. 순위의 하락과 변동없음, 상승을 컬러를 다르게 적용해서 표시했다.
그리고 그 다음 연령별 순위가 나타난 리스트는 이미지가 포함되어 있었다. 먼저 이미지 왼쪽에 랭크 순위가 나타난 부분이 이미지의 위쪽에 붙어있게 포지션을 렐러티브로 하여 탑을 적용했다. 안에 내용에 해당하는 너비와 마진라이트 등을 적용하였다. 구성은 동일하나 약간의 디테일의 차이가 있어 위의 인기순위의 내용을 복사하여 추가적인 내용만 작업하였다.
다음으로 웹툰 홈페이지의 하단을 작업하였다. 하단은 풋터로 작성하고 오른쪽과 왼쪽을 나누어 작성하였다. 가장 하단에는 p태그로 저작권관련 내용을 작성하였다. css로 넘어와 풋터의 패딩값을 적용하고 폰트 사이즈를 조정했다. 디스플레이를 플렉스로 적용하고 중앙정렬이 되게 하였다. 풋터의 오른쪽과 왼쪽의 크기를 조정하고 오른쪽에 보더 레프트 값을 지정하였다 내용 사이에 'ㅣ'기호를 넣기 위해 디스플레이를 인라인-블럭요소로 지정하고 내용을 넣었다. 네이버 회사가 들어가는 부분은 대문자로 표시한다는 뜻으로 텍스트 트랜스폼을 uppercase로 적어주었다.
이어서 웹툰 디테일 페이지를 작업했다. 헤더 부분은 이전에 작업한 웹툰페이지의 상단과 동일하므로 붙여넣었고 메인부분을 작업했다. 메인의 상단에는 네비게이션 탭이 있어 네비 태그를 넣고 전체 웹툰 컨테이너 안에 요일별, 장르별 내용을 기입하였다. 그리고 메인의 왼쪽부터 작업하는데, 왼쪽 가장 상단에 또다른 네비태그가 존재하여 nav-2로 클래스를 지정했다. 네비태그에 요일을 적어주고 아래로 넘어가 이미지와 내용이 각각 3개 나열된 화면의 설계도면을 ul li태그를 이용하여 적어주었다. 각각의 내용은 webtoon-this-list로 클래스를 지정했다. 그 아래에는 웹툰페이지와 동일한 배너가 들어가있어 복사 붙여넣기를 했다.
해당영역에 대한 디자인 작업을 진행했다. 상세페이지에서 패딩탑 값을 해지하고 먼저나오는 네비 태그의 백그라운드 컬러와 보더 바텀 값을 지정하였다. ul태그에 플렉스를 적용하고 li태그의 마지막은 마진라이트를 적용하지 않았다. 내용이 들어가는 부분은 디스플레이를 블럭으로 적용하고 텍스트를 중앙에 위치시켰다. nav-2도 디스플레이를 플렉스로 지정하고 여기서 li태그의 on상태의 보더 바텀과 위치를 맞추기 위해 투명색의 보더 바텀을 지정했다. 하단의 이미지가 있는 this-list의 디스플레이를 플렉스로 설정하고 이미지와 내용이 있는 부분은 포지션 렐러티브로, 이미지와 내용이 있는 new-mark부분은 포지션 앱솔루트를 설정하였다. 나중에 나온 뉴마크의 포지션으로 인해 뉴마크가 이미지의 위에 위치하게 된다. 나머지 내용의 폰트와 위치를 조정하였다.
다음으로 요일별 웹툰이 나오는 영역의 설계도면을 작성했다. 요일별 웹툰은 이전에 웹툰 홈페이지의 왼쪽 영역 중 하나와 같이 각각의 요일을 ul li태그로 감싸는 방식으로 진행했다. 요일별 웹툰과 인기순이 나오는 영역을 먼저 타이틀 랩으로 묶어 적고, 내용을 다시 day-lists로 span과 ul li를 사용하여 작성하였다. 각각의 리스트는 마지막 리스트를 7개, 나머진 4개로 작성했다.
디자인 작업으로 넘어와서 요일별 전체 영역에 패딩 탑을 적용하고 타이틀 랩 영역과 ul태그에 플랙스를 적용해주었다. ul태그는 justify-content를 플렉스 앤드로 적용하여 오른편에 위치하게 만들었다. li태그의 마진라이트는 마지막 li를 제외하고 적용하였고 각각의 리스트의 폰트와 너비를 지정하였다. 가장 첫번째 리스트에만 백그라운드 컬러와 보더를 다른 색으로 지정했다. 요일별 웹툰 안에 이미지가 들어가는 부분의 위드를 100%로 설정하고 내용의 폰트 사이즈를 지정했다. list를 묶는 lists의 얼라인 아이템을 flex-start로 지정하여 웹툰 사이의 보더가 끊기지 않게 설정하였다.
디테일 페이지의 우측과 아래쪽 풋터는 웹툰 홈페이지와 동일하여 복사 붙여넣기를 하고 작업을 완성했다.
