board basic로 만든 자주하는 질문(faq) 정보
게시판 board basic로 만든 자주하는 질문(faq)관련링크
첨부파일
본문
게시판 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>
9