티스토리에 구글지도 넣는 법(새 에디터)

티스토리에 새 에디터가 적용되면서 구글 지도를 삽입하는 법이 달라졌습니다. html 코드를 직접 삽입하는 방법을 이용하기 때문에 기존의 방식과는 약간 다릅니다. 바로 글쓰기로 이동해서 알아보겠습니다.

 

이렇게 우선 글을 쓰는것을 추천드립니다

우선 지도 삽입 앞뒤로 글을 써두는 것을 추천드립니다. html 코드를 직접 링크하고 지도를 가운데 정렬 하기 위해서는 이렇게 하는 것이 편합니다.

 

지도를 검색한 후에, 공유 메뉴를 클릭한 후, 지도 퍼가기 버튼을 눌러줍니다.

 

우측의 지도 퍼가기를 클릭합니다. 구글지도는 삽입 시에 원하는 사이즈로 삽입할 수 있습니다. 맞춤 크기로 설정하고 HTML 코드를 복사해줍니다.

 

새 에디터 우측에서 글쓰기 모드 설정을 '기본모드'에서 'HTML'로 변경해주면 다음과 같이 검은 바탕에 코드들이 나열되어 있는 것을 확인할 수 있습니다.

 

원하는 부분에 아까 복사한 링크를 삽입해주시면 됩니다. 사진을 자세히 보시면 제가 삽입한 링크 위아래로 &nsbp; 라는 기호가 적혀있습니다. 이 기호는 웹에서 공백을 의미하는 기호로, 제가 가독성을 위해 지도 위아래로 한칸을 띄어써서 기록된 것입니다.

 

그럼 다음과 같이 웹에서 지도를 삽입할 수 있습니다. 

 

그런데 이렇게만 작성하면 모바일에서 이 글을 볼 때 지도가 옆으로 밀리는 단점이 생깁니다. 전혀 보기에 좋지 않습니다. 그래서 모바일 반응형으로 이 지도를 수정해 주는게 좋습니다.

 

삽입한 지도의 html 코드 부분에서 width 부분이 기존에 800으로 설정해 뒀던 것을 100%로 바꿔줍니다.

 

그럼 모바일에서도 이렇게 반응형으로 자동으로 화면 안쪽으로 지도가 들어옵니다. 그런데 제가 보기에는 이제 지도가 너무 길쭉해서 보기가 싫습니다. 그냥 세로 길이도 반응형으로 맞추고 싶으신 분은 이렇게 해주시면 됩니다.

 

 

이번에는 height를 'auto'로 설정해 주면 다음과 같은 결과를 확인할 수 있습니다.

 

모바일에서도 적당한 크기로 지도가 삽입되었고, pc에서도 적당한 크기로 지도가 삽입되었습니다. PC 환경에서 지도는 800 * 600이 확실히 보기 좋은 것 같은데, 모바일에서 잘리는 문제가 있고, 그렇다고 모바일 해상도에 최적화 시키자니 디바이스별로 해상도가 달라서 auto로 삽입하는 것이 가장 좋아보입니다.

 

오늘은 티스토리 새 에디터에서 구글지도를 삽입하는 방법에 대해서 알아봤습니다. 

 

도움이 되셨다면 로그인이 필요 없는 공감하기를 눌러주세요! 블로그 운영에 힘이 됩니다