[EB BUSI 009] 테마 매뉴얼

설치

테마 업로드 후 설치 과정을 설명합니다.

  1. 1) 다운로드 받은 파일을 그누보드5(영카트5)가 설치된 서버 theme 폴더에 업로드 합니다.

    image
  2. 2) '관리자 > 환경설정 > 테마설정'에서 해당 테마에 테마적용 클릭합니다.

    image
  3. 3) 사이트로 이동하면 테마가 적용된 사이트를 볼 수 있습니다.

세팅

테마 설치 후 설정할 부분을 설명합니다.

  1. 1) 이윰 전용 게시판 스킨 eb_basic, eb_gallery를 선택합니다.

    image

레이아웃

레이아웃 구조와 스킨에 대해 설명합니다.

  1. /css/common.css : 이윰 테마의 공용 스타일 CSS 파일

  2. /css/style.css : 해당 이윰 테마의 스타일 CSS 파일(레이아웃과 메인 그리고 내용관리의 스타일등)

  3. /img/ : 해당 테마에 사용되는 이미지 폴더

  4. /js/app.js : 해당 테마에 사용되는 JS 소스

  5. /page/ : 내용관리(co_id)에 사용될 html 소스 파일들

  6. /plugins/ : 해당 테마에 사용되는 플러그인들

  7. /skin/ : 해당 테마에 사용되는 스킨들(이윰테마의 디자인으로 변경되어 제공)

  8. head.php : 상단의 레이아웃(로고, 메뉴, 로그인등)

  9. tail.php : 하단의 레이아웃(사이트 정보, 링크등)

  10. index.php : 사이트 메인 레이아웃

메인

메인 화면에 대해 설명합니다.
해당 테마는 animate.css(https://daneden.github.io/animate.css/) 플러그인과 appear.js(http://creativelive.github.io/appear/)을 이용해 스크롤시 애니메이션 효과가 출력됩니다.
해당 소스는 /eb_busi_009/index.php, /eb_busi_009/js/app.js, /eb_busi_009/skin/latest/busi009_portfolio/latest.skin.php 파일에 사용됩니다.
자세한 사용법에 대해서는 각 플러그인 링크를 참고하기 바랍니다.

image
  1. head.php

    헤더(상단)
    로고, 메뉴, 검색, 로그인, 서브페이지 배너등이 있습니다.

  2. 헤더 토글 버튼
    좌측상단 + 버튼을 클릭하면 About Us, Recent Portfolio, Contact Us가 출력됩니다.

  3. Recent Portfolio (최신글)
    갤러리형 최신글 스킨입니다.
    각 탭에 최신글 스킨, 게시판아이디, 옵션등을 설정합니다.
    한줄에 5개씩 출력됩니다.

  4. 공지(최신글)
    롤링형 최신글 스킨입니다.
    각 탭에 최신글 스킨, 게시판아이디, 옵션등을 설정합니다.

  5. index.php

    메인 슬라이더
    사용 디바이스 화면의 폭과 높이 만큼 출력됩니다.
    slick플러그인을 활용한 슬라이더 콘텐츠입니다.
    슬라이드 추가시 ebslider-item 클래스를 추가합니다.
    시간 설정은 autoplaySpeed 에서 조정합니다.
    slick 플러그인 : http://kenwheeler.github.io/slick/

  6. 서비스 소개
    fontawesome플러그인을 통해 아이콘을 출력합니다.(버전4)
    예) <i class="fa fa-bar-chart">< /i>
    내용, 아이콘등을 입력 및 수정합니다.
    아이템 3개에 맞춰 디자인 되어 있습니다.

  7. banner 1
    내용, 이미지, 링크등을 입력 및 수정합니다.

  8. Business Areas
    fontawesome플러그인을 통해 아이콘을 출력합니다.(버전4)
    예) <i class="fa fa-bar-chart">< /i>
    내용, 아이콘등을 입력 및 수정합니다.
    아이템 6개에 맞춰 디자인 되어 있습니다.

  9. Our Portfolio (최신글)
    갤러리형 최신글 스킨입니다.
    각 탭에 최신글 스킨, 게시판아이디, 옵션등을 설정합니다.
    한줄에 4개씩 출력됩니다.

  10. banner 2
    내용, 이미지, 링크등을 입력 및 수정합니다.

  11. Creative Design Products
    내용, 이미지, 링크등을 입력 및 수정합니다.

  12. WE WORK HARD FOR YOU
    fontawesome플러그인을 통해 아이콘을 출력합니다.(버전4)
    예) <i class="fa fa-bar-chart">< /i>
    내용, 아이콘등을 입력 및 수정합니다.
    아이템 3개에 맞춰 디자인 되어 있습니다.

  13. tail.php

    테일
    로고, 사이트정보등이 있습니다.

  14. 홍보영상
    동영상은 동영상 사이트 iframe으로 입력합니다.

서브 페이지

내용관리(co_id)를 이용한 서브 페이지 등록 방법을 설명합니다.

image
  1. 1) 회사개요, 연혁, 찾아오시는 길, 사업소개, 인재채용등의 내용 페이지를 html파일 제공합니다.

  2. 2) /theme/page/ 폴더에 서브페이지용 html 파일을 에디터 프로그램으로 열어 원하는 내용으로 수정 후 복사합니다.

  3. 3) '관리자 > 게시판관리 > 내용관리'에서 내용 등록시 입력 에디터에 html로 설정 후 붙여넣기 합니다.

    image
    image
  4. 4) 페이지 스타일 수정은 /css/style.css 파일에서 수정합니다.

  5. 5) 페이지 이미지는 /img/page/ 폴더 경로에 있습니다.

  6. 6) 찾아오시는 길의 경우 다음지도의 이미지 공유를 활용한 것 입니다.

기타사항

테마에 대한 기타사항을 알려드립니다.

  1. 1) 서브페이지 메뉴출력은 직접코딩을 해야 하며 co_id, bo_table의 아이디를 이용해 조건문으로 출력합니다.
    (head.php 파일 서브 메뉴 출력 부분 참고)

패치

테마 패치사항을 알려드립니다.

  1. 버전 1.0.1 (2019.02.27)

    1) theme/테마명/head.php