기본형 그누보드를 반응형으로 만들기 팁(1) > 그누보드5 팁자료실

그누보드5 팁자료실

기본형 그누보드를 반응형으로 만들기 팁(1) 정보

기본형 그누보드를 반응형으로 만들기 팁(1)

본문

1. 여러 테마를 사용할 기회가 있기 때문에 무조건 테마사용으로 합니다.

2. config.php
define('G5_USE_MOBILE', false);

3. theme/basic/head.sub.php

<meta name="viewport" content="width=device-width, initial-scale=1">
<?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($config['cf_add_meta'])
    echo $config['cf_add_meta'].PHP_EOL;
?>

~~

웹폰트 아이콘을 사용하기 위해 추가해 줍니다.
<?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;
?>

부트스트랩을 사용하기 위해 추가해 줍니다.
http://getbootstrap.com/getting-started/#download
에서 Source code 를 다운받아 사용합니다.

<!--[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_URL?>/bootstrap/3.3.6/dist/css/bootstrap-theme.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="<?php echo G5_THEME_CSS_URL?>/theme.css" rel="stylesheet">
<link href="<?php echo G5_THEME_CSS_URL?>/color.css" rel="stylesheet">

<!-- 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.theme/basic/tail.sub.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_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_URL?>/bootstrap/3.3.6/assets/js/ie10-viewport-bug-workaround.js"></script>
    <script src="<?php echo G5_JS_URL?>/showup.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 }  ?>
추천
6

댓글 22개

우앙 감사합니다~
해보고 싶네요,,,그런데 실력이 될까 모르겠어요...

메인디자인을 테마 비사용 상태에서 만들었는데...
이런 경우는 어떻게 해야 할까요?
빌더에 비해 테마는 변경이 쉬웠는데... 좋은 테마를 만드는 방법을 알려주셔서 감사합니다.
새삼 G5 반응형웹 테마를 만드신분들이 존경스럽습니다.

아래 검색어로 구글링하시면 적합한 반응형웹 무료 템플릿들이 많습니다.
Free Responsive Web Templates
감사합니다!

그런데 테스트 해보니까 해주신데로 하면 전부 다 동작하는데 쓰기 페이지만 반응형 기능이 잘 안먹는데 이유가 뭐가 있을까요??

답변 부탁드립니다. ㅠㅠ

다시 확인해보니 크롬에서는 되는데... 익스에서만 잘 안 먹습니다. ㅠㅠ
전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT