그누보드 - board basic로 만든 자주하는 질문(faq)

board basic로 만든 자주하는 질문(faq) 정보

게시판 board basic로 만든 자주하는 질문(faq)

첨부파일

basic_board_faq.zip (6.7M) 42회 다운로드 2023-04-20 18:43:12 포인트 차감10

테스트한 버전5.5.8.2.6

호환 가능 버전5.3이상, 버전에 큰 영향이 없을겁니다

본문

게시판 board basic를 사용하여 자주하는 질문(faq)를 만들어보았습니다.

How To Create Tabs (w3schools.com), 그누보드 - 자바스크립트 토글 컨텐츠 함수 > 그누보드5 팁자료실 (sir.kr)를 사용하였습니다. 감사의 말씀을 드립니다.

압축을 풀면 basic_board_faq_pc, basic_board_faq_mobile, 965_200 세개의 폴더가 나옵니다.

그누보드 순정기준으로

basic_board_faq_pc는 skin/basic_board_faq_pc의 경로가 되도록 업로드합니다.

basic_board_faq_mobile는 mobile/basic_board_faq_mobile의 경로가 되도록 업로드합니다.

그리고 일반적인 게시판 만드는 방법으로 게시판을 만들어줍니다.

메뉴만들기에서 게시판 주소를 걸어줍니다.

pc, mobile모두 list.skin.php만 사용했습니다.

board/basic의 list.skin.php파일에 아래 소스를 복사해서 넣으셔도 됩니다.

즉 list.skin.php 파일을 열고 그 안에서 자주하는 질문 내용을 넣어주시면 됩니다. write.skin.php, view.skin.php는 사용하지 않았습니다.

965_200폴더에는 widtd:965, height:200의 mp4영상과 이미지가 들어있습니다.

mp4영상과 이미지는 게시판 상단에 어울리게 크기를 964*200으로 만들었습니다.

video와 background-image에 넣으면 됩니다.

특정 탭이 디폴트로 열려있게 설정하려면 tab button 에 id 값을 주고 자바스크립트 아래에 다음 코드를 주면 됩니다.

<div class="tab">
  <button  style="width:25%;" class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">HOMEPAGE</button>
  <button style="width:25%;" class="tablinks" onclick="openCity(event, 'Paris')">SHOPPINGMALL</button>
  <button style="width:25%;" class="tablinks" onclick="openCity(event, 'Tokyo')">MAKE VIDEO</button>
  <button style="width:25%;" class="tablinks" onclick="openCity(event, 'Other')">OTHERS</button>
</div>

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

모바일 list.skin.php


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// 선택옵션으로 인해 셀합치기가 가변적으로 변함
$colspan = 2;
if ($is_checkbox) $colspan++;
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>

<!-- 게시판 목록 시작 { -->
<div id="bo_list" style="width:<?php echo $width; ?>">
  
<style>
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 5px;
  transition: 0.3s;
  font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
  
  
.toggle-title { font-size:1rem; padding:10px; border:1px solid #cccccc; box-sizing:border-box; text-align:left; font-weight:bold; cursor:pointer; background-color:#eeeeee; margin-top:5px; }
.toggle-body { font-size:1rem; padding:10px; border:1px solid #cccccc; box-sizing:border-box; background-color:#ffffff; border-top:none; display:none; }
</style>
<div class="tab">
  <button style="width:25%;" class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">홈페이지</button>
  <button style="width:25%;" class="tablinks" onclick="openCity(event, 'Paris')">쇼핑몰</button>
  <button style="width:25%;" class="tablinks" onclick="openCity(event, 'Tokyo')">영상</button>
  <button style="width:25%;" class="tablinks" onclick="openCity(event, 'Other')">기타</button>
</div>
<div id="London" class="tabcontent">
  <h3>HOMEPAGE</h3>
  <div id=toggleDiv_1>
    <div class=toggle-title style=margin-top:5px>홈페이지 솔루션은 무엇인가요?</div>
    <div class=toggle-body>
        그누보드를 기반으로 홈페이지를 제작합니다. 필요한 기능을 추가하고, 프로그램을 추가하는등 고객님의 필요에 맞게 커스텀합니다.
    </div>
    <div class=toggle-title>홈페이지 제작기간은 어떻게 되나요?</div>
    <div class=toggle-body>
    저희는 홈페이지 제작기간을 4주일 잡고 있습니다. 홈페이지의 종류에 따라 제작기간이 차이가 있을수 있지만 평균 28일 소요됩니다.
    </div>
    <div class=toggle-title>홈페이지 제작비용은 어떻게 되나요?</div>
    <div class=toggle-body>
        홈페이지 제작 비용은 케이스에 따라서 다릅니다. 따라서 고객의 필요와 구성에 따라, 추가되는 프로그램에 따라 차이가 납니다
    </div>
</div>
</div>
<div id="Paris" class="tabcontent">
  <h3>SHOPOINGMALL</h3>
  <div id=toggleDiv_2 style=margin-top:0px>
    <div class=toggle-title style=margin-top:5px>쇼핑 솔루션은 무엇인가요?</div>
    <div class=toggle-body>
      그누보드를 기반으로 홈페이지를 제작합니다. 필요한 기능을 추가하고, 프로그램을 추가하는등 고객님의 필요에 맞게 커스텀합니다.
    </div>
    
    <div class=toggle-title>쇼핑 제작기간은 어떻게 되나요?</div>
    <div class=toggle-body>저희는 홈페이지 제작기간을 4주일 잡고 있습니다. 홈페이지의 종류에 따라 제작기간이 차이가 있을수 있지만 평균 28일 소요됩니다.</div>
    
    <div class=toggle-title>쇼핑 제작비용은 어떻게 되나요?</div>
    <div class=toggle-body>홈페이지 제작 비용은 케이스에 따라서 다릅니다. 따라서 고객의 필요와 구성에 따라, 추가되는 프로그램에 따라 차이가 납니다</div>
    
</div>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>MAKE VIDEO</h3>
    <div id=toggleDiv_3>
    <div class=toggle-title style=margin-top:5px>영상제 솔루션은 무엇인가요?</div>
    <div class=toggle-body>
        프리미어프로, 에프터이펙트 등을 사용합니. 필요한 기능을 추가하고, 프로그램을 추가하는등 고객님의 필요에 맞게 커스텀합니다.
    </div>
      
    <div class=toggle-title>영상 제작기간은 어떻게 되나요?</div>
    <div class=toggle-body>
    저희는 영 제작기간을 4주일 잡고 있습니다. 홈페이지의 종류에 따라 제작기간이 차이가 있을수 있지만 평균 28일 소요됩니다.
    </div>
      
    <div class=toggle-title>영상 제작비용은 어떻게 되나요?</div>
    <div class=toggle-body>
       영상 제작 비용은 케이스에 따라서 다릅니다. 따라서 고객의 필요와 구성에 따라, 추가되는 프로그램에 따라 차이가 납니다
    </div>
      
</div>
</div>
  
<div id="Other" class="tabcontent">
  <h3>Others</h3>
  <p>Kimchulyong is doing special things for you etc. ad.</p>
</div>

<br>
<!-- images with affect effect vidoe start -->
<style>
.effect-div { width:100%;  background-size:cover; overflow:hidden; position:relative; margin-top: 0px;margin-left: 0px;margin-right: 0px;margin-bottom: 0px;}
.effect-div video { width:100%;  mix-blend-mode:screen; }
</style>
  
<div class=effect-div style="background-image:url('http://egis.kr/zz/965_200/trees.png')">
    <video src="http://egis.kr/zz/965_200/cosmic.mp4" autoplay loop muted></video>
</div>
      
<script>
onresize = function() {
    for (effect_div of document.getElementsByClassName("effect-div")) effect_div.style.height = effect_div.offsetWidth * 200 / 965 + "px";
}
onresize();
</script>
<!-- images with affect effect vidoe end -->
  
<!-- tabs javascript -->
<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<!-- tabs javascript -->
  
<!-- 자바스크립트 토글 컨텐츠 함수 -->
<script>
function toggleMode(...toggle) {
    this["toggle_" + toggle[0]] = this[toggle[0]];
    this["toggle_" + toggle[0]]._style = toggle[1];
    this["toggle_" + toggle[0]]._title = this["toggle_" + toggle[0]].querySelectorAll(".toggle-title");
    this["toggle_" + toggle[0]]._body = this["toggle_" + toggle[0]].querySelectorAll(".toggle-body");
    for (tt = 0; tt < this["toggle_" + toggle[0]]._title.length; tt++) {
        this["toggle_" + toggle[0]]._title[tt].tt = tt;
        this["toggle_" + toggle[0]]._title[tt].onclick = function() {
            for (tb = 0; tb < window["toggle_" + toggle[0]]._body.length; tb++) {
                if (window["toggle_" + toggle[0]]._style) window["toggle_" + toggle[0]]._body[this.tt].style.display = window["toggle_" + toggle[0]]._body[this.tt].style.display == "block" ? "none" : "block";
                else {
                    if (tb == this.tt) window["toggle_" + toggle[0]]._body[this.tt].style.display = window["toggle_" + toggle[0]]._body[this.tt].style.display == "block" ? "none" : "block";
                    else window["toggle_" + toggle[0]]._body[tb].style.display = "none";
                }
            }
        }
    }
}
toggleMode("toggleDiv_1", 0);
toggleMode("toggleDiv_2", 1);
toggleMode("toggleDiv_3", 0);
toggleMode("toggleDiv_4", 1);
</script>
<!-- 자바스크립트 토글 컨텐츠 함수 -->

</div>