[티스토리] Tistory 구글 지도 삽입 및 중앙정렬 - 초간단 설명

티스토리 사용기

 

- Tistory 구글 지도 삽입

 

블로그 포스팅 내

 

구글 지도를 첨부하는 초간단 방법

 

 

 

 

 

1. 구글 지도에 들어간다.

www.google.co.kr/maps/

Google Maps

 

우선은 구글 지도 사이트에 직접 들어간다.

티스토리 글쓰기 상태에서 자체적으로 접근할 수는 없기 때문에

직접 사이트에 들어가야 한다.

 

 

 

 

2. 원하는 장소를 검색한다.

 

정확한 장소를 검색하자.

 

 

 

3. [공유] -> [지도 퍼가기] -> [HTML 복사] 클릭

 

 

참고로 [중간] 저 부분을 누르면 사이즈도 선택할 수 있다.

 

기본적으로 작게, 중간, 크게 중에서 선택할 수 있으며

'맞춤 크기'를 선택하면 사이즈를 직접 입력하는 것도 가능하다.

 

 

 

4. 복사된 코드를 HTML 창에서 삽입

 

 

[기본모드] -> [HTML] 모드로 바꿔서

원하는 위치에 복사한 코드를 삽입한다.

적당히 줄을 띄워 놓으면 위치를 파악하기가 편하다.

 

 

 

여기까지 하면 끝!

 

 

 

 

하면 아쉬우니까

 

추가 옵션 설명!

 

 

1) 반응형 사이즈 설정하기

 

퍼온 지도의 HTML 코드에서

width="100%" height="auto" 이렇게 바꿔주면

모바일에서 적절한 '반응형' 사이즈가 된다.

 

 

2) 지도 중앙 정렬하기

 

지도를 그냥 넣으면 기본적으로 왼쪽 정렬이 된다.

중앙 정렬로 바꾸고 싶다면 다음 코드를 추가하자.

 

<div align="center">

 

</div>

 

 

퍼온 지도 코드 위아래로 추가해주면 된다.

 

 

 

 

 

 

 

아래 실제 적용 예시들을 참고하자.

 

 

 

*크기 '중간'으로 설정한 지도

 

 

 

 

 

 

*크기 width="100%" height="auto"로 설정한 지도

 

 

 

 

 

 

*크기 '중간' + '중앙 정렬' 설정한 지도

 

 

 

 

 

 

진짜 끝~!