테마 & 스킨
이윰빌더 [시즌4] 테마의 구조도
그누보드5(영카트5), 빌더, 테마, 스킨의 구조를 설명합니다.
G5 / YC5
BUILDER
THEME
SKIN
-
THEME
헤더와 풋터 및 사이드 레이아웃의 골격을 갖춘 디자인 된 웹사이트를 테마라 말합니다.
이윰에서는 이 테마를 하나의 상품으로 배포 및 판매를 하고 있습니다. -
SKIN
게시판을 비롯해 다양한 스킨들이 존재하며 이 스킨들은 테마에 포함됩니다.
스킨을 추가하는 경우엔 테마구조를 참고해 해당 스킨 폴더에 업로드 합니다.
테마 구조
테마는 디자인 영역을 담당하며 /theme/'테마명'/ 폴더에서만 표현됩니다.
기본 메인 레이아웃 출력 구조
HEAD
INDEX
SIDE
TAIL
- HEAD : /theme/head.html.php
- INDEX : /theme/index.html.php
- SIDE : /theme/side.html.php
- TAIL : /theme/tail.html.php
쇼핑몰 메인 레이아웃 출력 구조
SHOP.HEAD
SHOP.INDEX
SHOP.SIDE
(출력설정시)
(출력설정시)
SHOP.TAIL
- SHOP.HEAD : /theme/shop/shop.head.html.php
- SHOP.INDEX : /theme/shop/index.html.php
- SHOP.SIDE : /theme/shop/shop.side.html.php
- SHOP.TAIL : /theme/shop/shop.tail.html.php
디렉토리 구조
이윰빌더 [시즌4] 테마 디렉토리 구조
이윰빌더 테마 폴더 내 총 8개의 폴더가 구성되어 있으며 각각의 폴더 내 포함된 파일들의 역활에 대해 알아봅니다.
1 css
테마의 전체적인 레이아웃 및 기초가 되는 스타일 설정 파일들로 구성
- common-nr.css: 이윰 테마의 비반응형 레이아웃 설정에 공통적으로 사용되는 CSS 파일
- common.css: 이윰 테마의 반응형 레이아웃 설정에 공통적으로 사용되는 CSS 파일
- custom.css: css폴더 내 우선순위가 제일 높은 파일입니다. 테마에 이미 적용되어 있는 스타일을 변경하고자 할때 다른 css파일의 클래스를 넣어 재설정 해 주면 적용됩니다.(또는 본인만의 스타일설정을 이 파일에서 만들면 관리가 편합니다.)
- style-nr.css: 해당 테마의 비반응형 레이아웃 설정에 사용된 CSS 파일
- style.css: 해당 테마의 반응형 레이아웃 설정에 사용된 CSS 파일
2 emoticon
글쓰기 / 댓글쓰기 시 나오는 이모티콘 이미지
3 image
테마에 사용되는 이미지파일을 업로드
4 js
테마에 사용되는 기본적인 js 파일
- app.js: 테마에 사용되는 스크립트 소스들을 담음.
5 page
개별 일반페이지를 추가하여 작업하실 수 있습니다.
- page 폴더 내 aboutus.html.php 파일을 생성하였다면 아래와 같이 페이지를 불러옵니다.
- ex) http://사이트주소/page/?pid=aboutus
6 plugins
테마에 사용된 자바스크립트 플러그인 모음
-
backstretch: 로그인 페이지 뒷배경 변하는 효과
http://www.jquery-backstretch.com/ -
Bootstrap: 부트스트랩
http://bootstrapk.com/ -
clipboard: 클릭 시 클립보드에 복사
https://clipboardjs.com/ - eyoom-form: 이윰폼
-
fakeLoader: 페이지 로딩시 액션 소스
http://joaopereirawd.github.io/fakeLoader.js/ -
font-awesome: 폰트 어썸 5
http://fontawesome.io/ -
fotorama: 이미지 슬라이더
http://fotorama.io -
imagesloaded: 이미지 로드 감지
https://imagesloaded.desandro.com/ -
infinite-scroll: 무한스크롤
https://github.com/paulirish/infinite-scroll -
elevatezoom: 쇼핑몰 상품 돋보기 기능
http://www.elevateweb.co.uk/image-zoom -
magnific-popup: 라이트박스
http://dimsemenov.com/plugins/magnific-popup/ -
masonry: 이미지 정렬 - 갤러리 보드 스킨 목록
https://masonry.desandro.com/ -
perfect-scrollbar: 해당 영역에 스크롤바 생성
https://noraesae.github.io/perfect-scrollbar/ -
prism: 코드하이라이트
http://prismjs.com -
scroll-tabs: 아웃로그인 스킨 탭 메뉴 스크롤
http://joshreed.github.io/jQuery-ScrollTabs -
sidebar: sidebar 플러그인 - 아웃로그인 스킨에 사용
http://jillix.github.io/jQuery-sidebar/ -
slick: 슬라이드(캐러셀) 플러그인
http://kenwheeler.github.io/slick -
sly: scroll-tabs 같은 플러그인
http://darsa.in/sly/ -
stick-kit: 좌우 레이어 중 높이가 낮은 레이어가 따라 내려오는 기능
http://leafo.net/sticky-kit/ -
sweetalert: 경고창
https://sweetalert.js.org/ -
typed: 텍스트 타이핑 효과
https://mattboldt.com/demos/typed-js/ -
venobox: 라이트박스 - 게시판 이모티콘 출력 라이트박스
http://veno.es/venobox/
7 shop
쇼핑몰의 레이아웃 파일
- index.html.php : 쇼핑몰의 index 파일
- shop.head.html.php : 쇼핑몰의 head 파일
- shop.side.html.php : 쇼핑몰의 side 파일
- shop.tail.html.php : 쇼핑몰의 tail 파일
8 skin
게시판, 최신글, 아웃로그인 등 테마의 모든 개별 스킨들을 모아둔 폴더
- board : 게시판 스킨(basic, gallery, webzine 등)
- connect : 현재 접속자 스킨
- countdown : 공사중 스킨
- ebcontents : 테마 콘텐츠 스킨 (관리자모드, 편집모드에서 내용 입력/수정)
- eblatest : 테마 최신글 스킨 (관리자모드, 편집모드에서 설정/수정)
- ebslider : 테마 슬라이더 스킨 (관리자모드, 편집모드에서 내용 입력/수정)
- emoticon : 이모티콘 스킨
- faq : FAQ 스킨
- group : 최신글 그룹 스킨
- member : 로그인, 회원가입, 쪽지, 포인트, 스크랩 등
- move : 게시판 게시물 이동/복사
- mypage : 마이페이지, 마이홈, 팔로우등 커뮤니티 특화 기능
- new : 새글 게시판 스킨(회원 아이디로도 게시물 검색 출력)
- newwin : 팝업레이어 스킨
- outlogin : 아웃로그인 스킨
- paging : 페이징 스킨(게시판 등에 사용)
- poll : 투표 스킨
- popular : 인기검색어 스킨
- push : 푸쉬 메세지
- qa : QA 게시판 스킨(1:1문의)
- ranking : 랭킹 스킨
- search : 검색 스킨
- shop : 쇼핑몰 스킨(쇼핑몰 테마에만 사용)
- signature : 서명 스킨(게시판에 사용)
- tag : 태그 스킨
- tagmenu : 태그 리스트를 호출하여 출력
- visit : 사이트 통계(방문자, 회원수, 게시물수 등) 스킨
9 head.html.php
레이아웃 head 파일
10 head.sub.html.php
레이아웃 head.sub 파일
11 index.html.php
레이아웃 index 파일
12 misc.html.php
부가적으로 필요한 소스를 모아 tail에서 호출하여 사용
13 side.html.php
레이아웃 side 파일
14 tail.html.php
레이아웃 tail 파일
15 tail.sub.html.php
레이아웃 tail.sub 파일
