[카카오맵] 카카오지도 반응형으로 삽입하기

처음에 지도를 가져올 때 1300 x 500으로 가져옴 (pc버전 시안 기준)

카카오맵에서 지도 html을 긁어온 뒤 2. 지도 노드 부분에 인라인으로 width:100%; height:100%를 삽입

3. 실행 스크립트 부분에서 width랑 height값을 지움

---

HTML

<div class="map-conbox">

<!-- * 카카오맵 - 지도퍼가기 -->

<!-- 1. 지도 노드 -->

<div id="daumRoughmapContainer1611561592701" class="root_daum_roughmap root_daum_roughmap_landing" style="width:100%; height:100%;"></div>

 

<!-- 2. 설치 스크립트 -->

<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>

 

<!-- 3. 실행 스크립트 -->

<script charset="UTF-8">

new daum.roughmap.Lander({

"timestamp" : "1611561592701",

"key" : "244ak"

}).render();

</script>

</div>

---

CSS

.contact-conbox .map-conbox {width:100%; height:500px;}

 

지도를 감싼 div에 height값을 줌 (반응형 경우 분기점마다 다르게 삽입)

---

*참고 사이트

https://sir.kr/qa/297381