티스토리에 네이버 지도 넣는 방법 (중앙정렬 하는법 까지)

예전에 티스토리 글쓰기에서 구글 지도를 넣는 방법에 대해서 알아봤습니다. 하지만 구글 지도에 등록이 되지 않은 장소도 있을 수 있습니다. 이럴때는 우리나라에서 많이 이용하고 있는 네이버 지도를 통해서도 지도를 첨부할 수 있습니다. 어떻게 진행하는지 그 과정을 알아보도록 합니다.

네이버 지도 첨부하기

먼저 첨부하고자 하는 장소를 찾습니다. 저는 "서울대학교" 를 예시로 진행 하겠습니다. 네이버 지도 링크는 여기를 누르시면 바로 이동하실 수 있습니다.

네이버 지도에서 서울대학교를 검색했습니다. 저는 관악캠퍼스를 타깃으로 정했습니다. 브라우저의 맨 오른쪽에 보시면 이렇게 링크 아이콘이 있을겁니다. 클릭합니다.

그러면 작은 창이 하나 더 뜹니다. 여기에서 HTML 태그 복사 부분에 있는 HTML 태그 편집기 및 미리보기 항목을 누릅니다.

구글 지도와는 다르게 아쉽게도 네이버 지도 크기는 고정형태 입니다. 저는 사용자 설정으로 가로의 최대 크기인 534px, 세로는 418px 로 지정했습니다. 그리고 지도를 마우스로 적절히 드래그해서 목표하는 위치가 중앙에 오도록 만듭니다. 완료되었으면 맨 아래의 HTML 복사하기 버튼을 누릅니다.

또 작은 창이 하나 더 뜹니다. 그냥 복사 버튼만 눌러주시면 됩니다.

HTML 코드가 클립보드에 저장되었다는 메세지가 출력됩니다. 확인을 눌러 닫습니다.

이제 티스토리에서 글 작성 시, 외부컨텐츠 버튼을 눌러서 HTML 소스입력창에 그대로 Ctrl + V 를 눌러서 붙여넣기를 하시고 확인을 눌러주시면 네이버 지도의 "서울대학교 관악캠퍼스" 위치가 첨부됩니다. 하지만 이대로 삽입하면 왼쪽 정렬로 진행됩니다. 중앙정렬을 하시고 싶다면 다음의 방법을 추가로 진행해야 합니다.

네이버 지도 중앙정렬 방법

먼저 복사된 코드를 메모장에 임시로 붙여넣기를 합니다. 그리고 아래의 밑줄 친 부분을 찾습니다.

가장 처음 부분일 것 입니다. 536은 네이버 지도 가로 크기를 말합니다. 사용자가 지정한 크기에 따라 해당값이 변경이 됩니다. 추가로 넣어줘야할 태그는 다음과 같습니다. 첨부파일에 같이 올려놓겠습니다.

style="display:block; position:relative; left:50%; transform: translateX(-50%);"

티스토리 네이버 지도 중앙정렬.txt

이것을 저 밑줄 친 부분의 table 태그 안에 넣어야 합니다. 방법은 아래와 같습니다.

이렇게 추가 삽입하시고 전체 태그를 복사하셔서 사용하시면 티스토리 내에서 중앙에 위치하게 됩니다. 사실 간단하게 text-align:center 로 될 줄 알았는데 그게 안되더군요. 그래서 display 속성도 inline-block 요소로 변경을 해도 텍스트 얼라인 정렬이 적용되지 않아서 부득이하게 position 을 이용한 정렬 방법을 사용해야만 했습니다.