티스토리 블로그에 구글 지도 반응형으로 넣기

티스토리 블로그에 구글 지도

반응형으로 넣는 방법

티스토리 블로그에 기본으로 첨부할 수 있는 지도는 다음 지도인데

다음 지도 말고도 네이버나 구글 지도를 넣을 수도 있습니다.

특히나 구글 지도가 대세인데 요즘은 모바일로 검색하는 분들이 많아

구글 지도를 이왕이면 반응형으로 첨부하는 것이 좋은 것 같습니다.

오늘은 구글 지도 반응형으로 넣는 방법을 알아봅시다.

구글에서 원하는 곳을 검색하면 나오는 화면입니다.

여기에서 중간에 위치한 파란색의 공유 표시를 눌러줍니다.

링크로 첨부하고 싶다면 주소를 복사해 넣으면 되는데

구글 지도를 포스팅에 바로 첨부하려면 옆에 있는 지도 퍼가기를 이용합니다.

지도 퍼가기를 누르면 html 태그 주소가 나오는데 이를 복사해줍니다.

그냥 포스팅에 붙여넣기 하면 고정형으로 적용되기 때문에 반응형으로 넣으려면

메모장에서 이를 붙여넣기해 width 사이즈를 100%로 수정합니다. 

티스토리 블로그 포스팅 창에서 외부컨텐츠를 선택해주고

아까 수정한 코드를 복사해서 붙여넣기 하면 됩니다.

메모장 붙여넣기 과정없이 여기에서 바로 수정해도 됩니다.

PC 화면에서는 이렇게 꽉 찬 사이즈로 적용된 모습인데

모바일로 확인해보면 지도 크기가 창 크기에 맞게 보이게 됩니다.

티스토리 블로그에 구글 지도 첨부하는 방법도 간단하고

반응형으로 바꾸는 것도 무척 간단해서 유용하게 사용할 수 있겠습니다.