지도를 반응형으로 넣는 방법문의 드립니다. 채택완료

테마를 사용하고 있고요.(basic에서도 동일)

index.php 화면의 최신글 위에 카카오지도를 넣으려고 합니다.

지도를 넣다 보니 반응형으로 되지 않아서  반응형으로 만드는 방법을 문의 드립니다.

아래 처럼 <div>로 삽입되는 것으로 그누보드와 별개로 넣는것인데 방법이 있는지요?

고수님의 조언을 구합니다. 감사합니다.

<?php

define('_INDEX_', true);

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

if (G5_IS_MOBILE) {

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

    return;

}

if(G5_COMMUNITY_USE === false) {

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

    return;

}

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

?>

<!--kakao map start-->

<div id="map" style="width:400px;height:200px; border: #EF1417 solid thick; "></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=855f8********"></script>

<script>

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 

    mapOption = { 

        center: new daum.maps.LatLng(35.85824, 128.63060), // 지도의 중심좌표

        level: 3 // 지도의 확대 레벨

    };

var map = new daum.maps.Map(mapContainer, mapOption);

// 마커가 표시될 위치입니다 

var markerPosition  = new daum.maps.LatLng(35.85824, 128.63060); 

// 마커를 생성합니다

var marker = new daum.maps.Marker({

    position: markerPosition

});

// 마커가 지도 위에 표시되도록 설정합니다

marker.setMap(map);

var iwContent = '<div style="padding:5px;">Hello World! <br> <img src="img/gnu_icon.gif"> <a href="http://map.daum.net/link/map/Hello">http://map.daum.net/link/map/Hello World!,35.85824, 128.63060" style="color:red" target="_blank">큰지도보기</a> <a href="http://map.daum.net/link/to/Hello">http://map.daum.net/link/to/Hello World!,35.85824, 128.63060" style="color:blue" target="_blank">길찾기</a></div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다

    iwPosition = new daum.maps.LatLng(33.450701, 126.570667); //인포윈도우 표시 위치입니다

// 인포윈도우를 생성합니다

var infowindow = new daum.maps.InfoWindow({

    position : iwPosition, 

    content : iwContent 

});

infowindow.open(map, marker);

</script>

<!--kakao map end-->

<h2 class="sound_only">최신글</h2>

<!-- 최신글 시작 { -->

<?php

//  최신글

$sql = " select bo_table

            from `{$g5['board_table']}` a left join `{$g5['group_table']}` b on (a.gr_id=b.gr_id)

            where a.bo_device <> 'mobile' ";

if(!$is_admin)

    $sql .= " and a.bo_use_cert = '' ";

$sql .= " order by b.gr_order, a.bo_order ";

$result = sql_query($sql);

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

    if ($i%2==1) $lt_style = "margin-left:20px";

    else $lt_style = "";

?>

    <div style="float:left;<?php echo $lt_style ?>">

        <?php

        // 이 함수가 바로 최신글을 추출하는 역할을 합니다.

        // 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);

        // 테마의 스킨을 사용하려면 theme/basic 과 같이 지정

        echo latest('theme/test', $row['bo_table'], 5, 25);

        ?>

    </div>

<?php

}

?>

<!-- } 최신글 끝 -->

<?php

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

?>