1.블로그관리

블로그 초보자 특집 - 티스토리 블로그에 네이버 지도 삽입하기

꿍스뿡이 2019. 6. 26. 12:38


 꿍스뿡이의 드림빌더 

티스토리 블로그에 네이버 지도 추가하는 방법 리뷰

안녕하세요. 꿍스뿡이입니다!

오늘은 티스토리 블로그에 네이버지도를 추가하는 방법에 대한 리뷰입니다.



1. 네이버 지도 - 원하는 장소 검색



우선 인터넷 검색창에 네이버 지도를 검색합니다. (주소 하단 링크 클릭)

(https://map.naver.com)


네이버지도에 접속하신 후 추가하고자 하는 곳을 검색합니다. 

검색을 완료하면 사진에서 보이시는 클립모양을 클릭해주세요.




2. 네이버 지도 - 코드 복사



클립모양을 클릭하면 위와같이 URL복사, HTML 태그 복사 버튼이 있습니다. 

별도의 설정을 할 필요가 없으신 분은 HTML 태그 복사 부분에 있는 복사버튼을 클릭하시면 됩니다. 


지도가 어떤식으로 나타나는지 확인을 한뒤 복사하길 원하시는 분은

상단 이미지의 HTML 태그 편집기 및 미리보기를 클릭해주시기 바랍니다.



HTML 태그 편집기 및 미리보기를 클릭하면 위와같은 화면이 나타나는데요.

해당 화면을 참고하여 크기와 위치를 조정하시기 바랍니다. 


크기는 기본형, 미니형, 사용자 설정이 있으며

위치이동은 화면을 드래그하며 지도를 움직일 수 있습니다.


원하시는 사이즈와 위치를 설정하셨다면 HTML 복사하기 버튼을 클릭합니다.




HTML 복사하기 버튼을 클릭하면 위와같은 HTML 소스코드가 나오는데요.

해당 코드의 복사버튼을 클릭해주세요.

여기까지 하셨다면 네이버 지도 소스의 복사는 완료되었습니다.

이제 티스토리 블로그에 적용해보도록 하겠습니다.





3. 티스토리 블로그 - 소스 복사(신 글쓰기)




현재 티스토리는 구버전의 글쓰기와 신버전의 글쓰기 모드를 제공하고 있습니다.

우선 신버전의 글쓰기 모드에서 적용하는 방법에 대해 말씀드리겠습니다. 

글쓰기 화면에 진입하면 상단에 기본모드가 있는데, 이를 클릭한 후 HTML을 클릭해주세요.



HTML을 클릭하면 위와같이 검은색 화면으로 바뀌게 되는데요. 

이때 네이버지도에서 복사한 소스코드를 붙여넣기 해주세요.

소스를 정상적으로 붙여넣으셨다면 상단의 기본모드를 다시 클릭해주세요.



정상적으로 붙여넣기를 하셨다면 기본모드로 적용했을때

위와같이 네이버지도가 삽입됩니다.




4. 티스토리 블로그 - 소스 복사(구 글쓰기)



구 버전의 글쓰기에서의 네이버 지도 삽입하는 방법입니다. 

글쓰기 화면에 진입하신 뒤 상단 오른쪽에 있는 HTML 체크박스를 체크해주시기 바랍니다.



정상적으로 체크가 되었다면 네이버지도 소스코드를 붙여넣기 하신 후

다시 HTML 체크박스를 클릭합니다.



정상적으로 붙여넣기를 하셨다면 위와같이 설정하신 네이버지도가 정상적으로 출력됩니다.





마무리


어떠셨나요? 따라하기 쉽게 만든다고 만들었는데 잘 적용되셨는지 모르겠네요^^

진행해보시다가 안되거나 궁금한 사항이 있으면 댓글 남겨주시기 바랍니다!

티스토리 블로그에 네이버 지도 삽입하는 포스팅은 여기서 마무리 하도록 하겠습니다.



관련글



 

내용이 도움이 되셨거나 초보 블로거를 응원하고 싶으신 분은 아래 하트♥공감 버튼을 꾹 눌러주세요! 

내용의 수정이 있거나 도움이 필요하신 분은 댓글을 남겨주세요!