안녕하세요! 기미승궁입니다.
방문해 주셔서 감사합니다!
오늘 포스팅해볼 내용은 'Html편집을 이용한 해외 지도 첨부'
"저는 Html이 뭔지 1도 모르고, 잘못될까 봐 무서워서 건드리지도 못하겠어요ㅠㅠ"
걱정 마시라!
해외 지도 첨부는 매우 매우 쉽고, Html도 건드릴게 그렇게 많지 않아요 ㅎㅎ
그래도 불안하실까 봐 캡처 화면과 함께 아주 자세히 설명되어 있으니 같이 해볼까요?
INDEX
1. 구글 지도에서 Html주소 퍼오기
2. Html편집을 이용한 지도 첨부
3. 해외 지도 가운데 정렬하기
1. 구글 지도에서 Html주소 퍼오기
티스토리 글을 작성하는 페이지에서 바로 지도 첨부를 할 경우 해외는 나오지 않아요ㅠ
제가 직접 해외 지도 첨부하는 과정을 캡처해서 하나하나 보여드릴 건데
'에펠탑'을 예시로 들어볼게요!
먼저 '구글 지도'에 들어가셔서 원하시는 장소를 검색해줍니다.
저는 '에펠탑'이라고 검색하니 바로 나오네요
사진에 보이는 '공유'버튼을 눌러주면
이런 화면이 나오는데
'지도 퍼가기'누른 후
아래 나오는 Html주소를 복사해주세요
2. Html편집을 이용한 지도 첨부
다시 티스토리 글 작성 화면으로 돌아와서 지도를 첨부할 위치(저는 '사진'과 '설명' 사이에 해외 지도를 넣어볼게요)에 아무 글자를 써주세요
저는 '지도'라고 써보겠습니다.
그다음 '기본 모드'를 'Html'편집 모드로 바꿔주시면
'사진'과 '설명'사이에 '지도'라는 글자가 있죠?
<p> </p>는 뭔진 잘 모르겠지만 아마 엔터(공백)를 의미하겠네요 모르셔도 됩니다
이제 '지도'글자를 지워주시고 아까 복사해둔 에펠탑 지도의 Html을 붙여 넣기 해주겠습니다.
<p>와 </p>는 지우시면 안 됩니다! 그 사이에 '지도'만 지우고 붙여 넣기 해주세요
다시 기본 모드로 돌아와 보면
짜잔~! '사진'과 '설명'사이에 에펠탑 지도가 잘 첨부되었네요 ㅎㅎ
아래에 실제로 첨부해두겠습니다.
3. 해외 지도 가운데 정렬하기
"근데 저는 지도를 가운데 정렬로 넣고 싶은데 어떡하죠?"
마찬가지로 Html편집을 이용할 건데 이해를 돕기 위해
정렬을 하지 않은 글자와 가운데 정렬한 글자의 Html모드를 비교해 볼게요
궁금하지 않으신분들은 여기서부터 잠깐 스킵해주세요
'지도 - 왼쪽 정렬'이라 쓴 글씨는 정렬을 하지 않은 상태고,
'지도 - 가운데 정렬'이라 쓴 글씨는 가운데 정렬을 해준 상태입니다.
두 글자의 Html차이를 보시면
<p>지도 - 왼쪽 정렬</p>
<p style="text-align: center;">지도 - 가운데 정렬</p>
즉, 가운데 정렬을 해주게 되면 앞부분의 <p>가 <p style="text-align: center;">로 바뀐다는 걸 알 수 있네요!
스킵은 여기까지만 해주세요!
자 이제 이걸 지도에 적용해 보면
아까 붙여넣기한 에펠탑 지도의 Html앞의 <p>를 <p style="text-align: center;">로 바꿔주면 되겠죠?
기본 모드로 돌아와 보면 해외 지도가 가운데 정렬이.....
뭐야 가운데 정렬 안 돼있잖아!!
괜찮습니다!
방법이 잘못됐거나, 편집 과정에서 실수하신 게 아니라
글 작성을 완료하고 발행까지 한 뒤에 글을 보시면 아래 지도와 같이 가운데 정렬이 되어있으니 걱정하시 마세요 ㅎㅎ
오늘은 티스토리에 해외 지도 첨부 방법과 지도를 가운데 정렬하는 방법까지 알아보았어요!
블로그 포스팅을 하면서 해외 지도를 넣는 경우는 잘 없지만 알아두면 좋고, 꼭 해외가 아니라도 구글 지도를 첨부하는 방법을 알았으니 이득!
그럼 이것으로 포스팅 마치겠습니다!
감사합니다!