본문 바로가기

다음지도 카카오맵 가로 사이즈 100% 맞추기

by 세상 밖으로 2021. 12. 22.

    찾아오시는길이나 약도를 표시할 때 다음지도(카카오맵)에서 지도퍼가기를 이용하는 경우가 있습니다.

     

    반응형 사이트를 제작할 때 아주 유용다음 지도 가로 사이즈를 항상 100%가 되게 수정하는 방법에 대해 알아봅니다.

     

    서울시청 지도를 예로 들어볼게요.

     

    지도 퍼가기로 소스 복사

     

    다음 지도에서 장소검색 후 공유하기 > html 태그 복사를 선택합니다.

     

     

    원하는 지도 크기를 설정할 수 있는데 %는 안되고 px 절대값으로만 입력이 가능합니다.

    기본 640 px * 360 px 입니다.

     

    우선 소스 생성하기를 클릭해서 소스를 복사하세요.

     

     

    복사한 지도 소스를 붙여넣으면 아래와 같이 보입니다.

     

    <!-- * 카카오맵 - 지도퍼가기 -->
    <!-- 1. 지도 노드 -->
    <div id="daumRoughmapContainer1640149976068" class="root_daum_roughmap root_daum_roughmap_landing"></div>
    
    <!--
      2. 설치 스크립트
      * 지도 퍼가기 서비스를 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" : "1640149976068",
        "key" : "28iiw",
        "mapWidth" : "640",
        "mapHeight" : "360"
      }).render();
    </script>

     

    이제 어디를 수정해야 할지 알려드릴게요.

     

    가로 사이즈 주석처리

    3번 실행 스크립트에서

    가로 사이즈 설정 부분인

    "mapWidth" : "640", 을 주석 처리해줍니다.

     

    // "mapWidth" : "640", 이렇게요.

     

    * mapwidth 는 가로 사이즈

    mapheight 는 세로 사이즈입니다.

     

    <!-- 3. 실행 스크립트 -->
    <script charset="UTF-8">
      new daum.roughmap.Lander({
        "timestamp" : "1640149976068",
        "key" : "28iiw",
        // "mapWidth" : "640", //가로
        "mapHeight" : "360" //세로
      }).render();
    </script>

     

    지도 노드에 style 추가

    그런 다음 1번 지도 노드에서

    div 끝부분에 style을 추가합니다.

    <div id="" class="" style="width:100%;">

     

    <!-- 1. 지도 노드 -->
    <div id="daumRoughmapContainer1640149976068" class="root_daum_roughmap root_daum_roughmap_landing" style="width:100%;"></div>

     

    세로 사이즈 mapheight 수정

    가로를 100%에 맞췄더니 세로가 너무 좁아진다 싶으면 mapheight 를 조정해 주세요.

    360 → 500

    수정을 마친 소스는 아래와 같습니다.

     

    <!-- * 카카오맵 - 지도퍼가기 -->
    <!-- 1. 지도 노드 -->
    <div id="daumRoughmapContainer1640149976068" class="root_daum_roughmap root_daum_roughmap_landing" style="width:100%;"></div>
    
    <!--
      2. 설치 스크립트
      * 지도 퍼가기 서비스를 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" : "1640149976068",
        "key" : "28iiw",
        // "mapWidth" : "640", //가로
        "mapHeight" : "500" //세로
      }).render();
    </script>

     

    만약 별도의 파일에 css를 분리해서 사용한다면 

    가로 사이즈만 주석처리하고

    사용하는 .css 파일을 열어 아래 스타일을 추가하면 됩니다.

     

    .root_daum_roughmap {width:100% !important;}

     

    [HTML] video 태그로 백그라운드 영상 삽입하기

     

    [HTML] video 태그로 백그라운드 영상 삽입하기

    요즘 홈페이지를 보면 메인 화면 배경에 동영상이 자동재생되는 디자인들이 자주 보이는데요. 메인 비주얼이나 배경에 영상을 넣는 것이 새로운 트랜드인것 같아 태그로 영상 삽입하는 방법을

    comple.co.kr

    반응형

    댓글0