카카오맵 지도 퍼가기 반응형 가로 사이즈(100%) 설정 방법

• 목록
• 스크랩

카카오맵 지도 퍼가기 반응형 가로 사이즈(100%) 설정 방법

그누보드 및 반응형 웹페이지에서 카카오맵 퍼가기 HTML 코드의 고정 가로 사이즈 문제를 해결하고 화면에 꽉 차게 설정하는 방법을 안내합니다.

카카오맵 퍼가기 지도 반응형 가로 사이즈(100%) 설정 방법

카카오맵 HTML 방식 지도 퍼가기로 가져온 코드는 기본적으로 가로 사이즈가 고정되어 있어 반응형 페이지나 모바일 화면에서 깨질 수 있습니다. 페이지 가로폭에 맞게 자동으로 꽉 차게 설정하려면 다음 두 가지 수정을 적용해야 합니다.

1. 지도 노드 div에 100% 스타일 추가

지도 노드 div 태그의 마지막 부분에 style="width:100%" 속성을 추가합니다.

<div id="daumRoughmapContainer1568979425094" class="root_daum_roughmap root_daum_roughmap_landing" style="width:100%"></div>

2. 실행 스크립트에서 가로 사이즈 옵션 삭제

실행 스크립트 객체 안에서 고정 픽셀 값을 지정하는 가로 사이즈 설정 옵션인 "mapWidth": "640", 코드를 삭제합니다.

new daum.roughmap.Lander({
 "timestamp": "1568979425094",
 "key": "v4qx",
 // "mapWidth": "640", <- 이 줄을 삭제합니다.
 "mapHeight": "360"
}).render();

3. (참고) 기기별 세로 높이 조건부 설정

반응형 사이트에서 PC와 모바일 기기를 구분해 세로 크기를 다르게 설정하고 싶다면 mapHeight 옵션을 다음과 같이 PHP 조건문으로 응용할 수 있습니다.

"mapHeight": "<?php if(is_mobile()) {?>250<?php } else {?>360<?php }?>"

기기별 세로 높이 조건부 설정

반응형 사이트에서 PC와 모바일 기기를 구분해 세로 크기를 다르게 설정하고 싶다면, 실행 스크립트 내 mapHeight 옵션에 PHP 조건문을 적용합니다.

"mapHeight": "<?php if(is_mobile()) {?>250<?php } else {?>360<?php }?>"

카카오맵 지도 퍼가기 반응형 설정

• 내 상황: 카카오맵 HTML 퍼가기 코드의 고정 가로폭을 반응형 화면에 맞춰 100%로 채우고 싶을 때
• 선택 기준: 지도 컨테이너 div에 고정 픽셀이 잡혀 있고 스크립트에 mapWidth가 설정된 경우
• 다음 행동: 지도 노드 div에 style="width:100%"를 추가하고 스크립트 내 "mapWidth" 옵션을 삭제함

실전 FAQ

• Q. 스크립트의 mapWidth 옵션을 삭제하지 않고 "mapWidth": "100%"로 수정하면 안 되나요?
  • A. 카카오맵 퍼가기 렌더러 스크립트는 픽셀 단위의 숫자 입력을 기준으로 동작하는 경우가 많아, 가로 사이즈 조절은 스크립트 내 옵션 삭제와 div 태그의 style="width:100%" 조합으로 처리하는 것이 안전합니다.
• Q. 반응형 환경에서 기기별로 지도의 세로 높이를 다르게 지정하려면 어떻게 하나요?
  • A. 실행 스크립트 내 mapHeight 설정 부분에 PHP 조건문(예: is_mobile())을 적용하여 모바일과 PC 환경의 세로 크기를 조건부로 다르게 출력할 수 있습니다.

함께 보면 좋은 글

• 그누보드 스마트에디터2 최소 가로 사이즈 제한 수정 방법
• 그누보드 로그인 페이지 소셜 로그인 버튼 가로 100% 레이아웃 수정 방법

참고자료

기타 참고자료

• gnustudy.com — 카카오맵 지도퍼가기 가로 사이즈 %로 설정하기 - 그누보드팁