[팁] 티스토리 지도 삽입 (카카오) + 모바일 필수 꿀팁!!

오늘은 티스토리 블로그에 지도를 첨부하는 방법을 알아볼게요.

티스토리에 후기나 리뷰를 올릴 떄 지도를 넣고 싶을 때가 종종 있지요.

저같은 경우에는 정보글을 올려야 할 때 지도를 첨부하는데요.

저와 함께 같이 지도를 첨부해보아요.

1. 카카오 맵에서 원하는 장소 검색!

https://map.kakao.com/

저는 투썸 대전 은행점을 검색했어요.

2.지도 가져오기

아래 사진에서 A라고 써있는 곳을 클릭해줍니다.

그러면 아래와 같이 세부 정보가 표시되는데요.

빨간 네모 버튼을 클릭해줍니다.

HTML 태그 복사 버튼을 클릭해줍니다.

아래와 같은 창이 뜨는데요.

저는 400x400 사이즈가 보기 편하더라고요.

원하는 지도크기를 입력하시고 '소스 생성하기' 클릭!

'이미지지도' 를 선택하시고 파란부분을 복사해주세요!

3.티스토리에 붙여넣기

글쓰기 모드를 HTML 로 변경해줍니다.

HTML코드에서 원하는 부분을 찾습니다.

저같은 경우는 지도를 삽입할 곳에 따로 표시를 해둡니다.

아래처럼요!

그러면 HTML 모드에서도 쉽게 확인이 가능합니다. 

원하는 곳을 찾으면 엔터를 3번정도 눌러서 간격을 만들어주고~

복사했던 코드를 붙여넣어줍니다.

코드가 삽입된 상태!

그럼 다시 글쓰기 모드를 기본모드 로 변경해줍니다.

그러면 짜잔 지도가 삽입되었어요!

4.(선택사항) 모바일에서 지도 안짤리게 하는 방법, 꿀팁!!!

위의 작업을 했을 경우 모바일에서 지도가 짤리는 경우가 종종 있어요.

이에 대한 해결방법을 같이 알아보도록 해요.

아래 사진은 모바일에서 지도가 짤린 모습이에요 ㅠㅠ. 수정을 해야겠지요?

자 다시 글쓰기 모드를 HTML로 변경해주시고요.

아래 5곳을 수정할거에요!

width 를 max-width 로!

height 을 max-height 으로 바꾸어주시면 됩니다.

그러면 모바일에서도 짤리지 않는 지도 삽입 완료!

잘 따라오셨나요?

차근 차근 따라하시면 하실 수 있으세요.

그럼에도 궁금하신게 있으시다면 언제든지 댓글 환영합니다 ^^

그럼 오늘도 행복하세요! :)