블로그에 구글지도를 반응형으로 넣어보자!
구글지도를 티스토리 블로그에 넣어보려고 하니 크기가 고정이 되어서 미관상 좋지가 않았다. 블로그도 반응형인데 구글지도 또한 반응형으로 포스팅을 하면 좋을 것 같아 코드를 살펴보니 가로부분의 수치가 고정되어 있던 것. 구글지도를 반응형으로 바꿔 가독성을 높이는 방법을 알아보겠다.
블로그에 구글지도를 반응형으로 넣어보자!
먼저 구글지도를 블로그에 넣는 방법을 알아보겠다.
1. 구글지도에 접속하여 원하는 곳을 검색하고 공유를 눌러준다.
필자는 홍대입구역을 검색하였다.
2. 지도 퍼가기를 눌러준다.
3. 지도의 크기를 조절하여 URL값을 얻어준다.
URL은 아래 사진의 긴 빨간색 박스 부분이다.
여기서 주의할 것은 맞춤크기는 반응형이 아닌 아래의 사진처럼 너비와 높이를 사용자가 정하여 사용할 수 있다.
적절한 크기를 설정하고 URL주소로 티스토리 글에 넣어보도록 하자.
4. URL 값을 티스토리글작성 페이지 상단의 URL을 누르고 값을 입력해준다.
여기까지 구글지도를 티스토리 블로그에 넣는 방법이고 이제 반응형으로 바꿔주는 방법을 알아보도록 하겠다.
구글지도를 반응형으로 넣어주는 방법 !
방법은 간단하다. 아무 사이즈의 구글지도 URL 코드값을 구하고 살짝 변경해주면 된다. 위에서 지도의 URL 값을 복사하여 메모장에 붙여넣으면 다음과 같다.
URL의 끝부분에 width="800" 부분이 보일 것이다. 어떤 값이 들어 있든 상관은 없다. 이부분을 아래 사진과 같이 width="100%" 로 바꿔주도록 하자. 추가로 반응형구글지도의 높이를 변경하고 싶다면 height="600" 부분을 적절한 값으로 수정해주도록 하자.
코드가 변경된 모습이다. 이제 수정한 코드를 복사하여 티스토리에 URL 첨부를 해주면 아래처럼 PC와 모바일 모두 가로에 꽉차는 반응형 구글지도가 완성될 것이다.
블로그와 애드센스 모든 꿀팁 총정리 보러가기
어디서든 " 희망이야기 " 검색 !
