프로블로거가 알려주는 티스토리에 네이버지도 넣는 방법

 

▲네이버지도 넣는 방법을 알려드립니다.

 

안녕하세요. 반갑군요. 티스토리에 네이버지도를 넣고 싶은 경우 참 많습니다. 특히 맛집리뷰 포스팅, 여행지 포스팅을 올릴 때는 항상 지도를 첨부하여 많은 독자분에게 알리고 싶은 것이 모든 블로거의 마음이죠.

 

어째든 티스토리에 네이버지도를 넣고 싶어서 방문했다면 탁월한 선택을 하신 겁니다. 지금부터 프로블로거(?)의 꿀팁을 배워가시기 바랍니다.

 

 

 

 

 

 

 

 

 

우선 네이버지도를 살펴봅시다.

 

▲네이버지도 따오는 방법 설명

 

지도를 넣고 싶다면 해당 지역이 어디인지 알아야겠죠. 네이버지도에서 원하는 지역을 찾아봅니다. 저는 올림픽공원역을 예시로 들어보겠습니다. 네이버에 검색하니 단숨에 올림픽공원역을 알려주네요.

 

이제 원하는 지도영역을 따올 차례입니다. 네이버지도 우측 메뉴란을 보시면 클립모양이 있습니다. 위 사진에서 1번을 눌러주시면 됩니다. 그리고 2번 "HTML태크 편집기 및 미리보기"를 눌러주시면 가운데 큰창(3번)이 나타납니다. 위 3번 편집기에서 지도영역을 원하는 픽셀(Px)에 맞게 편집 할 수 있습니다. 저는 가로폭 355를 즐겨 쓰는데 이유는 아래서 설명드리죠. 원하는 영역을 선택하셨으면 4번 HTML복사를 눌러주시면 5번 창이 나타납니다. 5번에서 복사를 누르면 진짜 HTML 지도 태그가 복사됩니다. 이제 티스토리로 이동해서 삽입하면 됩니다. 따라오세요.

 

 

 

 

 

 

▲가로폭 355px 설정하는 이유

가로폭 355px로 설정하는 이유

간단합니다. 모바일 환경에서 지도가 짤리는 현상을 없애기 위해죠. 분명 반응형 스킨을 쓰고 있긴한데 네이버지도를 삽입했을때 355px이 넘어가면 모바일에서 지도가 짤립니다.(가로이동형태로 출력) 블로그에 모바일 유저가 많다면 고려해볼만한 사항이죠.

 

 

 

 

 

 

 

 

 

HTML모드로 접속하여 붙여넣기!

 

▲HTML 모드로 접속하여 붙여넣기 한다.

 

 

▲가운데 정렬이 되지 않는다.

 

이걸로 블로그에 네이버 지도를 삽입했으니 끝이다. 하지만 지도가 왼쪽 정렬이라서 심기가 거슬리네요. 문자 정렬을 가운데로 바꿔도 지도는 미동조차 없구요. 이는 HTML 태그이기 때문에 HTML모드로 접속해서 손을 봐주어야 합니다. 간단하니 따라해보세요!

 

 

 

 

 

 

 

 

 

아래 사진 태그를 넣어주자!

 

▲HTML모드에서 center 태그를 넣자

 

 

▲네이버지도가 가운데 정렬된 모습

 

<div align="center>,</div>를 지도태그의 상단과 하단에 넣어주면 보는 것처럼 가운데 정렬이 완료됐습니다. 위 정렬태그는 지도외에도 표를 삽입한 뒤 가운데 정렬할 때도 써먹을 수 있는 매우 유용한 팁입니다. 블로그를 할 의향이 있다면 외워두고 요긴하게 써먹을 수 있으니 참고하시면 좋겠죠! 이걸로 티스토리에 네이버지도 넣는 방법을 마치겠습니다!