본 사이트는 반응형으로 제작되었으며 mobile은 가로 최대 480px, pc는 가로 최소 960px 에 맞춰 제작되었습니다.
481px~959px 은 모바일을 기준합니다.
body 태그에서 클래스로 지정해 줍니다.
기본적인 클래스는 tailwind를 이용해 이루어져 있으며 자체적으로 만든 커스텀 클래스가 있을 수 있습니다.
https://tailwindcss.com/docs/installation문서를 참고하시면 됩니다.
클래스에서 sm: 으로 시작되는 것은 가로가 최소 640px인 경우,
클래스에서 md: 으로 시작되는 것은 가로가 최소 768px인 경우,
클래스에서 pc: 으로 시작되는 것은 가로가 최소 960px인 경우를 의미합니다.
모든 태그에서 이러한 방식으로 반응형 작업이 이루어져 있으므로 코드 사용에 참고 하시기 바랍니다.
기본적인 화면 구성은 이렇습니다.
한 화면에 기본적으로 상단 광고영역, 모바일과 피씨 영역에 맞는 두개의 header div, 컨텐츠 영역, 컨텐츠 영역 안에서 플로팅 된채 모바일에서만 작동하는 div, 그리고 피씨버전에서만 보이는 footer.
이 요소들은 변하지 않고 전체 영역에서 공통적으로 적용되는 부분으로 각각의 요소가 피씨와 모바일에서 다르게 표현되도록 구성되어 있습니다.
이 공통 코드를 기준으로 헤더 영역이 3가지로 구분됩니다.
피씨 헤더는 어느 페이지에서나 동일한 구조를 가지지만 모바일에서 다르기 때문인데요.
유형 1 : 헤더가 없는 경우 - 로그인, 회원가입, 에러 페이지, 로딩페이지 등
유형 2 : webtoon, mine cubic, library, mypage 처럼 플로팅 헤더가 2개 있는 경우
유형 3 : 한뎁스 들어간 페이지들로 뒤로가기 버튼이 달려있는 헤더 영역이 있는 경우
로 나뉘어집니다.
유형 1 - 클릭해서 화면참조
유형 2 - 클릭해서 화면참조
유형 3 - 클릭해서 화면참조
컨텐츠 부분은 피씨 버전을 기준으로 다시 3가지로 나뉘어 집니다.
유형 1 : 1단 구성으로 웹툰 홈이 이에 해당 됩니다.
유형 2 : 2단 구성으로 웹툰 상세 페이지가 이에 해당됩니다.
유형 3 : 2단 구성의 오른쪽으로 광고영역이 배치되어 있는 것으로 대부분의 페이지가 이에 해당됩니다.
유형 1 - 클릭해서 화면참조
유형 2 - 클릭해서 화면참조
유형 3 - 클릭해서 화면참조
푸터는 공통으로 사용되나 웹툰뷰 화면에서만 (클릭해서 화면참조) 하단에 챙겨야 하는 스크립트가 있음
공통으로 사용되는 스크립트는 있으나 화면마다 적용되야 하는 스크립트가 따로 있을 경우 html페이지 내 하단에 마련해 두었으니 참고 부탁드립니다.