[G5] 기본형 그누보드를 반응형으로 만들기 > 온라인강의

본문 바로가기
 
 
 
오늘 383
어제 1,573
최대 2,526
전체 3,396,475

최근 방문자

1853
1775
1756
1706
1573
383
19 20 21 22 23 24
비즈니스의 시작 비즈명함 ~ 가격, 품질, 배송 3가지 만족을 드리는 비즈명함 / 즉석명함 / 급행서비스 / 서울 전지역 수도권일부 3시간배송

select * from g5_menu where me_use = '1' and me_link like '%lecture%'
온라인강좌 홈 > 온라인강좌 > 온라인강좌

그누보드 | [G5] 기본형 그누보드를 반응형으로 만들기 (update. 2016-05-04)

페이지 정보

작성일2016-05-04 17:04 조회3,898회 댓글0건

본문

여러 테마를 사용할 기회가 있기 때문에 무조건 테마사용으로 합니다. 
그누보드5 / plugin / bootstrap / 3.3.6
그누보드5 / config.php 
그누보드5 / theme / basic / head.sub.php 
그누보드5 / theme / basic / tail.sub.php 
그누보드5 / skin / 반응형 스킨


1. 그누보드5 / config.php 
define('G5_USE_MOBILE', false); 


2. 부트스트랩을 사용하기 위해 추가해 줍니다. 
http://getbootstrap.com/getting-started/#download 에서 Source code 를 다운받아 아래 위치에 업로드
그누보드5 / plugin / bootstrap / 3.3.6


3-1. 그누보드5 / theme / basic / head.sub.php 
<?php
if (G5_IS_MOBILE) {
    echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">'.PHP_EOL;
    echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
    echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
    echo '<meta http-equiv="imagetoolbar" content="no">'.PHP_EOL;
    echo '<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">'.PHP_EOL;
}

를 다음과 같이 변경
if (G5_IS_MOBILE) {
    echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">'.PHP_EOL;
    echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
    echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1">'.PHP_EOL;
    echo '<meta http-equiv="imagetoolbar" content="no">'.PHP_EOL;
    echo '<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">'.PHP_EOL;
}


3-2. 그누보드5 / theme / basic / head.sub.php 
웹폰트 아이콘을 사용하기 위해 추가

<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/<?php echo G5_IS_MOBILE ? 'mobile' : 'default'; ?>.css">

를 다음과 같이 변경
<?php 
if (defined('G5_IS_ADMIN')) { 
    if(!defined('_THEME_PREVIEW_')) 
        echo '<link rel="stylesheet" href="'.G5_ADMIN_URL.'/css/admin.css">'.PHP_EOL; 
} else { 
    //echo '<link rel="stylesheet" href="'.G5_THEME_CSS_URL.'/'.(G5_IS_MOBILE?'mobile':'default').'.css">'.PHP_EOL; 
    echo '<link rel="stylesheet" href="'.G5_THEME_CSS_URL.'/default.css">'.PHP_EOL; 

echo '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">'.PHP_EOL; 
?> 


3-3. 그누보드5 / theme / basic / head.sub.php 
<!--[if lte IE 8]>
<script src="<?php echo G5_JS_URL ?>/html5.js"></script>
<![endif]-->

를 다음과 같이 변경
<!--[if lte IE 8]> 
<script src="<?php echo G5_JS_URL ?>/html5.js"></script> 
<![endif]--> 
<?php if(!defined('G5_IS_ADMIN')) { ?> 
<!-- Bootstrap core CSS --> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<!-- Bootstrap theme --> 
<link href="<?php echo G5_PLUGIN_URL?>/bootstrap/3.3.6/dist/css/bootstrap-theme.css" rel="stylesheet"> 

<!-- Custom styles for this template -->

<!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
<!--[if lt IE 9]><script src="<?php echo G5_THEME_URL?>/assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
<script src="<?php echo G5_URL?>/bootstrap/3.3.6/assets/js/ie-emulation-modes-warning.js"></script> 

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
<!--[if lt IE 9]> 
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
<![endif]--> 
<?php } ?> 


4. 그누보드5 / theme / basic / tail.sub.php 
관리자페이지는 부트스트랩을 사용하지 않기위해 추가
<?php if ($is_admin == 'super') {  ?><!-- <div style='float:left; text-align:center;'>RUN TIME : <?php echo get_microtime()-$begin_time; ?><br></div> --><?php }  ?>

를 다음과 같이 변경
<?php if(!defined('G5_IS_ADMIN')) { ?> 
    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="<?php echo G5_PLUGIN_URL?>/bootstrap/3.3.6/assets/js/docs.min.js"></script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="<?php echo G5_PLUGIN_URL?>/bootstrap/3.3.6/assets/js/ie10-viewport-bug-workaround.js"></script> 
<?php } ?>
<?php if ($is_admin == 'super') {  ?><!-- <div style='float:left; text-align:center;'>RUN TIME : <?php echo get_microtime()-$begin_time; ?><br></div> --><?php }  ?>


5. 반응형으로 코딩 다시 하기



자료출처
http://sir.kr/g5_tip/3910
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.


목록

Total 2,005건 1 페이지
온라인강의 목록
번호 제목
2005
2004
2003
2002
2001
2000
1999
1998
1997
1996
1995
1994
1993
1992
1991
1990
1989
1988
1987
1986
1985
1984
1983
1982
1981
게시물 검색
 
 
상호: 해피정닷컴 대표:정창용 사업자등록번호:119-05-36414 (08394) 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
전화: 070-7600-3500 팩스:02-865-3528 개인정보관리:정창용 mail@happyjung.com 에스크로확인
개인정보취급방침
COPYRIGHT 2001~2017 해피정닷컴. All rights reserved. 부가통신사업신고:서울체신청-1217 통신판매신고:2014-서울구로-0074
 
모바일 버전으로 보기