오늘은 네이버 웹툰 페이지 카피캣을 진행해 보았다. 이전에 만들었던 네이버 메인 페이지에 컨테이너에 웹툰으로 a태그를 추가해서 웹툰을 눌렀을 때 웹툰 페이지로 이동하게끔 작업했다. html은 webtoon과 webtoon_detail 파일을 추가해서 설계도면을 따로 작성했다. 사이트에서 웹툰을 누르면 네이버 만화 홈으로 이동하고 홈 상단에서 웹툰 페이지로 다시 이동이 가능하다. 그래서 웹툰과 웹툰 디테일을 나누어 작업했다.
먼저 웹툰 페이지의 설계도면 작업을 시작했다. 독타입 html은 기존에 index 페이지에서 복사해서 바디 태그만 새롭게 작성하였다. 먼저 상단의 헤더 영역을 작업했다. 헤더에 아이디로 웹툰-헤더를 작성하고 웹툰 컨테이너 안에 헤더 왼쪽과 오른쪽을 작성했다. 헤더 왼쪽에 h2 코드와 'ㅣ'기호 삽입을 위한 em과 h3 태그를 넣어 작성하고 검색 바로 들어갈 공간을 div 태그로 묶어 웹툰-헤더-인풋-랩으로 설정하여 안에 인풋과 버튼 태그를 작성해 주었다. 헤더의 오른쪽에는 a 태그로 로그인과 버튼 메뉴를 간략하게 작성했다.
헤더의 상단부분에 대한 디자인 작업을 진행하였다. 먼저 width 값과 마진을 적용하고 헤더의 백그라운드 컬러를 흰색으로 적용하였다. 웹툰 컨테이너에 대해 디스플레이로 플렉스를 적용하고 스페이스 비트윈으로 배치가 되게 적용하였다. 상단부분에 보더 바텀 값과 패딩을 적용시키고 상단 왼쪽에 다시 디스플레이를 플렉스로 적용하고 너비 값을 픽 스시 켰다. h2와 h3에 폰트를 정하고 그 사이에 들어가는 기호의 모양과 색을 설정했다. 검색 바가 들어가는 메뉴에 디스플레이와 높이, 너비를 설정하고 보더 값을 적용하였다. 검색의 인풋에 크기를 100%에서 버튼-서치의 너비를 뺀 크기로 설정하고 패딩을 설정하였다. 상단 오른쪽에 로그인 버튼의 보다 오 패딩, 마진 라이트를 적용하고 옆의 메뉴는 색상을 지정하였다.
다음으로 상단 아래쪽에 헤더 내비게이션 영역의 html을 작성하였다. nav 영역도 마찬가지로 컨테이너로 묶고 네비 태그 안쪽에 ul과 li에 a 태그로 내비게이션 영역 4가지를 작성하였다. 첫 번째 li 태그에 있는 홈에 클래스로 on을 지정했다. 네비 태그 하단에는 우측에 위치할 링크 랩을 작성했다. i 태그로 클래스를 icon-ex-mark로 지정하고 a 태그로 웹 소설 명을 적었다.
상단의 내비게이션 파트의 css 작업을 진행했다. 먼저 보더 바텀을 설정하고 전체 컨테이너에 대해 디스플레이를 플렉스로 지정하여 x축 정렬이 되게 했다. ul 태그 안에도 플렉스를 다시 적용해 주고 li 태그의 너비는 오토로 지정했다. 기존에 설정한 여러 li 태그 중 on 클래스를 가지고 있는 태그는 a 태그에서 백그라운드 컬러를 그린으로 지정했다. 그리고 다시 a 태그에 디스플레이를 블록으로 지정해서 높이와 너비를 100%로 지정하고 라인 헤이트를 주어 y 축 중앙 정렬 효과를 주었다. icon-ex-mark에는 디스플레이를 인라인 블록으로 설정하고 컬러를 블랙으로 적용하였다. 헤더 링크의 랩에 있는 a 태그에는 버티컬 얼마인을 미들로 적용하고 가상 선택자로 텍스트 데코레이션을 적용했다.
다음으로 메인 부분의 설계도면을 작성했다. 메인은 크게 왼쪽과 오른쪽으로 나뉘었다. 오늘은 왼쪽 부분을 작업했는데, 우선 메인 태그로 role도 포함하여 설정하고 컨테이너 안에 메인 레프트를 넣었다. 메인의 왼쪽은 크게 carousel 영역과 배너 영역, 그리고 3개의 콘텐츠 영역으로 나뉘었다. div 서랍장 안에 webtoon-carousel과 webtoon-border를 지정하고 webtoon-border는 지난 시간에 적용한 보더 shop-border와 같이 미리 css에서 만들어놓은 코드를 html 상에 적용하였다. carousel 영역 왼쪽은 h2 태그와 p 태그, li 태그를 이용해 내용을 입력해 주고 li 태그 첫 번째는 클래스로 on을 지정했다. 캐러셀 오른쪽은 div 서랍장에 배너를 삽입하고 배너의 네비 클래스로 네 개의 이미지를 넣었다. 마지막으로 이미지들의 양옆에 들어갈 버튼을 a 태그로 작성했다.
메인 carousel영역에 대한 디자인작업을 진행했다. 먼저 전체 메인 컨테이너에 오버플로우를 히든으로 설정하고 레프트 전체 영역에 플롯 레프트를 적용하였다. 캐러셀 영역도 마찬가지로 오버플로우 히든을 적용하고 너비와 높이, 백그라운드 컬러를 진행했다. 캐러셀 왼쪽 영역의 플롯을 왼쪽으로 지정하고 패딩 값을 적용한 뒤 h2와 span과 p태그에 포트사이즈와 컬러를 적용하였다. ul과 li태그에는 마진탑과 마진 바텀을 적용하였다. 위에서 설정한 li태그 중 on클래스가 들어간 첫번째 li태그에 색상을 그린으로 적용했다. 캐러셀 라이트 영역에서는 플롯을 라이트로 적용하고 width값을 캐러셀 왼쪽의 위드값을 뺀 영역만큼 설정했다. 그 우측아래에 들어갈 배너와 이미지 크기를 설정하고 ul태그에 디스플레이를 플렉스로 적용했다. ul li에 크기와 마진값을 적용하고 버튼의 위치설정으로 레프트와 라이트, 탑을 적용하고 색상을 입혔다.
다음으로 캐러셀 하단에 배너를 작업하였다. 메인의 오른쪽에도 구분을 위한 색상과 크기를 지정한 상태에서 html에서 배너가 들어갈 div 서랍장을 설정한다. 배너는 간단하게 css에서 크기와 색상을 지정하였다.
그리고 이제 웹툰의 콘텐츠 영역의 설계도면을 작성하였다. 3개의 콘텐츠의 헤더 영역이 동일한 디자인으로 적용된 것을 사이트에서 확인하고 콘텐츠의 콘텐츠 헤더 안쪽에 h2 태그와 네비 태그 속 ul li 태그에 장르를 입력했다. 콘텐츠의 보디 안에는 상단 우측 아래에 위치할 내용을 적어준다. 그다음에 webtoon-content-col-3을 입력하여 이미지와 내용을 입력해 주었다. 다음의 콘텐츠와 구분을 두기 위해 li에서 클래스를 webtoon-content-col-type-1로 지정했다.
디자인 영역으로 이동해서 콘텐츠 영역의 전체 백그라운드 컬러를 설정하고 콘텐츠 헤더의 포지션을 렐러티브로 보더 바텀 값을 지정해 주었다. 패딩도 위쪽과 좌우에 적용하였다. 헤더 하단에는 패딩 값이 없으므로 따로 지정한 클래스의 패딩 바텀 값을 0으로 설정했다. h2와 span 태그의 폰트와 컬러를 지정하고 ul 태그의 디스플레이를 플렉스로 적용했다. li 태그의 width 값은 auto로 설정하고 li 태그 중 on이라는 class를 갖고 있는 a 태그에 보더 바텀 값을 적용해 주었다. 여기서 마진 바텀 -1픽셀을 넣어 기존의 보더와 겹쳐 보이게 했다.
콘텐츠의 보디 영역에서 전체 nav 영역에 패딩을 적용하고 ul 태그에 디스플레이를 플렉스로 적용했다. li 태그와 a 태그의 디자인 작업 뒤에 콘텐츠-col-3영역에서 각각의 타입의 높이와 너비를 지정하고 이미지와 h4, p 태그에 마진 바텀 값을 적용했다.
두 번째 콘텐츠도 첫 번째와 비슷한 구성이나 각각의 리스트에 또 다른 하위 리스트가 존재하므로 리스트에 또 다른 div 태그를 넣어 내용을 작성했다. 콘텐츠에 헤더를 넣고 콘텐츠 바디에는 위의 콘텐츠와 동일하게 col-3을 삽입하고 그다음에는 col-type-2를 입력하여 각각의 h3 태그와 webtoon-lists에 해당하는 ul 태그를 작성했다. 그렇게 총 3개의 웹툰 콘텐츠 col-type-2를 복사해서 만들고 디자인 작업을 진행하였다.
타입 2의 크기와 폰트사이즈를 적용하고 타입 2의 li태그의 디스플레이를 플렉스로 적용하였다. 리스트들의 이미지에 마진 라이트를 적용하고 인포 안에 들어가는 별점과 스코어의 디자인 작업을 했다. 두 개의 영역에 버티컬 얼라인을 미들로 설정하고 별점에는 인라인-블럭요소를 적용했다. 마지막으로 기존에 적용한 height값 2000px과 백그라운드 컬러를 지우고 웹툰 상단과 왼쪽 부분의 작업을 마무리했다.
