소프트웨어Markdown

4편. Markdown - Link, Image

, , , , , , ,

목차

  1. Link 작성
  2. Image 작성


  • Markdown에서 Link 사용하기 - 기본

GFM에서는 그냥 http:// 혹은 https:// 가 포함된 링크를 걸면 알아서 링크가 생성된다.

1
2
http://xeppetto.github.io/
https://xeppetto.github.io/

http://xeppetto.github.io/
https://xeppetto.github.io/


  • Markdown Link 사용하기 - 예제

Markdown에서 링크를 거는 문법은 사실 2+1으로 외우면 된다. 기본 사항 2가지와 잘 사용하지 않는 추가 기능 1가지이다.

① 대괄호 : [ 사이트 설명 ]
② 괄호 : ( 사이트의 주소 )


Markdown 스타일로 링크를 추가하고 싶은 경우 아래와 같은 방식으로 작성한다. 

1
[링크 설명](링크 주소)

위 방식을 이용하여 링크를 거는 예제는 아래와 같다.

1
2
[GitHub](http://github.com)
[천년나무의 블로그](https://xeppetto.github.io/)

GitHub
천년나무의 블로그


  • Link에 설명 추가하기

그 외 잘 사용하지는 않지만 링크 위에 마우스 커서를 올려 놓으면 잠시 뒤 설명이 나타나도록 하는 기능이 있다.

③ 링크에 마우스를 올리면 나타나는 링크의 설명

1
2
[GitHub](http://github.com "깃허브로 이동하는 링크")
[천년나무의 블로그](https://xeppetto.github.io/ "천년나무의 블로그")

GitHub
천년나무의 블로그


위의 링크에 마우스 커서를 올리면 아래와 같이 입력한 링크의 설명이 나타난다.


  • Email Link 사용하기

HTML에서 mailto로 사용하던 이메일 링크는 Github에서도 작동하지만, 그냥 이메일 주소만 적어놔도 작동한다.

1
2
example@github.com
<a href="mailto:example@github.com">이메일 보내기 링크</a>

example@github.com
이메일 보내기 링크


그냥 이메일 주소만 걸어놔도 작동하지만 굳이 a href로 HTML 태그를 이용하는 이유는 mailto와 함께 사용할 수 있는 HTML 여러 규약때문이다. a href + mailto를 활용하면, 이메일 받을 사람, 주제, 본문 등을 미리 설정할 수 있다.

본 페이지는 Markdown에 대한 페이지이므로 관련 내용은 검색 엔진에서 “HTML mailto”를 검색해서 확인하시기 바란다.



Image 작성

  • Markdown에서 Image 사용하기 - 기본

Markdown에서 이미지에 링크를 추가하고 싶은 경우 아래와 같은 방식으로 작성하면 된다.

1
![이미지 설명](이미지 주소)

이미지를 삽입할 때 사용하는 문법은 링크 시 사용하는 문법과 비슷하지만, 이미지를 삽입한다는 문법으로 느낌표(!)를 사용한다.

① 느낌표 : !
② 대괄호 : [ 이미지 설명 ]
③ 괄호 : ( 이미지 주소 )


  • Markdown에 Image 표시하기 - 예제

아래 이미지의 원본인 Freepik에서 가져온 것임을 고지하므로, 혹시 라이선스 내용이 변경되면 수정할 예정이다.

1
![freepik license](/images/TheMarkdown/markdown-image-tag-sample1.png)

freepik - 클릭 시 원본으로 이동

아래 이미지 원본 역시 Freepic에서 가져온 것이며, 라이선스 내용 변경 시 수정할 예정이다.


  • Image에 Link를 추가하기

이미지 자체에 링크를 걸어, 이미지를 클릭 시 특정 주소로 이동하도록 보내고 싶은 경우 Link의 문법과 Image의 문법을 섞어서 사용한다.

1
2
3
링크 문법 + 이미지 문법
링크 문법 = [① 링크 설명](② 링크 주소)
이미지 문법 = [③ 이미지 설명](④ 이미지 주소)

위와 같은 문법에서 ①에 이미지 문법을 끼워 넣는 식이다. 이미지를 표시하는 방법 자체를 ① 링크 설명으로 사용하는 것이다.

대략의 모습은 아래와 같다.

1
[[③ 이미지 설명](④ 이미지 주소)](② 링크 주소)

설명은 길지만 사실 직접 예제를 보면 이해가 더 쉽다. 

1
[![freepik - 클릭 시 원본으로 이동](/images/TheMarkdown/markdown-image-tag-sample2.png)](https://kr.freepik.com/free-vector/colorful-illustration-of-female-programmer-working_5483075.htm)

freepik - 클릭 시 원본으로 이동

이미지를 클릭하면 해당 이미지의 원본 페이지로 이동한다.


  • Image size 변경하기

Markdown 자체에 Image Size를 변경하는 문법이 있지만, 대부분의 경우 문법이 잘 듣지 않다보니 그냥 HTML을 사용한다.

1
2
<img src="/images/TheMarkdown/markdown-image-tag-sample1.png" width="100px" alt="이미지 크기 변경">
<img src="/images/TheMarkdown/markdown-image-tag-sample2.png" width="200px" alt="이미지 크기 변경">
이미지 크기 변경 이미지 크기 변경

이런 방식으로 사용할 경우 Markdown에서도 HTML의 Image Style을 사용할 수 있다. 다만, 이 경우 문법이 복잡해지므로 너무 많은 부분에 사용하기를 추천하지는 않는다. 꼭 필요한 부분에만 사용하자.



주요 참고 자료