깃헙 블로그를 시작하자마자, 완성도있는 블로그를 위해서는 마크다운에 대해서 잘 알아야겠다는 생각이 들었다. 그래서 이번에는 마크다운에 대해서 정리를 해보려고 한다.

마크다운이란?

  • 마크다운은 텍스트 양식을 편집하는 문법이다. 2004년, 존 그루버와 애런 스워츠에 의해 만들어졌으며 사람들이 읽고 쓰기 편한 플레인 텍스트 포맷을 사용했다. 마크다운을 이용해 편집된 문서는 HTML과 같은 다른 문서형태로의 변환이 쉽다. README파일 확장자로 .md가 흔히 쓰이는데, 이것이 바로 마크다운이다.

마크다운 문법

1. Headings(제목)

제목을 만들기 위해서는 제목 앞에 #을 붙여주면 된다. 단, #과 제목 사이에는 공백이 있어야 한다. #의 개수가 많아질수록 제목의 크기가 작아지며 최대 6개까지 붙일 수 있다. HTML의 <h1> </h1>과 같은 역할을 한다.

Markdown HTML
# 제목 <h1>제목</h1>
## 제목 <h2>제목</h2>
… …
###### 제목 <h6>제목</h6>

다른 방법으로는 제목 아래에 =====나 -----를 더해줘서 #의 제목을 만들어 줄 수 있다.

Markdown HTML
제목
========		 <h1>제목</h1>
제목
--------		 <h2>제목</h2>

2. Paragraphs(문단)

마크다운에서 문단을 만들고 싶다면, 텍스트 간에 빈 줄을 한칸 이상 두면 된다. 각 문단에 스페이스나 탭을 이용해서 indentation을 만들지 않도록 한다.

Markdown HTML
문단1

문단2		 <p>문단1</p>

<p>문단2</p>

3. Line breaks(줄 띄우기)

줄을 띄우고 싶다면, 줄을 띄우고자 하는 부분 끝에 스페이스를 두개 이상 입력해준 뒤 다음 줄에서 다시 입력해주면 된다..

4. Emphasis(강조)

문서 작업을 할때 흔히 강조 표현으로 볼드체나 이탤릭체를 쓰게 되는데, 마크다운에서도 물론 이 기능을 제공한다. 볼드체는 강조하고자 하는 부분 양 끝에 **이나 __을 붙이면 되고, 이탤릭체는 *이나 _을 붙이면 된다.
볼드체이면서 동시에 이탤릭체를 표현하기 위해서는 *** 혹은 ___과 같이 세개를 붙여주면 된다.

단, 언더바는 문장 중간에서 쓸 수 없다. 따라서 *을 쓰는 것을 추천한다.

볼드체

Markdown HTML Output
**강조하고 싶은 것** <strong>강조하고 싶은 것</strong> 강조 하고 싶은 것
__강조하고 싶은 것__ <strong>강조하고 싶은 것</strong> 강조 하고 싶은 것

이탤릭체

Markdown HTML Output
*강조하고 싶은 것* <em>강조하고 싶은 것</em> 강조 하고 싶은 것
_강조하고 싶은 것_ <em>강조하고 싶은 것</em> 강조 하고 싶은 것

볼드체 + 이탤릭체

Markdown HTML Output
***강조하고 싶은 것*** <strong><em>강조하고 싶은 것</em></strong> 강조 하고 싶은 것
___강조하고 싶은 것___ <strong><em>강조하고 싶은 것</em></strong> 강조 하고 싶은 것

Blockquotes(인용)

인용문을 표현하기 위해서는 문장 앞에 >을 붙여주면 된다. 이는 여러 줄에 걸쳐서도 표현이 가능한데, >을 각 줄마다 입력해주면 된다.

> 인용문은 이런 식으로 적으면 된다.

인용문은 이런 식으로 적으면 된다.

여러 줄에 걸친 인용문에 대한 예시다. 여기서도 줄을 띄우기 위해서는 각 문장 끝에 스페이스 두 번을 쳐줘야 한다.
> 여러줄에 걸친
> 인용문에 대해서는
> 이런 식으로 적으면 된다.

여러줄에 걸친
인용문에 대해서는
이런 식으로 적으면 된다.

참고로, >>으로 인용문 안에 또 다른 인용을 넣을 수도 있으며, 인용문 안에서 -이나 강조표현들을 사용할 수도 있다.

Lists(리스트)

마크다운에서 리스트는 크게 “순서가 있는 리스트”와 “순서가 없는 리스트”로 나뉜다.

Ordered Lists

순서가 있는 리스트를 만들기 위해서는 각 항목 앞에 숫자를 붙여주면 된다. 이때 숫자는 꼭 순서에 맞출 필요가 없다. 예를 들어 모든 항목 앞에 1. 을 붙여줘도 된다.

Markdown HTML Output
1. 첫번째 항목
2. 두번째 항목		 <ol>
<li>첫번째 항목</li>
<li>두번째 항목</li>
</ol>		 1. 첫번째 항목
2. 두번째 항목

Unordered Lists

순서가 없는 리스트를 만들기 위해서는 각 항목 앞에 -이나 *또는 +를 붙여주면 된다.

Markdown HTML Output
- 첫번째 항목
- 두번째 항목		 <ul>
<li>첫번째 항목</li>
<li>두번째 항목</li>
</ul>		 • 첫번째 항목
• 두번째 항목

리스트 속에 요소를 추가하기

리스트의 형태를 유지하면서 다른 요소들을 추가하고 싶다면, 해당 요소에 대해서 tab이나 space를 이용하여 들여쓰기를 해준다. 이때 space는 4칸을 띄워준다.

*   This is the first list item.
*   Here's the second list item.

    I need to add another paragraph below the second list item.

*   And here's the third list item.

위 코드의 출력은 아래와 같다.

  • This is the first list item.

  • Here’s the second list item.

    I need to add another paragraph below the second list item.

  • And here’s the third list item.

Horizontal Rules(수평줄)

수평줄을 만들기 위해서는 세개 이상의 *이나 -혹은 _을 그려주면 된다. 세가지 모두 같은 형태의 수평줄을 만든다. 이때, 코드 상에서 수평 줄의 윗 줄, 아랫 줄은 빈 줄로 남겨두는 것이 좋다.

위

-----

아래

위 코드의 출력은 아래와 같다.

위

아래

Link(링크)

마크다운에서도 물론 링크를 걸 수 있다. 링크를 만들기 위해서는 대괄호[]로 링크의 이름을 먼저 표시하고 그 바로 뒤에 괄호()로 링크를 직접 입력해주면 된다.

유투브 링크 : [Youtube](http://youtube.com)

위 코드는 다음과 같이 출력된다.

유투브 링크 : Youtube

하지만 코드에 직접적으로 링크를 넣기에는 코드를 읽고 쓰기에 불편할 수 있다. 그래서 코드상에서 각주을 달듯 링크를 걸 수 있다. 여기서는 링크부분 역시 []으로 표현해주어야 한다.

유투브 링크 : [Youtube][너튜브]

[너튜브]: <https://youtube.com>

위 코드 역시 이전과 똑같이 출력된다. 이때 참조 링크를 만드는 부분에서 :은 []와 붙어 있어야 한다.

유투브 링크 : Youtube

URL / Email address

URL이나 이메일을 직접 보여주되, 링크까지 연결하고싶다면 <>으로 묶어주면 된다.

<https://www.markdownguide.org>
<fake@example.com>

위 코드는 다음과 같이 출력된다.

https://www.markdownguide.org
fake@example.com

앞서 소개한 링크나 URL등은 볼드체나 이탤릭체로 바꿀 수도 있으며 code로 표현도 가능하다.

Images

그림을 넣는 방법도 간단하다. 앞서 설명한 링크 넣는 방법과 굉장히 유사하다. ![이미지 이름](이미지 링크)로 표현해주면 된다.

기호 표시하기

*이나 괄호 등은 마크다운의 문법 요소에 속하기 때문에 텍스트로 표현해주기 위해서는 기호 앞에 \을 붙여줘야 한다.

\* \{\} \+ \. \!

다음은 이와 같이 표시된다.

* {} + . !