블로그에 네이버지도 반응형으로 넣기

안녕하세요. 메타로그입니다.

제가 그동한 포스팅한 것들중에서 네이버 지도를 포함한 포스팅들을 모바일로 봤는데 반쯤 잘려서 나오는걸 확인했습니다.

위치를 찾는데 좀 더 편안하라고 지도를 블로그에 첨부했는데 잘려서 나온다니... 차라리 지도를 이미지로 바꿔서 이미지를 반응형으로 나오게 하는게 훨씬 좋을까? 라는 생각을 했지만 지도를 반응형으로 넣는게 제 블로그를 찾는 사람들에게 좀 더 도움이 되는거라 생각이 들어 방법을 알아보았습니다.

네이버 지도 블로그에 넣는 법

1) 네이버 지도에서 HTML 태그 복사하기

- 네이버 지도 웹페이지에 보면 오른쪽 세로툴바 하단에 클립모양 아이콘이 있습니다. 해당 아이콘을 누르면 HTML 태그를 복사 할 수있고 HTML 태그 편집기 및 미리보기 링크를 통해 편집 또는 미리보기가 가능합니다.

- HTML 태그 편집기 및 미리보기에서는 크기와 지도 위치를 변경 할 수 있습니다. 반응형으로 넣는법을 알아보는 거니 기본형으로 하고 HTML 복사하기 버튼을 눌러 나오는 작업 팝업창에 복사를 클릭하여 HTML 태그를 복사합니다.

- 복사가 완료되면 아래와 같이 완료 팝업이 나옵니다.

2) 블로그에 네이버 지도 HTML 태그로 삽입 후 반응형으로 바꾸기

- 글쓰기 화면을 HTML로 변경한 다음에 지도를 넣는 곳을 정한 후 복사된 네이버지도 HTML 태그를 붙여넣기 합니다.

- 복사된 네이버지도 HTML 태그입니다. 아래 이미지에 1번과 2번 width 설정에 따라 반응형으로 변경 할 수 있습니다.

- 1번의 width 설정은 삭제, 2번의 width 설정은 100%로 변경합니다.

-변경한 네이버지도 HTML 태그 설정화면입니다. 빨간색 굵은 밑줄에서 1번 width 설정은 삭제됐고, 빨간색 굵은 네모의 width 설정은 100%로 변경하였습니다.

그럼 반응형을 적용하지 않은 네이버지도와 위와 같이 반응형 설정을 적용한 네이버지도 2개를 비교해보겠습니다. PC에서는 동일하게 보이지만 모바일에서는 확연하게 다릅니다.

반응형을 적용하지 않은 네이버지도

2019.4.14 | 지도 크게 보기 ©  NAVER Corp.

반응형을 적용한 네이버 지도

2019.4.14 | 지도 크게 보기 ©  NAVER Corp.

제가 가지고 있는 아이폰X에서의 화면입니다. 스마트폰의 가로길이에 맞추어 지도가 맞춰졌습니다. 가로만 반응형으로 나와 세로길이가 약간 어색하네요.

<네이버지도 반응형 결과>

이상으로 블로그에 네이버지도를 반응형으로 삽입하는 방법에 대해 알아보았습니다.