• 이윰빌더 시즌 4
  • 테마/스킨상점
이윰

테마 & 스킨

이윰빌더 [시즌4] 테마의 구조도

그누보드5(영카트5), 빌더, 테마, 스킨의 구조를 설명합니다.

G5 / YC5

BUILDER

THEME

SKIN

  • THEME

    헤더와 풋터 및 사이드 레이아웃의 골격을 갖춘 디자인 된 웹사이트를 테마라 말합니다.
    이윰에서는 이 테마를 하나의 상품으로 배포 및 판매를 하고 있습니다.

  • SKIN

    게시판을 비롯해 다양한 스킨들이 존재하며 이 스킨들은 테마에 포함됩니다.
    스킨을 추가하는 경우엔 테마구조를 참고해 해당 스킨 폴더에 업로드 합니다.

테마 구조

테마는 디자인 영역을 담당하며 /theme/'테마명'/ 폴더에서만 표현됩니다.

  • theme / 테마명
    • css 1
      • common-nr.css
      • common.css
      • custom.css
      • style-nr.css
      • style.css
    • emoticon 2
    • image 3
    • js 4
    • page 5
    • plugins 6
    • shop 7
      • index.html.php
      • shop.head.html.php
      • shop.side.html.pnp
      • shop.tail.html.pnp
    • skin 8
      • board
      • connect
      • countdown
      • ebcontents
      • eblatest
      • ebslider
      • emoticon
      • faq
      • group
      • member
      • move
      • mypage
      • new
      • newwin
      • outlogin
      • paging
      • poll
      • popular
      • push
      • qa
      • ranking
      • search
      • shop
      • signature
      • tag
      • tagmenu
      • visit
    • head.html.php 9
    • head.sub.html.php 10
    • index.html.php 11
    • misc.html.php 12
    • side.html.php 13
    • tail.html.php 14
    • tail.sub.html.php 15
기본 메인 레이아웃 출력 구조
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

테마에 사용된 자바스크립트 플러그인 모음

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 파일