티스토리 구글 맵 지도 첨부 / 구글 맵 지도 가운데 정렬 및 크기 바꾸기

티스토리 내 구글 맵 지도 첨부/구글 맵 지도 가운데 정렬 및 크기 바꾸기

 

저는 오늘 티스토리에 처음으로 구글 맵 지도를 넣어봤어요. 티스토리 메뉴에 카카오 맵 지도 첨부도 있지만 구글 맵 지도가 더 인지도 있으니 구글 맵 지도를 첨부했습니다. 첨부하면서 새로 공부하게 된 것들 공유해봅니다.

저처럼 구글 지도 첨부 처음인 분들 함께 따라 해 봐요^^

---

 

 

티스토리 구글 맵 지도 첨부/가운데 정렬/크기 바꾸기

 

 

티스토리 구글 맵 지도 첨부하기(pc버전)

반응형

먼저 구글 맵에 접속합니다.

google maps

Google Maps

 

원하는 장소를 검색합니다. 저는 얼마 전 개막한 KBO 프로야구가 열리는 잠실야구장을 검색해보겠습니다.

①검색란에 찾고자 하는 곳을 검색합니다. 검색한 다음 ②공유를 눌러주세요

 

구글 맵 지도

 

 

공유를 누르면 두 가지가 나오는데 그중에 ③지도 퍼가기를 선택해주세요. 그러면 HTML 코드가 나옵니다. 이제 ④HTML 복사를 눌러주세요.

 

 

구글 맵 지도 퍼가기 - HTML 복사

 

 

이제 내 티스토리 글쓰기 모드에서 상단 기본모드를 클릭해주세요. 기본모드를 클릭하면 HTML 보이시죠? 

 

 

티스토리 글쓰기 모드 기본모드

 

HTML를 클릭해주세요. HTML 겁먹지 말고 따라와 주세요. 지금까지 잘 따라오셨다면 충분히 하실 수 있어요. 어렵지 않아요.

좀 전에 구글 맵 지도에서 HTML 복사해 온 거 잊지 않으셨죠? 이렇게 검게 변한 화면에 붙여 넣기 해주세요. 

 

 

구글 맵 지도 퍼가기 HTML 복사한거 붙여넣기

 

 

저는 예를 들기 위해 새로운 글쓰기를 했어요. 만약 글 쓰는 중간에 넣을 땐 ENTER를 쳐서 공간 확보를 해 놓은 다음에 복사한 HTML 주소를 넣을 위치에 붙여 넣기 해주시면 됩니다.
 

이제 기본모드로 넘어가 봅니다. 아래와 같이 구글 지도가 나오는 것을 확인할 수 있습니다.

그런데 왼쪽 정렬이라 안 이쁩니다. 항상 하던 대로 가운데 정렬 눌렀는데 변경이 안됩니다. 

구글 맵 지도 첨부하기 어라 그런데 왼쪽 정렬이네요 ㅠㅠ

 

이럴 땐 가운데 정렬하는 코드를 삽입하면 됩니다. 크기도 좀 작으니 너비만 조금 바꿔보겠습니다.

구글 맵 지도 가운데 정렬 및 크기 바꾸기

 

구글 맵 지도를 가운데 정렬하기 위해서 좀 전에 구글 맵에서 복사해서 붙여 넣기 한 html 코드 위에는 <div align="center">를 적고 아래에는 </div>를 적어 줍니다. align은 정렬 방식, center는 가운데를 뜻합니다.

 

 

div 코드 삽입

 

 

tmi. HTML(Hypertext Markup Language)이란 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류입니다.

<div> 태그는 Division의 약자로 HTML 문서에서 특정 영역이나 구획을 정의할 때 사용합니다.
사용 구문은 <div> 영역 </div>입니다.

잘 안 보이니 확대해보면 아래와 같습니다. html 태그는 <div></div> 이렇게 세트로 써야 함을 기억해주세요!

 

 

div 코드 삽입

 

 

결과를 확인해 보면 다음과 같습니다. 가운데 정렬이 잘 되었습니다.

 

 

구글 맵 지도 가운데 정렬하기 div 코드 삽입

 

구글 맵 지도 사이즈 너비가 좀 작아 보이네요. 이렇게 사이즈 크기를 변경하고 싶을 땐 width와 height를 변경해주면 됩니다.

 

티스토리 html모드

 

잘 안 보이니 빨간색 박스 부분만 확대해보면 다음과 같습니다.

 

티스토리 html모드

 

저는 width = "800"으로만 변경했습니다. 아래와 같이 너비 폭이 커졌습니다.

 

구글 맵 지도 크기 변경 하기

 

지금까지 티스토리 내 구글 맵 지도를 첨부하고 가운데 정렬하는 법과 크기 바꾸는 방법에 대해 알아보았습니다. 구글 맵 지도 첨부 잘 활용하시길 바랍니다. 읽어주셔서 감사합니다.🤗