#################
1. 테마 설정
#################

1) 첨부 파일을 내려받은 후 압축을 풀고, theme 폴더에 설치하세요.

2) 모바일 관련 설정

· config.php 수정
: 라인 125의 define('G5_USE_MOBILE', true);를 define('G5_USE_MOBILE', false);로 수정하세요.

즉, 모바일 모드를 사용 안 함으로 설정합니다.

3) 관리자 설정
: 관리자로 로그인 후에 아래와 같이 설정하세요.

 환경설정 > 테마설정
: BS4-Aside v2.5로 설정

* 아래의 설정을 진행하면서 모바일 설정은 변경하지 않도록 하세요.

i) 환경설정 > 기본 환경설정
: 최근게시물 스킨, 검색 스킨, 접속자 스킨, FAQ 스킨, 회원 스킨을 (테마) basic으로 설정

ii) 게시판 관리 > 게시판 관리
: 각 게시판의 스킨을 용도에 따라 bs4용 게시판으로 설정
bs4_basic, bs4_gallery, bs4_webzine, bs4_counsel, bs4_library, bs4_calendar

iii) 게시판 관리 > 1:1문의 설정
: 스킨 디렉토리를 (테마) basic으로 설정

iv) 내용관리
: 각 내용별로 스킨 디렉토리를 (테마) basic으로 설정


#################
2. index 페이지 설정
#################

- 세 가지 초기 화면 페이지 제공: index_classic_1.php, index_classic_2.php, index_modern_1.php, index_modern_2.php
- 초기 상태는 index_modern_2.php를 index.php로 설정한 상태입니다.
- 초기 화면의 변경은 첨부한 index_classic_1.php, index_classic_2.php, index_modern_1.php 중에서 초기 화면으로 사용하길 원하는 파일의 파일 이름을 index.php로 변경한 후에 기존의 index.php와 대체합니다.


#######################
3. 테마 설정
#######################

: 관리자로 로그인한 경우, 그누보드 메뉴 > 테마 설정 메뉴가 표시됩니다.(새로 추가함)


1) aside 사용 여부 설정

i. 메인 화면의 aside 사용 여부 선택

ii.  게시판과 페이지의 aside 사용 여부 선택


2) 메인 화면 상단 설정: 슬라이드, 와이드 이미지, 또는 패럴렉스 이미지 중에 선택


#################
4. Parallax 섹션 설정
#################

1-1. 개요

1) 구성 설명

- 이미지 저장 위치: 테마 > img > paral 폴더에 저장합니다.
- 패럴렉스의 높이 설정 : 테마 > css > default.css의 Parallax 섹션에서 이미지의 높이를 설정합니다.
- 메인 화면은 index.php에서, 그외 게시판이나 페이지는 테마 > head.sub.php 의 하단에 있는 소스에서 각각의 메뉴별로 설정하여 Parallax 섹션을 호출하게 됩니다.
- 따라서 네비게이션의 메뉴별 설정에 따라 각각 다른 다른 이미지, 다른 문구를 상단에 표시하게 됩니다.


2) 게시판 및 페이지의 패럴렉스 설정: head.sub.php

<!-- 콘텐트 시작 { -->
<!-- 게시판 또는 페이지 상단의 Parallex 이미지 지정을 함 -->
    <main role="main">
	<?php
		if (!defined('_INDEX_')) { // index가 아닌 경우에만 실행
		    if ($bo_table == "basic" || $bo_table == "gallery" || $bo_table == "webzine") { // 게시판의 경우임
			    $paral_pic = "paral_01.jpg";
			    $h1 = "Here is a heading 1";
			    $p = "Here is a short description 1";
			    
		    } else if ($co_id == "page1" || $co_id == "page2" || $co_id == "page_test") { // 페이지의 경우임
				$paral_pic = "paral_02.jpg";
				$h1 = "Here is a heading 2";
			    $p = "Here is a short description 2";
			
			} else if  ($co_id == "typo") {
				$paral_pic = "paral_03.jpg";
				$h1 = "Here is a heading 3";
			    $p = "Here is a short description 3";

			// 추가하는 경우에는 이곳에 추가함
							
			} else { // 위의 경우를 제외한 모든 게시판이나 페이지에는 아래의 설정을 적용함
				$paral_pic = "paral_04.jpg";
				$h1 = "Here is a heading 4";
			    $p = "Here is a short description 4";
			} ?>

- 예를 들면, basic, gallery, webzine 게시판은 paral_01.jpg와 설정한 캡션이 적용되고, page1, page2 페이지 콘텐츠는 paral_02.jpg와 설정한 캡션이 적용됩니다.
- 현재 4개의 php와 4개의 이미지를 사용하고 있으며, 게시판 또는 페이지별로 표시할 다른 이미지를 새로 추가하는 경우에는 위의 소스의 중간 부분에 추가하세요.
- 게시판의 경우에는 $bo_table에 게시판 이름을 지정하고, 페이지의 경우에는 $co_id에 페이지 이름을 지정한 후 캡션을 설정하시면 됩니다.



3) 메인 페이지의 패럴렉스 이미지 설정: index.php

<!-- Main Parallax Section -->
	<?php
		$paral_pic = "paral_main.jpg";
	?>
    <div class="parallax-window-main paral-main" data-parallax="scroll" data-image-src="<?php echo G5_THEME_URL ?>/img/paral/<?php echo $paral_pic ?>">
	    <h1 class="display-3">Here is a heading</h1>
		<p class="lead">Here is a short description</p>
		<p class="lead">
		<a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button</a>
		</p>
    </div>

- $paral_pic 변수에 사용할 이미지를 지정하고, h1과 p 태그에서는 캡션을 설정합니다.


4) 패럴렉스 섹샌의 높이 설정: default.css

- 라인 135 아래의 부분에서 설정합니다.

/* Layer Set for Parallax Section */ 

.parallax-window-main {
    min-height: 400px;
    background: transparent;
}
.parallax-window-sub {
    min-height: 200px;
    background: transparent;
}

- main은 메인 화면에 해당하며, sub는 게시판 및 페이지에 해당합니다.


4) 패럴렉스의 캡션 설정: default.css

- 라인 83 아래의 부분에서 설정합니다.

/* Paragraph for Parallax Main Section */ 

- 마찬가지로, 메인화면의 캡션은 main이 포함된 클래스를, 게시판 및 페이지의 캡션은 sub가 포함된 클래스에서 설정을 합니다.


5) v2.8에 추가한 메인 화면의 상단(parallax-main-top)과 중간(parallax-modern-2의 패럴렉스 이미지도 위의 설정을 참조하여 높이 등을 설정하세요.

 
#################
5. 슬라이드 사용 안내
#################

1-1. 슬라이드의 표시 기간 조절: head.sub.php

- 라인 117의 data-interval="6000"에서 원하는 값으로 설정(단위는 밀리초이며, 따라서 6000은 6초가 됩니다.)
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">


1-2. 버튼 표시 형식 변경: head.sub.php

- 버튼의 배경색을 없애고, 테두리만 보이게 하시려면 btn-primary 등을 btn-outline-primary 등으로 변경하세요.
즉, -outline를 추가합니다.

<span class="btn btn-primary btn-sm ">Learn More</span>


1-3. 슬라이드에 사용한 이미지의 높이가 서로 다른 경우, 모바일에서는 이미지의 높이 차이에 따라 슬라이드의 높이가 바뀌는 현상이 생길 수 있으니, 이미지의 높이는 되도록 같게 해주세요.


1-4. PC 화면에서의 슬라이드의 높이 조절: carousel.css

- height: 32rem;의 수치를 조절하세요.

.carousel-item {
  height: 32rem;
  min-height: 200px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


1-5. 모바일 화면에서의 슬라이드의 높이 및 캡션의 폰트 사이즈 조절: carousel.css

- max-height: 20em의 수치를 조절하세요.(최고 높이를 지정하여 그 이상으로는 늘어나지 않게 제한합니다.)

@media (max-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-item {
    max-height: 20em;
  }
 .carousel-caption p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.2;
  }
  .carousel-caption h3 {
    font-size: 1.4rem;
  }

- 폰트 크기는 font-size: 1.1rem;, 행간의 간격은 line-height: 1.2;, 그리고 하단 여백은 margin-bottom: 1.5rem; 부분을 변경하세요.
0.8, 1, 1.2 등과 같이 설정하시면 됩니다.

1-6. 캡션의 테두리에 그림자 넣기: carousel.css

- 배경 이미지의 색상에 따라 캡션의 식별이 어려울 경우에는 캡션에 그림자를 추가하여 선명도를 높일 수 있습니다.

.carousel-caption h3, .carousel-caption p{
  text-shadow: 0 0 1px rgba(0,0,0,1); 
}

- 0 0 1px 는 x축, y축, 두께
- rgba(0,0,0,1)에서 앞의 세 숫자는 rgb 색상 값, 마지막 숫자는 투명도(1이 최고치이며, 투명도를 낮출 경우에는 1보다 낮은 0.7 등의 소숫점 수치로 설정)


#######################
6. Owl Carousel
#######################

1. Owl Carousel 갤러리 최신글과 Owl Carousel 웹진 최신글이 이에 해당합니다.


2. index_modern_2.php의 최신글을 호출하는 명령줄에서 설정합니다.

- 사용 방법 : latest(스킨, 게시판 아이디, 출력 라인, 글자 수);

echo latest('theme/pic_owl', 'gallery', 6, 0);

- 맨 뒤의 글자 수는 자동으로 맞춰주므로 0으로 설정합니다.


3. 갤러리 최신글은 theme/pic_owl, 웹진 최신글은 'theme/webzine_owl입니다.

- index_modern_2.php의 제일 하단에서 최신글 슬라이드의 세부 설정(반복, 자동 실행, 화면 해상도에 따른 이미지의 개수 등)을 합니다.

- 이 중에서 가장 먼저 하실 일은 Responsive 항목에서 해상도 별로 보여줄 이미지의 개수 설정입니다.

- 해상도를 1000, item을 4로 설정하면, 모니터 해상도 1000px 이상에서는 4개의 이미지의 보여주며, 위에서 최신글을 호출할 때 설정한 출력라인 수와는 무관합니다.

- 즉, 최신글 호출에서 출력 라인에 10을 설정하고, Responsive에서 item에 4를 설정하면, 최신글은 총 10개를 불려오지만, 화면에서는 4개만을 보여주며 슬라이드를 통해 순차적으로 보여주게 됩니다.


4. 옵션

- rewind: [true/false], true로 설정하면, 맨 뒤의 이미지를 보여준 후 다시 처음으로 되돌아가게 됩니다. (현재, owl carousel 갤러리 최신글이 이 설정을 사용함)

- loop: [true/false], true로 설정하면, 맨 뒤의 이미지를 보여준 후 바로 이어서 맨 처음 이미지부터 다시 계속 보여주게 됩니다.  (현재, owl carousel 웹진 최신글이 이 설정을 사용함)

- Responsive: [해상도]를 설정하고, 해당 해상도에서 보여줄 [이미지의 개수]를 설정

- autoplay: [false/숫자], false인 경우에는 자동 시작을 하지 않으며, 숫자를 설정하여 자동 시작이 되며, 설정한 시간이 지나면 이미지를 이동합니다.
밀리초를 사용하므로, 3000을 입력하면, 3초간 보여주고 이미지를 이동하게 됩니다.

- autoplayHoverPause: [true/false], true로 설정하면, 마우스를 위에 가져가면 슬라이드의 이동을 멈추게 되며, 마우스를 치우면 다시 슬라이드의 이동을 시작합니다.


#######################
7. 탭 최신글
#######################

1. index_modern_2.php의 Tab latest가 이에 해당됩니다.

2. 탭 게시판에 사용할 탭의 개수에 맞춰 설정을 잡아주게 되며,  처음엔 2개의 탭을 사용하도록 설정되어 있습니다.

- 탭 및 제목은 nav-item에사 subject_1, subject_2 식으로 탭의 번호를 늘려가면서 설정합니다.

- 탭의 내용은 Content Panel의 <div role="tabpanel" 에 있는 id="first",  id="second" 식으로 서로 다른 id 명을 사용해야 합니다.

- 탭의 호출은 <?php echo latest('theme/tab_basic', 'list', 10, 0,1,1); ?>를 사용하며, 맨 뒤의 숫자는 반드시 앞에서 설정한 subject_x의 x에 해당하는 번호를 지정하여야 합니다.

- 정리하면, 두 군데에서 탭의 번호와 id 값을 설정하게 되며, 탭의 번호는 두 군데에서 같은 번호로 설정합니다.


#######################
8. 상담 게시판
#######################

1-1. 기본 특성

- 방문자가 글을 게시하면, 리스트에서 진행 상황이 '상담 신청'으로 표시됩니다.
- 관리자가 게시글을 읽은 경우에는, 리스트에서 진행 상황이 '확인 중'으로 표시됩니다.
- 관리자가 게시글에 댓글을 등록한 경우에는, 리스트에서 진행 상황이 '답변 완료'로 표시됩니다.
- 상담 게시판의 특성을 고려하여 답글 쓰기 기능은 제외했으며, 댓글 기능만 이용하도록 되어 있습니다.

1-2. 설정 안내

- 익명 게시판으로 운용하고자 하시는 경우에는 게시판 관리에서 비밀글 사용 항목을 '무조건'으로 설정하실 것을 권합니다.
- 비공개 게시판으로 운용하고자 하시는 경우에는 게시판 관리에서 글읽기 권한을 상황에 맞춰 조절하시기 바랍니다.

1-3. 참고 사항

- 상담 게시판의 경우에는 일반적으로 비공개를 원하는 경우가 많아 개인정보보호를 위해 게시자의 이름과 전화번호는 일부 문자를 *로 대체하여 표시합니다.
- 이 게시판은 익명 게시판, 즉 비밀글로 무조건 적용하는 경우를 산정하여 제작했으나, 공개 게시판으로 운용하셔도 무방합니다.


#######################
9. aside 상단의 배너 이미지
#######################

- 메인 페이지가 아닐 경우에는 aside. 상단에 배너 이미지가 표시됩니다.

<!-- Index가 아닐 때의 aside -->
		<!-- aside. 상단의 배너 이미지 -->
		<div id="mysubmenu">
			<div class="text-center">
				<img class="img-fluid" src="<?php echo G5_THEME_IMG_URL ?>/aside_top.png">
			</div>
			
- 이미지의 저장 위치: 테마 > img 폴더(이미지 변경 시에 이곳에 새로운 이미지를 저장합니다.)
- 이 배너를 사용하지 않을 경우에는 위의 소스를 삭제하거나 주석 처리하세요.


#######################
10. 자료실 게시판
#######################

- 리스트에서 첨부 파일의 직접 다운로드가 가능합니다. (다운로드 제목 하단의 이미지 클릭)
- 첨부 파일의 확장자에 해당하는 이미지 파일을 자동으로 선택하여 표시합니다.
- 리스트에는 1개의 첨부 파일만 표시되며, 만약 2개의 파일을 첨부하는 경우에는 첫 번째 첨부 파일이 표시됩니다.


#######################
11. 캘린더 게시판
#######################

- 버튼을 클릭하여 년, 월을 한 단계씩 이동할 수 있으며, 옵션 선택의 경우에는 선택하는 년, 월로 바로 이동합니다.
- 일정 문구 위에 마우스를 올리면 해당 내용을 툴팁 형식으로 확인할 수 있습니다. (모바일은 클릭하면 툴팁이 표시되고, 다시 클릭하면 툴팁이 닫힙니다.)


#######################
12. 페이지형 콘텐트
#######################

- 내용 관리로 사용하는 페이지형 콘텐트의 샘플 소스 3개를 포함하여 홈페이지 제작 시 참조 또는 활용하실 수 있도록 했습니다.
- 내용 관리에서 HTML 모드로 들어가 붙여넣기하여 사용하시면 됩니다.
- 이미지의 경우, Editor 모드에서 직접 이미지를 등록하는 방법도 있지만, 이 샘플 소스를 사용하는 경우에는 HTML 모드를 사용하게 되므로 이미지를 특정 폴더에 저장하고, 그 위치를 소스에서 지정하는 방식으로 사용하시면 됩니다.
- 예제에서 사용한 이미지와 문구를 수정하여 사용하세요.
- 샘플 소스에서 설정한 이미지의 저장 위치는 테마 > img > page 폴더이며, 그대로 사용하시거나, 아니면 원하시는 폴더를 따로 생성하여 위치를 따로 설정해서 사용하셔도 됩니다.


#######################
13. 기타
#######################

- 회원 아이콘을 등록하지 않은 경우에는 그누보드에서 제공하는 no_profile.gif이 표시됩니다.
- 첨부한 no_profile.gif을 그누보드 루트의 img 폴더(테마의 img 폴더가 아님)에 있는 no_profile.gif와 대체하여 로그인 후의 로그인 섹션이나, 관리자 모드에서 회원 아이콘을 대체하여 사용하실 수도 있습니다.