모바일 테마 제작¶

모바일 테마는 기본 반응형 테마와 달리 모바일 환경에 최적화된 테마입니다.
모바일 테마는 적응형 환경에서만 사용 가능하며, PC와 MOBILE 레이아웃을 별도로 운용하고자 할 때 사용합니다.

기본 제공되는 템플릿 코드에는 반응형 웹 코드만 적용되어 있습니다.

반응형 & 적응형

반응형: 모든 디바이스에서 최적화된 화면을 제공합니다.
디자인과 레이아웃이 화면의 크기에 따라 자동으로 조절됩니다.

적응형: 모바일, 태블릿, 데스크탑 등 특정 디바이스에 최적화된 화면을 제공합니다.
기기의 크기에 따라 미리 만들어진 디자인과 레이아웃을 불러옵니다.

모바일 옵션 설정하기¶

모바일 테마의 제작 및 확인을 위해 적응형 옵션 설정이 필요합니다.
.env 파일의 IS_RESPONSIVE 값을 True로 변경해야 합니다.

# 웹사이트 표시 방법 (반드시 문자열로 입력해야 합니다)
# "True" (기본값) : 반응형 웹사이트 (참고: 반응형 템플릿만 제공합니다.)
# "False" : 적응형 웹사이트
IS_RESPONSIVE = "True"

테마 복사하기¶

기본 테마는 반응형으로 되어있으며, 모바일 테마와 거의 동일한 구조를 가지고 있습니다.
따라서 기본 테마를 그대로 복사하여 모바일 테마를 제작할 수 있습니다.

모바일 테마를 만들려면, 모든 템플릿을 만들어야 하나요?

모든 모바일 템플릿을 만드는 것은 필수가 아닙니다.
모바일 경로에 템플릿 파일이 없을 경우 자동으로 기본(반응형) 템플릿 파일을 사용하기 때문에, 필요한 템플릿만 만들어도 가능합니다. 기본 테마와 동일한 경로로 구성하면 됩니다.

1. 기본 테마 복사하기¶

theme/테마명/ 폴더를 복사하여 theme/테마명/mobile/ 폴더 내부에 붙여넣습니다.

2. 필요없는 파일 삭제하기¶

모바일 테마에서 사용하지 않는 경로&파일은 삭제합니다.
(theme/테마명/mobile 내부의 파일입니다.)

alert_close.html
alert.html
mobile/
LICENSE
readme.txt
screenshot.png

3. 테마 구조 확인¶

최종적으로 아래와 같은 경로로 구성됩니다.

templates
└─  basic
    ├─  bbs
    ├─  board
    ├─  ...
    ├─  mobile
    │   ├─  bbs
    │   ├─  board
    │   ├─  ...
    │   ├─  base_sub.html
    │   ├─  base.html
    │   └─  index.html
    ├─  ...
    ├─  index.html
    ├─  LICENSE
    ├─  readme.txt
    └─  screenshot.png