[블로그] 티스토리 구글 지도 반응형으로 넣는 방법 - 1분 안에 간편하게 삽입!

티스토리 블로그에 구글 지도 삽입하는 법

---

티스토리 블로그에 반응형 구글 지도 삽입하기

1분 안에 간편하게 넣는 방법!

---

 블로그를 운영하다보면, 구글 지도를 포스팅에 넣어야 할 경우가 많이 있습니다. 저도 특히 여행 블로그를 별도로 운영하면서, 구글 지도를 삽입할 때가 많은데요. 구글 지도를 특히나 반응형으로 넣을 수 있습니다. 반응형 구글 지도란, 지도를 첨부한 포스팅 안에서 블로그 방문자가 직접 지도의 위치를 움직이고 확인해볼 수 있는 지도에요. 아래를 활용하여, 블로그 운용의 필수, 구글 지도 첨부 방법을 알아보아요!!

 

---

#  글쓰기에서 HTML 모드로 바꾸기

 먼저, [글쓰기]로 들어가, [기본모드] - [HTML] 모드로 변경합니다. HTML은 쉽게 설명하면, 컴퓨터 프로그래머들이 활용하는 컴퓨터 언어라고 보시면 돼요. 우리가 편리하게 글쓰기 기본모드에서 글을 쓰고 글자체와 크기 등을 바꾸면, HTML 상에서 컴퓨터 언어 소스가 그에 맞게 달라집니다! 그리고, 우리가 바꾸는 대로, 포스팅이 변하게 되는 것이죠. 모두 이 HTML 상의 언어들이 있기에 가능하답니다! 우리는 반응형 구글 지도를 삽입할 때, 이 HTML 모드에서 컴퓨터 언어를 조금 손볼거에요. 어렵게 들리지만, 방법은 굉장히- 쉬우니 걱정하지 않으셔도 돼요! HTML 모드를 선택하게 되면, ▼아래와 같은 검은 색 바탕의 화면이 뜨는데, 혹시 포스팅 안에 글을 이미 쓰셨다면 요 아래 빈 공간은 여러 컴퓨터 언어들로 가득할 거에요. 꼭! 모드를 바꾸기 전, 자신이 구글 지도를 넣고 싶은 곳에 커서를 놔두고 화면을 바꿔주세요!!

 

 

티스토리 블로그 HTML 화면

---

#  구글 맵에서 지도 소스 가져오기(복사하기)

구글 맵에서 삽입할 지도 가져오기

 

 그 다음에는 구글 맵에서 지도 소스를 가져옵니다. (https://www.google.com/maps) 자신이 포스팅하고 싶은 위치를 찾아서 [공유] - [지도 퍼가기] - [HTML 복사]를 차례로 선택해주세요. 그러면, 클립 보드에 HTML 주소가 자동으로 복사가 될 거에요.

 

---

#  지도의 HTML 소스 붙여넣기

티스토리 블로그 HTML 지도 소스 붙여넣기

 그런 다음에는, 티스토리 블로그의 HTML 모드에서 자신이 원하는 위치에 해당 지도 소스를 붙여 넣어주세요. ▼아래와 같이 구글 맵에서 가져온 HTML 소스가 입력되는 것을 볼 수 있을 거에요.

 

---

#  지도 소스 변경하기

 이제 마지막 단계! 붙여넣은 구글 지도 언어 중에, width="600" 부분을 width="100%"으로 수정합니다. 600을 100%로만 수정한다고 생각하시면 돼요. 그럼 티스토리 블로그에 구글 반응형 지도 삽입하기, 끝입니다!

 

구글 맵 HTML 소스 변경하기

---

#  기본모드로 돌아가서, 포스팅 작성 마무리하기!

티스토리 블로그에서 구글 반응형 지도 삽입하기

 

 이제 기본모드로 돌아가서 확인하면, 구글 지도가 포스팅 안에 삽입되어 위치하고 있는 것을 볼 수 있습니다! 어렵지 않죠? :) 모두들 즐거운 블로그 포스팅 되세요!! 질문이 있으시다면 언제든 댓글로 문의주세요.

 

 

▼ 블로그 운영의 기본, 사이트맵 생성/ 추가하기 ▼

[블로그] 사이트맵 생성 및 추가하기 - 티스토리, 구글 서치콘솔

▼ 파워포인트로 블로그용 이미지 사진 만들기 - 3분 컷! ▼

 

[파워포인트] 블로그용 이미지 사진 만드는 간단한 방법!