안녕하세요 :)
7asper-daily의 Twodoll 입니다.
오늘은 티스토리를 이용하면서 어떻게 지도 삽입을 하는지를 알려드리겠습니다. :)
천천히 따라오면서 봐주시면 감사하겠습니다.
먼저 어디서 지도를 끌어올지를 선택합니다. 저는 오늘 카카오맵에서 지도를 가져와 볼게요 :)
Hi guys!!
This is Twodoll from 7asper-daily.
Today, I am going to teach you how to insert NAVER map, KAKAO map, or Google map into your tistory. I will use Kakao map:) today
1. 카카오맵 열어서 검색하기
저는 서울 잠실역에 있는 롯데타워를 검색해보았습니다. 상단과 같이 클릭을하시면 상세정보가 나옵니다.
I searched for Lotter tower at Jam-sil station. As you can click the detail of the location, you can see the information above.
2. 카카오맵 공유하기 클릭 후 HTML 태그복사 누르기
길찾기 왼쪽에 있는 "공유하기" 버튼을 누르면 URL 복사 및 HTML 태그 복사 창이 뜹니다.
Click the "Share icon" As you can see there are two options like "URL copy" and "HTML tag copy"
3. HTML 태그복사창 에서 소스 생성하기 누르기
HTML 태그 복사를 클릭하시면 상단과 같은 소스 생성하기 창이 새로 떠요 :) 여기서 소스 생성하기를 눌러줍니다.
After Clicking the "HTML tag copy", another window pops up and click "create the source" below
4. 소스 생성하기 창에서 일반지도 혹은 이미지 지도 누르기
소스 생성하기를 누르면 일반지도 및 이미지 지도 선택을 할 수 있는데 오늘은 이미지 지도로 클릭하여 소스를 복사해볼게요 :))
There are two options again, normal map and image map. Today, I created the source with image map!
5. 소스 복사하기
소스 복사후 이제 티스토리로 돌아와야합니다.
After copying the source, back to your tistory!
6. 티스토리 글작성으로 돌아오기
티스토리 글쓰기를 누르면 상단과 같은창이 뜨잖아요? 여기서 오른쪽 위에 보시면 "기본모드"가 보이실겁니다ㅎㅎ 클릭 해줍니다!!
When you start to write your words, you can see the window above. On the right top, you can choose the mode.
7. HTML 모드 선택하기
클릭하면 기본모드, 마크다운, HTML 세가지가 있는데 오늘은 HTML을 이용할 거니까 HTML을 누르면!
There are three options, like basic mode, mark down, and HTML. Select the HTML.
8. 복사한 소스 삽입하기
검은색 화면으로 HTML창이 뜹니다. 여기서 왼쪽에 보시면 1번부터 8번까지 숫자가 나열이 되어있어요. 7번까지는 제가 맨위에 쓴 내용이고 8번에 카카오에서 복사해온 소스를 집어넣어줍니다 !
여기서 중요한것은 구글, 네이버, 다음(카카오맵)등 HTML 소스만 찾아서 넣어주면 적용이 가능합니다!!
Black window(HTML) pops up! There is one to eight on the left. 1 to 7 I wrote the words and 8 is new one. You should paste the copied source from Kakao map!
9. 미리보기 혹은 완료하기
그럼 이와같이 소스가 들어간것을 볼 수 있어요!
As you can see above, the source is in it.
왼쪽하단에서 미리보기를 하실수도있고, 오른쪽 하단에서 완료버튼을 누르실수도 있습니다.
다시 기본모드 화면으로 돌아가고 싶으면
You can choose "preview" lower left or "done" lower right.
오른쪽 상단에 HTML을 클릭하시고 기본모드로 바꾸시면됩니다 :)
이상 Twodoll 이었습니다.
도움이 되었으면 좋겠네요 :) 다음번에는 더 발전된 HTML사용방법을 들고 올게요 !
If you want to go back to normal mode, you click the HTML on the right top and change to the basic mode!
Thanks for reading :)
Bye~
'일상 > 이슈와일상' 카테고리의 다른 글
| 소상공인 방역지원금 3차 600만원 언제 지급 및 신청 (0) | 2022.05.25 |
|---|---|
| 손흥민 경기일정 입국 연봉 골든부츠 골 토트넘 득점왕 EPL 순위 (0) | 2022.05.25 |
| gif 만들기 및 gif 동영상 변환 (0) | 2022.01.05 |
| 인스타그램 분야별 인기 해시태그 모음 (0) | 2022.01.03 |
| 파비콘 만들기 : 파비콘 3분완성 (0) | 2020.12.10 |
