[Markdown] 마크다운(Markdown) 링크, 이미지, 동영상 삽입하기

학습 내용

• Markdown 문서에 이미지, 동영상, 링크를 삽입하는 방법에 대해 알아봅니다

 

Markdown이란?

• Markdown은 텍스트 기반의 마크업 언어로, 문서를 서식있게 작성하는 데 사용된다
• John Gruber와 Aaron Swartz가 개발한 이 언어는 HTML과 같은 복잡한 마크업 언어에 비해 훨씬 간단하고 사용하기 쉽다.

 

링크

외부링크

[보여줄 이름](http://...link..)

 

참조링크

• 같은 링크가 여러번 반복되는 경우 활용하면 좋음

[link keyword][id]
[id]: URL "Optional Title here"

# 코드 예시
[Google][googlelink]
[googlelink]: https://google.com "Go google"

 

자동연결

• 일반적인 URL 혹은 이메일주소인 경우 적절한 형식으로 링크를 형성한다.

* 외부링크: <http://example.com/>
* 이메일링크: <address@example.com>

 

이미지

![Alt text](/path/to/img.jpg)
![Alt text](/path/to/img.jpg "Optional title")

• 위 방식은 사이즈 조절 기능이 어렵다는 단점이 있다
• 사이즈 조절을 하고 싶다면 아래의 방법을 이용한다

<img src="/path/to/img.jpg" width="450px" height="300px" title="px(픽셀) 크기 설정" alt=" "></img><br/>
<img src="/path/to/img.jpg" width="40%" height="30%" title="px(픽셀) 크기 설정" alt=" "></img>

 

동영상 (유튜브)

• 표준 마크다운 문법을 따르는 문서에서는 유튜브에서 제공하는 iframe 태그는 차단됩니다.
• 유튜브 링크를 추가하고 싶다면 스크린샷 이미지에 링크를 다는 방식을 이용한다

[![이미지 텍스트](스크린샷 이미지)](유튜브링크)

 

유튜브에는 영상 스크린샷 주소가 존재한다

 

만일 영상 주소가 아래와 같다면https://www.youtube.com/watch?v={유튜브영상코드}

 

기본 스크린샷 주소 :
http://i.ytimg.com/vi/{유튜브영상코드}/0.jpg                  (screenshot)
https://img.youtube.com/vi/{유튜브영상코드}/0.jpg

 

영상 처음,중간,끝(120x90) 썸네일(thumbnail) 주소 : 
http://i.ytimg.com/vi/{유튜브영상코드}/1.jpg                  (thumbnail 1)
http://i.ytimg.com/vi/{유튜브영상코드}/2.jpg                  (thumbnail 2)
http://i.ytimg.com/vi/{유튜브영상코드}/3.jpg                  (thumbnail 3)
https://img.youtube.com/vi/{유튜브영상코드}/1.jpg
https://img.youtube.com/vi/{유튜브영상코드}/2.jpg
https://img.youtube.com/vi/{유튜브영상코드}/3.jpg

 

기본(120x90) 썸네일(thumbnail) 주소 : 
http://i.ytimg.com/vi/{유튜브영상코드}/default.jpg
https://img.youtube.com/vi/{유튜브영상코드}/default.jpg

 

고품질(480x360) 썸네일(thumbnail) 주소 : 
http://i.ytimg.com/vi/{유튜브영상코드}/hqdefault.jpg
https://img.youtube.com/vi/{유튜브영상코드}/hqdefault.jpg

 

중품질(320x180) 썸네일(thumbnail) 주소 :
http://i.ytimg.com/vi/{유튜브영상코드}/mqdefault.jpg
https://img.youtube.com/vi/{유튜브영상코드}/mqdefault.jpg

 

최대해상도(1280x720, 1920x1080)  썸네일(thumbnail) 주소 : 
http://i.ytimg.com/vi/{유튜브영상코드}/maxresdefault.jpg
https://img.youtube.com/vi/{유튜브영상코드}/maxresdefault.jpg

 

중간해상도(640x480) 썸네일(thumbnail) 주소 : 
http://i.ytimg.com/vi/{유튜브영상코드}/sddefault.jpg
https://img.youtube.com/vi/{유튜브영상코드}/sddefault.jpg

 

 

 

---

참고자료

• https://gist.github.com/ihoneymon/652be052a0727ad59601
• 마크다운 동영상 : http://stackoverflow.com/a/29862668
• 유튜브 썸네일 주소 : https://blog.yesyo.com/entry/유튜브Youtube-이미지썸네일-주소