포스팅을 하다 보면 항상 포함되는 것이 지도입니다. 맛집이건, 유명한 장소이건 많은 분들이 지도를 포함시켜서 위치 정보를 전달하려는 목적이 있습니다. 일반 지도보다는 구글 지도를 사용하면 해외에 위치한 매장이나 유명한 장소를 넣을 수 있어서 정보 전달에 더욱더 큰 기능을 할 수 있습니다. 보통은 여행이나 맛집을 가기 전에는 블로그에서 이야기하는 평을 보는 것이 요즘 당연시되고 있는 상황이라서 위치까지 포함이 되어있다면 정말 큰 도움이 될 것입니다.
지난번에 포스팅에 달린 댓글입니다. 다음 지도 말고 구글 지도 삽입하는 방법을 문의하셨는데, 저는 오히려 다음 지도 삽입을 해본 적이 없네요. 처음 시작부터 구글 지도만 삽입을 했었습니다. 질문을 주신 분의 댓글애 또 다른 분도 궁금하다고 피드백을 주시는 바람에, 간략하고 쉽게 포스팅을 써보자는 생각을 했었습니다. 아마 다들 알고 계시는 부분이겠지만, 티스토리를 시작한 지 얼마 되지 않으신 분들을 위해서 작성을 해보도록 하겠습니다.
1. 구글 지도 검색 및 HTML 복사
먼저 구글 지도에서 원하시는 장소를 검색합니다. 위의 SEN PACHI는 제가 실제로 포스팅을 위해서 검색을 했던 스시집입니다. 검색을 하시고 나면 상호가 나올 것이고, 위의 두 번째 사진처럼 공유 버튼을 누르면 작은 창이 하나 실행이 될 것입니다.
그러고 나서 상단에 지도 퍼가기라는 항목을 누르시면 원하시는 장소가 조금 ZOOM-IN이 된 새 창이 뜰 겁니다. 우측에 보시면 HTML복사라는 항목이 나올 것이고 해당 버튼을 누르시면 두 번째 사진처럼 하단부에 '클립보드에 복사됨'이라는 문구가 나오면 해당 주소복사가 완료된 것입니다.
2. HTML에 구글 지도 링크 삽입
제가 지도를 넣고 싶은 위치는 소제목 1.SEN PACHI 위치 및 외관 하단부입니다. 그렇다면 현재 작성한 제목과 아래 내용 사이가 어디인지, HTML 페이지에서 살펴 보겠습니다. 우선 HTML 페이지로 들어가기 위해서는 상담에 기본 모드를 클릭하시고, 아래 나오는 HTML이라는 항목을 클릭하셔야합니다. 클릭 후에는 아래 사진처럼 화면이 바뀔 겁니다.
*HTML이란? Hyper Text Markup Language으로 가장 단순한 형태의 웹 언어를 의미합니다.
사진이 보기 더 편하실 겁니다. 위에 소제목과 내용이 작성되어 있는 구간을 찾습니다. 소제목과 글 내용 사이에 빈칸을 생성합니다. 빈칸을 의미하는 웹 언어 다음과 같습니다. '<p data-ke-size="size16"> </p>' 저는 보통 세칸 정도의 엔터를 누르고 HTML로 진입을 하는데 이렇게 하면 더 찾기 편하거든요. 위에 코드 세 개가 나열되어 있는 곳을 찾아보시면 됩니다. 가장 오른쪽에 보시면 번호가 있는데 이건 줄 번호입니다. 제가 빈칸은 만든 줄 번호는 18,19,20입니다.
그리고그러고 나서 18, 19, 20 총 세 줄의 코드 중에 19번 가운데 한 줄을 지웁니다. 그러면 이제 빈칸만 남을 겁니다. 그러고 나서 구글 지도에서 복사를 한 HTML주소를 붙여 넣기를 실행합니다. 그러면 19번 줄에 해당 주소가 전부 들어갈 겁니다.
여기서 끝난 건 아닙니다. 지도를 포스팅의 가운데 위치하기 위해서는 추가 작업이 있습니다. 19번 줄에 붙여넣기를 한 구글 지도 HTML 주소의 맨 앞에는 <center>, 맨 뒤에는 </center>를 삽입해줍니다. 이것이 지도가 가운데 위치하는 것을 의미합니다. 그리고 마지막으로 티스토리 모드를 기본 모드로 변경해서주면 아래와 같이 지도가 가운데 위치하는 것을 확인할 수 있습니다.
종합으로 정리를 하자면,
구글 지도에서 원하는 상호명 검색 → 상호명 공유 및 지도 퍼가기 클릭 → HTML 주소 복사 → 티스토리 HTML 모드 변경 → 지도 넣을 위치 확인 → 구글 지도에서 복사한 HTML 주소 붙여 넣기 → 주소 맨 앞에 <center>, 맨 뒤에 </center> 기입 → 티스토리 모드를 다시 기본모드로 변경 → 지도 삽입 정상 확인
글로 써놓은 부분은 조금 어려울 수 있습니다. 하지만, 사진들을 차근히 보시고 따라 하시면 크게 어려울 것 같지는 않네요. 포스팅은 전체적으로 보시고 궁금하시거나 모르시는 부분은 언제든지 댓글로 주시면 답변드리겠습니다. 여기까지 티스토리 구글 지도 삽입에 관한 포스팅이었습니다. 편안한 밤 보내세요!!
긴 글 읽어주셔서 감사드립니다!!
♡ 잘 보셨으면 구독과 공감 부탁드려요 ♡
잠. 깐. 만. 요~
저도 카카오 뷰 채널을 개설하였습니다.
채널 추가해주시고, 댓글로 본인의 채널 알려주시면,
바로 맞추갈게요!
일상 속 주식 이야기
일상(맛집, 여행), 주식이야기(종목분석, 시장분석, 수익실현)
pf.kakao.com
'리뷰 > 각종 리뷰' 카테고리의 다른 글
| 입덧으로 고생하는 임산부를 위한 치약 / 튼튼맘스치약 (93) | 2022.05.31 |
|---|
댓글