메뉴에서 게시판을 클릭해서 나오면 드롭다운 메뉴가 먹통이 되는데..게시판과 관련이 있을거 같다.


우선 부트스트랩을 이용해서 게시판의 내용을 container 안에 넣어야겠다.


head.php 에서 nav 코드 다음에 아래 코드를 작성!

<!-- 게시판 등 컨텐츠 감싸기 -->

<div class="container">

<div class="row">

<div class="col-md-12">


tail.sub.php 에서 저것들을 닫아줘야겠지.

</div><!-- /.col-md-12 -->

</div><!-- /.row -->

</div><!-- /.container -->






<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

<?php echo html_end(); // HTML 마지막 처리 함수 : 반드시 넣어주시기 바랍니다. ?>


아래처럼 가운데로 싹 모아주네..


게시판 쪽을 살펴봐야겠는데...

기본 basic 스킨 css 로 표시되고 있다.

부트스트랩으로 바꿔주려면 css 가 아니라 php 소스를 손봐야할거 같다.


게시판은 bbs/board.php 가 관할한다. 소스 들여다 봐야지.


board_head.php 와 board_tail.php 는 게시판 상단, 하단에 들어가도록 관리자가 설정한 내용을 끌어오는 기능을 하고 있고...

/bbs/board.php?bo_table=bbs01 이렇게 접근을 할 때는 list.php 가 동작한다.

글 아이디도 넘어가면 view.php 가 동작한다.


우선 list.php 부터....

list.php 에서는 표시할 데이터를 DB에서 가져와 정리하고, 표시는 skin/board/basic/list.skin.php 가 하게되어있다.

오호~~

부트스트랩으로 스킨을 만들어주면 되겠구나~~


.../skin/board/ 아래에 bt 라고 디렉토리를 하나 만들어주고, basic 디렉토리 안에 있는 파일을 복사해 놓고 진행해봐야겠다.


관리자 페이지에서 게시판01 의 스킨을 bt 로 변경하고, .../skin/board/bt/list.skin.php 파일을 수정하면 되겠다.


우선 style.css 를 가져오는 코드를 막자.

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨

//add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);




css 적용되지 않으니 아래처럼 보이네.



그럴싸하게 보이도록 php 소스에 나타나있는 id, class 등을 부트스트랩 걸로 바꿔줘야겠다.


















Posted by 똑똑한 영장류

상단 메뉴말고, 진짜 메뉴를 가지고 놀려고 관리자 페이지, 메뉴 설정에서 메뉴를 만들려고 보니, 페이지가 제대로 뜨지 않는다.

jquery 버전 문제인듯 싶어 최신버전으로 변경했던 jquery 버전을 다시 1.8.3 으로 돌려야했다.


head.sub.php에서...


<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>


되돌려놓고 게시판을 몇개 만들고 메뉴도 만들었다.



그룹01

-게시판01

-게시판02

그룹02

-게시판03


요렇게 만들어놓고 테스트!


원래 소스에서 메뉴를 표시해주는 부분은 head.php 에 아래 부분이다.


<nav id="gnb">

        <h2>메인메뉴</h2>

        <ul id="gnb_1dul">

            <?php

            $sql = " select *

                        from {$g5['menu_table']}

                        where me_use = '1'

                          and length(me_code) = '2'

                        order by me_order, me_id ";

            $result = sql_query($sql, false);

            $gnb_zindex = 999; // gnb_1dli z-index 값 설정용


            for ($i=0; $row=sql_fetch_array($result); $i++) {

            ?>

            <li class="gnb_1dli" style="z-index:<?php echo $gnb_zindex--; ?>">

                <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>

                <?php

                $sql2 = " select *

                            from {$g5['menu_table']}

                            where me_use = '1'

                              and length(me_code) = '4'

                              and substring(me_code, 1, 2) = '{$row['me_code']}'

                            order by me_order, me_id ";

                $result2 = sql_query($sql2);


                for ($k=0; $row2=sql_fetch_array($result2); $k++) {

                    if($k == 0)

                        echo '<ul class="gnb_2dul">'.PHP_EOL;

                ?>

                    <li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><?php echo $row2['me_name'] ?></a></li>

                <?php

                }


                if($k > 0)

                    echo '</ul>'.PHP_EOL;

                ?>

            </li>

            <?php

            }


            if ($i == 0) {  ?>

                <li id="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>

            <?php } ?>

        </ul>

    </nav>


gnb...

그누보드는 메뉴설정을 참고로 자동으로 드롭다운 메뉴를 만들어준다.

부트스트랩에 있는 nav 내에 드롭다운을 만드는 기능을 참고로 적용해주면 될거 같다.


아래는 부트스트랩 예제 코드다.

<ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>


ul 안에 li 를 class=dropdown 으로 해주고 그 아래에 주루루~ 넣어주는 형태다.


참고해서 수정한 소스는..

<nav class="navbar navbar-default">

<div class="container">


<ul class="nav navbar-nav">

<?php

$sql = " select *

from {$g5['menu_table']}

where me_use = '1'

 and length(me_code) = '2'

order by me_order, me_id ";

$result = sql_query($sql, false);

$gnb_zindex = 999; // gnb_1dli z-index 값 설정용


for ($i=0; $row=sql_fetch_array($result); $i++) {

$sql2 = " select *

from {$g5['menu_table']}

where me_use = '1'

 and length(me_code) = '4'

 and substring(me_code, 1, 2) = '{$row['me_code']}'

order by me_order, me_id ";

$result2 = sql_query($sql2);

$result2_cnt = mysql_num_rows($result2);

if ($result2_cnt == 0) { ?>

<li><a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" ><?php echo $row['me_name'] ?></a></li>

<?php

} else { ?>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><?php echo $row['me_name'] ?></a>

<ul class="dropdown-menu" role="menu">

<?php

for ($k=0; $row2=sql_fetch_array($result2); $k++) { ?>

<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" ><?php echo $row2['me_name'] ?></a></li>

<?php

}

echo '</ul>'.PHP_EOL;

} ?>

</li>

<?php

}


if ($i == 0) {  ?>

<li id="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>

<?php } ?>

</ul>


</div><!-- /.container -->


</nav><!-- /.navbar -->



흠..

jquery를 다시 2.1.3으로 변경해줘야 잘 동작을 한다.



게시판01 클릭하면 아래처럼 나오는데...그때부터 드롭다운이 동작하지 않는다.. 흑...



왜 바보가 되지???? 더 살펴봐야겠네..













Posted by 똑똑한 영장류

주의) 재미로 하고 있는 작업입니다. 따라하시다가 욕을 볼 수도 있습니다.ㅎ



사이트 접속하면 처음 보이는 index.php 파일 및 기타 필수파일 몇개를 수정해서 하~얗게 만들었다.


수정하지 않았을 때 나타나는 것 중에 상단에 메뉴가 있는데...메뉴에 부트스트랩 적용해보겠다.



원본 head.php 에 보면 상단 시작, 상단 끝 구간이 있다.

거기 보면 글자크기를 변경하는 버튼, 회원가입, 로그인, 새글..등 있고, 그 아래에 메뉴 뿌려주는 코드가 있다.

글자크기 변경하는 건 관심없고. 메뉴 부분은 자세히 살펴봐야되고...

상단에 회원가입, 로그인, 새글..등이 나타나는 상단 고정 메뉴를 부트스트랩의 nav 로 바꿔봐야지...


부트스트랩에서 navbar 라고 이름지어진 component 가 있다. 그거 이용하면 될거같다.


head.php

......

if (G5_IS_MOBILE) {

//    include_once(G5_MOBILE_PATH.'/head.php');

//    return;

}

?>


<nav class="navbar navbar-default">


</nav>


부트스트랩 navbar 기본형을 추가했다..우선 틀만...

브라우저로 접속해보면, 상단에 회색 비스무리하게 가로 바가 보인다. 그 안에 아이템 하나씩 넣어야겠지.


그리고, 모바일일 경우 다른 파일을 include 하는 것을 막아버렸다. index.php, tail.php 에도... 부트스트랩은 모바일 자동이니까..그렇게...


nav 태그 안에 아래 코드를 넣어봤다. navbar 앞쪽에 사이트명 보이게 navbar-brand 도 넣어줬다.


<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">GNUBOARD5</a>

</div>


접속해보면 navbar 앞에 GNUBOARD5 라고 보이네.


그 뒤에 회원가입, 로그인, FAQ.., , 새글 이 보이면 되겠다.


원본 코드는..

<ul id="tnb">

            <?php if ($is_member) {  ?>

            <?php if ($is_admin) {  ?>

            <li><a href="<?php echo G5_ADMIN_URL ?>"><b>관리자</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php">정보수정</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>

            <?php } else {  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/register.php">회원가입</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/login.php"><b>로그인</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/faq.php">FAQ</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/qalist.php">1:1문의</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/current_connect.php">접속자 <?php echo connect(); // 현재 접속자수  ?></a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/new.php">새글</a></li>

        </ul>


ul id="tnb" 로 되어있는데.. id="tnb" 를 class="nav navbar-nav" 로 변경해주면 된다. 부트스트랩 간단하네.


근데..이 코드를 다른 div로 감싸줘야한다. 이유는 모바일에 보여줄 때, 첨부터 다 보여주는게 아니라, 버튼으로 collapse?해놓고 버튼 누르면 보여주는 기능이 자동으로 되기 위해서다. navbar-header 에서 brand 말고 이상한게 붙은게 뭔가 했었다.


아래 코드 내부에 위 ul...코드를 넣어줘야한다는거다.


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">



</div>



합쳐보면..

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

            <?php if ($is_member) {  ?>

            <?php if ($is_admin) {  ?>

            <li><a href="<?php echo G5_ADMIN_URL ?>"><b>관리자</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php">정보수정</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>

            <?php } else {  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/register.php">회원가입</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/login.php"><b>로그인</b></a></li>

            <?php }  ?>

            <li><a href="<?php echo G5_BBS_URL ?>/faq.php">FAQ</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/qalist.php">1:1문의</a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/current_connect.php">접속자 <?php echo connect(); // 현재 접속자수  ?></a></li>

            <li><a href="<?php echo G5_BBS_URL ?>/new.php">새글</a></li>

</ul>


</div><!-- /.navbar-collapse -->


오케이..이렇게 해서 접속해보면 아래처럼 보이네.




오케이...













Posted by 똑똑한 영장류

혹시나 이글을 보고 따라하시는 분들이 계실까 글 남깁니다.


지난 해에 재미로 시작했다가 다른 일이 바빠서 못 하던거 다시 시작했습니다.

언제 또 중단될지 모릅니다.


완성될 때까지는 따라하지 마세요..ㅎㅎ





Posted by 똑똑한 영장류

그누보드에 부트스트랩 적용 - (2)



부트스트랩은 css 와 js 로 이루어져있다고 보면 되겠는데...

원래 그누보드에 있는 css 파일과 분명 부딪히는 일이 생길거 같다.


앞선 글에서 소스 보기를 하면 알 수 있는게, 


그누는 default.css 파일과 아래 js 파일들을 사용한다.

물론 admin 으로 로그인을 하면 admin.css 를 참조하긴 한다만...지금은 일반 로그인의 경우만 살펴봐야지.


<script src="http://appspop.com/js/jquery-1.8.3.min.js"></script>

<script src="http://appspop.com/js/jquery.menu.js"></script>

<script src="http://appspop.com/js/common.js"></script>

<script src="http://appspop.com/js/wrest.js"></script>


부트스트랩도 jquery 를 사용하는데, 버전이 맞을라나 모르겠네. 그건 나중에 부트스트랩에서 js 를 사용할 때 좀 더 확실히 살펴봐야겠다.



default.css 를 열어보니.... 레이아웃, 게시판용 css 등이 주석과 함께 작성이 되어있다.

그냥 두고 부트스트랩을 추가하면 충돌이 일어날 듯한데...


default.css 대신에 부트스트랩을 사용하고 필요한거는 하나씩 추가를 하는 방법으로 진행해야겠다.


일단 부트스트랩을 다운받아서 압축을 푼 후, 서버로 올려줬다. 다운받을 곳은 getbootstrap.com 이다.

현재 부트스트랩이 3.3.2 버전이고, 압축 풀어 올린 위치는 루트 디렉토리(www) 바로 아래 되시겠다.


www/bootstrap/css/

www/bootstrap/fonts/

www/bootstrap/js/


부트스트랩도 서버에 준비를 해 놨으니,

css 파일 추가 코드가 있는 head.sub.php 에 가서 수정을 하겠다. 빨간 색이 추가한 내용이다.


<title><?php echo $g5_head_title; ?></title>

<?php

if (defined('G5_IS_ADMIN')) {

    echo '<link rel="stylesheet" href="'.G5_ADMIN_URL.'/css/admin.css">'.PHP_EOL;

} else {

//    echo '<link rel="stylesheet" href="'.G5_CSS_URL.'/'.(G5_IS_MOBILE?'mobile':'default').'.css">'.PHP_EOL;

    echo '<link rel="stylesheet" href="'.G5_URL.'/bootstrap/css/bootstrap.min.css">'.PHP_EOL;    

}

?>



관리자로 로그인한 것이 아니라면, 그누보드는 부트스트랩을 이용하도록 했다. 관리자는 관리페이지가 틀어질까봐 일단 제쳐뒀다..


그다음, 부트스트랩이 사용할 js 파일은 추가해줘야겠는데... 이녀석이 jquery 를 사용한다.

jquery 는 그누에서도 사용을 하기때문에 head.sub.php 파일안에 보면 추가하는 부분이 있다.


<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>

<script src="<?php echo G5_JS_URL ?>/jquery.menu.js"></script>

<script src="<?php echo G5_JS_URL ?>/common.js"></script>

<script src="<?php echo G5_JS_URL ?>/wrest.js"></script>


1.8.3 버전을 사용하고 있다.


그러나!

부트스트랩 3.3.0은 아래 링크를 보면 1.9.1 이상이 필요하다고 한다. 

https://github.com/twbs/bootstrap/blob/v3.3.2/bower.json


난 현재 jquery 2.1.3 버전을 다운받아서 그누의 js 폴더아래에 jquery-2.1.3.min.js 로 업로드를 하고 head.sub.php 에서 2.1.3 으로 수정을 했다.

<script src="<?php echo G5_JS_URL ?>/jquery-2.1.3.min.js"></script>

그누의 기능 중 먼가 동작하지 않는 것들이 나오겠지.. 암튼..그건 나오면 고치고...


또...

부트스트랩이 사용하는 자바스크립트 파일인 bootstrap.min.js 를 어디다가 추가를 해줘야겠다.

부트스트랩 예제 템플릿을 보면 페이지 로딩 속도를 위해서 페이지 하단에서 포함시키고 있다.


그래서, tail.sub.php 에 아래처럼 추가를 해 줬다.



<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

<?php echo html_end(); // HTML 마지막 처리 함수 : 반드시 넣어주시기 바랍니다. ?>




이렇게 하고 브라우저로 접속해보면 하~~얗다.



* 그누보드에 부트스트랩 적용 (1) 과 (2) 글은... 지난해에 작성해뒀다가 오늘 다시 진행하기 시작하면서 몇개 버전이 달라진 것들을 수정했습니다.

포스팅이 작성된 날짜와 그 당시 버전과 다를 수 있습니다..





Posted by 똑똑한 영장류

그누보드에 부트스트랩 적용 - (1)


난 그누보드도 사랑하고 부트스트랩도 사랑한다.


그누보드 5.0.30을 서버에 설치를 해 봤다.


그저 그 그누보드의 코어를 사용하되 모습을 부트스트랩의 모습으로 바꾸어보고 싶어졌다.


그래서, 하나씩 살펴보려고 한다.



그누보드를 홈디렉토리에 바로 설치를 했을 경우, 서버에 접속하면 index.php 가 브라우저에 보여지게 된다.


index.php 소스를 열어서 들여다보면, 몇가지 파일들을 include 시키고 있으며, 브라우저 화면에 보여지게 될 '최신글'을 보여주기 위한 코드가 보인다.


브라우저에 보여지는 html 문서는 보통 아래의 모습을 띄게 된다.


<!DOCTYPE html>

<head>

....

</head>

<body>

여기에 메뉴가 들어간다고 가정하자..

....

페이지마다 다른 내용들이 이곳에 들어간다고 가정하자.

...

웹 페이지 하단에 항상 나타나는 내용들이 이곳에 들어간다고 가정하자.


</body>

</html>


<head></head> 안에 css, js 등을 포함시키기 위한 것들이 들어갈테고... 하나의 웹 페이지가 가지는 구성이 대략 이런 수준일거라는 거다.


그럼, index.php 에 저런 구성이 다 보이는가??? 그렇지 않다.


그누보드가 설치된, index.php 가 있는 루트디렉토리에 head.php, head.sub.php, tail.php, tail.sub.php 가 있는데, 이 파일들이 모두 모여서 index 가 보여주려고 하는 한 화면을 구성하게 된다. 


직접 열어서 확인하는 것이 좋다.


<!DOCTYPE html> 에서부터 <body> 태크가 시작되는 정도까지 head.sub.php 에 들어가 있고,

메뉴처럼, 항상 화면 상단에 보여지는 것들은 head.php 에 들어가 있고, 

index.php 가 보여주려고 하는 내용(예를 들어, 최신글...)은 index.php 에 들어있고,

항상 화면 하단에 보여질 내용은 tail.php 에 들어있으며, 

마지막으로 html 문서의 마지막 </body></html> 태그들은 tail.sub.php 에 들어가 있다.


나중에 index.php 가 아닌 새로 페이지를 작성해 줄 때, index.php 를 참고해서 만들면 head, head.sub, tail, tail.sub 파일들은 재사용이 가능한 것이다.



일단...다시 부트스트랩으로 만들어 볼 것이기 때문에, 그누보드가 가진 화면 출력내용을 모두 삭제를 해버렸다. 


그럼, 파일들이 어떻게 바뀌어야하나...???


index.php 파일은 최신글 어쩌구 하는 관련 내용들을 모두 지웠다. 


<?php

define('_INDEX_', true);

include_once('./_common.php');


// 초기화면 파일 경로 지정 : 이 코드는 가능한 삭제하지 마십시오.

if ($config['cf_include_index'] && is_file(G5_PATH.'/'.$config['cf_include_index'])) {

    include_once(G5_PATH.'/'.$config['cf_include_index']);

    return; // 이 코드의 아래는 실행을 하지 않습니다.

}


if (G5_IS_MOBILE) {

    include_once(G5_MOBILE_PATH.'/index.php');

    return;

}


include_once('./_head.php');

?>




<?php

include_once('./_tail.php');

?>




head.sub.php 에는...흠...그다지 지워버릴 것이 없다. <body> 태그가 열리고 나서, 이상한 코드가 있는데,일단을 그냥 두고 가보겠다.


head.php 에는...<!-- 상단 시작 { --> 이라는 주석부터 끝까지 모두 지웠다.


tail.php 에는 아래처럼 보이게 많이 지웠다.


<?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가


// 하단 파일 경로 지정 : 이 코드는 가능한 삭제하지 마십시오.

if ($config['cf_include_tail'] && is_file(G5_PATH.'/'.$config['cf_include_tail'])) {

    include_once(G5_PATH.'/'.$config['cf_include_tail']);

    return; // 이 코드의 아래는 실행을 하지 않습니다.

}


if (G5_IS_MOBILE) {

    include_once(G5_MOBILE_PATH.'/tail.php');

    return;

}

?>



<?php

include_once(G5_PATH."/tail.sub.php");

?>



tail.sub.php 는 손대지 않아도 될 거 같다.


이렇게 하고 index 에 접속해보면, 깨끗하네..ㅎ


index.php 를 구성할 때, 화면에 뭔가를 보여주 코드들을 모두 제거한 상태로 만들었다.


소스보기 해서 보면, 가장 기본적인 코드들이 보인다. 


이제 시작이다...



* 그누보드에 부트스트랩 적용 (1) 과 (2) 글은... 지난해에 작성해뒀다가 오늘 다시 진행하기 시작하면서 몇개 버전이 달라진 것들을 수정했습니다.

포스팅이 작성된 날짜와 그 당시 버전과 다를 수 있습니다..





Posted by 똑똑한 영장류



기본적으로 트위터 부트스트랩의 js 와 css는 잘 포함을 시켰다는 가정하에 진행합니다.



팝오버 보기

이녀석을 클릭했을 때, 팝오버가 나타나도록 하기 위해, jquery 로 설정을 해 둬야합니다.




그러면, 클릭했을 때, 기본적으로 오른쪽으로 팝오버 메시지가 나타납니다.


나타나는 방향을 설정하려면??



팝오버 보기


data-placement 에다가 top, right, bottom, left 를 지정해주면 됩니다.









Posted by 똑똑한 영장류

 

다음 지도 API v3를 이용해서 간단한 기능의 웹 페이지를 작성하던 중에 발견한 내용을 정리합니다.

다음 지도 API v3 를 이용해보려고, 우선 다음에서 제공하는 매뉴얼대로 테스트 페이지를 작성해서 실행해 보았습니다. 시키는대로 하면 아래와 같이 이쁘게 지도가 표시가 됩니다.


다음 지도 API v3 홈페이지 : http://dna.daum.net/apis/maps/v3

간단하게 API 사용법을 살펴본 후에, 제가 만들어보려던 웹 페이지를 만들면서 트위터의 부트스트랩 CSS 파일을 불러오도록 소스를 작성하였습니다.
트위터 부트스트랩 홈페이지 : http://twitter.github.com/bootstrap/

그렇게 트위터의 부트스트랩 CSS를 적용시키니까, 아래와 같이 지도가 제대로 표시가 되지 않더군요.


헐~...
트위터 부트스트랩에 있는 CSS 파일의 내용과 맞지 않는 부분이 있는 것 같습니다.
그래서 잠시 들여다보고 이유를 찾아냈습니다.

bootstrap.css 파일을 열어서 img 부분을 살펴보면 아래와 같습니다.

img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

다음 지도 API 가 지도를 특정 div 내에 img로 올리는 모양인데, max-width: 100%; 저부분이 문제인거 같습니다.

주석 처리한 후 확인을 해보니, 정상적으로 잘 보입니다.

트위터 부트스트랩은 원래대로 두고, 웹 페이지에 아래와 같이 style 을 지정해 봤는데, 소용이 없네요.

#map img {
/*  max-width: 100%; */
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

CSS가 상속이 되니 안 될수 밖에요...
그래서, 아래와 같이...

#map img {
  max-width: none;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

설정무시를 했더니 정상적으로 표시가 되는군요.
트위터 부트스트랩 건드리지 않고, 깔끔하게 해결할 방법을 찾았습니다.



Posted by 똑똑한 영장류