마크다운(Markdown)이란?

마크다운(Markdown)을 만든 John Gruber는 마크다운을 다음과 같이 정의하고 있다.

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

즉, 마크다운은 다음과 같은 성질을 가지는 텍스트를 HTML로 변환하는 언어이자 도구이다.

사람이 읽고 쓰기 쉽다.
컴퓨터도 이해하기 쉽다.

마크다운은 간단한 문법만을 사용해 글을 구조적으로 작성할 수 있고, 마크다운으로 작성된 글을 그냥 읽어도 이해하기 쉽고 HTML로 변환해도 보기에 좋다. 이 때문에 최근 GitHub 같은 개발 관련 웹사이트에서 마크다운을 많이 사용하고 있다.

왜 알아야 하는가?

당신이 개발자라면 앞으로 반드시 만나게 될 것이기 때문이다. 개발자가 아니라면 아마도 몰라도 될 것이다. WISIWIG 에디터에서도 마크다운을 지원할테니까.

마크다운의 문법

위에서도 말했듯이 마크다운의 문법은 상당히 간단해서 큰 노력을 기울이지 않아도 쉽게 배울 수 있다.

문단(Paragraphs)

하나 이상의 문장의 집합이다. 한 문단과 다음 문단은 하나 이상의 빈 줄로 구분된다.

첫번째 문단의 첫번째 문장이다.
첫번째 문단의 두번째 문장이다.

두번째 문단의 첫번째 문장이다.
두번째 문단의 두번째 문장이다.

다음과 같이 변환된다.

<p>첫번째 문단의 첫번째 문장이다.
첫번째 문단의 두번째 문장이다.</p>
<p>두번째 문단의 첫번째 문장이다.
두번째 문단의 두번째 문장이다.</p>

그러므로 다음과 같이 보인다.

첫번째 문단의 첫번째 문장이다. 첫번째 문단의 두번째 문장이다.

두번째 문단의 첫번째 문장이다. 두번째 문단의 두번째 문장이다.

문장 사이의 줄바꿈은 무시되는 것이 기본이지만, 마크다운 변환기에 따라 줄바꿈을 위해 <br /> 태그를 삽입하기도 한다.

제목(Headers)

제목을 표현하는 방법에는 2가지 방법이 있다. 먼저 = 혹은 - 문자를 이용해 밑줄을 채우는 방법이다. 밑줄 문자는 하나 이상만 사용하면 되지만 보통은 보기 좋게 제목과 같은 길이만큼 사용한다.

가장 큰 제목
==========
그 다음 크기의 제목
---------------

변환하면 다음과 같다.

<h1>가장 큰 제목</h1>
<h2>그 다음 크기의 제목</h2>

결과는...

가장 큰 제목

그 다음 크기의 제목

다른 방법으로는 # 문자를 제목 앞에 붙이는 방법이 있다. 보기 좋게 하기 위해 제목 뒤에도 # 문자를 같은 개수 만큼 붙이기도 한다.

# 가장 큰 제목
## 그 다음 크기의 제목 ##
### 또 그 다음 크기의 제목
###### 가장 작은 크기의 제목 ######

변환하면...

<h1>가장 큰 제목</h1>
<h2>그 다음 크기의 제목</h2>
<h3>또 그 다음 크기의 제목</h3>
<h6>가장 작은 크기의 제목</h6>

가장 큰 제목

그 다음 크기의 제목

또 그 다음 크기의 제목

가장 작은 크기의 제목

인용(Blockquotes)

인용은 이메일에서처럼 > 문자를 앞에 붙이는 방식을 사용한다.

> 인용이다.
>
> 인용 안에서도 문단을 나눌 수 있다.
>
> ### 제목 등의 다른 문법도 사용 가능하다.
>
> > 인용 안의 인용도 된다.

<blockquote>
  <p>인용이다.</p>
  <p>인용 안에서도 문단을 나눌 수 있다.</p>
  <h3>제목 등의 다른 문법도 사용 가능하다.</h3>
  <blockquote>
    <p>인용 안의 인용도 된다.</p>
  </blockquote>
</blockquote>

인용이다.

인용 안에서도 문단을 나눌 수 있다.

제목 등의 다른 문법도 사용 가능하다.

인용 안의 인용도 된다.

목록(Lists)

먼저 순서가 없는 목록이다. 각 항목 앞에 *, +, - 문자를 붙인다.

* 첫번째
* 두번째
* 세번째

<ul>
  <li>첫번째</li>
  <li>두번째</li>
  <li>세번째</li>
</ul>

첫번째
두번째
세번째

다음과 같이 섞어서 사용할 수도 있다.

* 첫번째
+ 두번째
- 세번째

<ul>
  <li>첫번째</li>
  <li>두번째</li>
  <li>세번째</li>
</ul>

첫번째
두번째
세번째

항목 사이에 빈줄이 있으면 조금 다르게 해석한다.

* 첫번째

* 두번째

* 세번째

<ul>
  <li><p>첫번째</p></li>
  <li><p>두번째</p></li>
  <li><p>세번째</p></li>
</ul>

첫번째
두번째
세번째

다음으로 순서가 있는 목록이다. 1.로 시작한다.

1. 첫번째
1. 두번째
1. 세번째

<ol>
  <li>첫번째</li>
  <li>두번째</li>
  <li>세번째</li>
</ol>

첫번째
두번째
세번째

목록을 중첩하는 것 역시 가능하다.

1. 첫번째
1. 두번째
  * 두번째의 첫번째
  * 두번째의 두번째
  * 두번째의 세번째
1. 세번째

<ol>
  <li>첫번째</li>
  <li>두번째</li>
  <ul>
    <li>두번째의 첫번째</li>
    <li>두번째의 두번째</li>
    <li>두번째의 세번째</li>
  </ul>
  <li>세번째</li>
</ol>

첫번째
두번째
- 두번째의 첫번째
- 두번째의 두번째
- 두번째의 세번째
세번째

강조(Emphasis)

문장 내에서 강조하고 싶은 부분이 있으면 * 혹은 _ 문자로 감싸준다.

이 문장에서 *여기부터 여기까지* 강조한다.
이 문장에서는 _여기만_ 강조한다.

변환하면...

<p>이 문장에서 <em>여기부터  여기까지</em> 강조한다.
이 문장에서는 <em>여기만</em> 강조한다.</p>

이 문장에서 여기부터 여기까지 강조한다. 이 문장에서는 여기만 강조한다.

* 혹은 _ 문자를 하나만 쓰면 <em> 태그가 쓰여 이탤릭체로 강조되지만, 두개씩 쓰면 <strong> 태그가 쓰여 볼드체로 강조된다.

이 문장에서 **여기부터 여기까지** 강조한다.
이 문장에서는 __여기만__ 강조한다.

<p>이 문장에서 <strong>여기부터 여기까지</strong> 강조한다.
이 문장에서는 <strong>여기만</strong> 강조한다.</p>

이 문장에서 여기부터 여기까지 강조한다. 이 문장에서는 여기만 강조한다.

트리플 강조 구문이라는 것도 있다. 예측대로 동작한다.

이 문장에서 ***여기부터 여기까지*** 강조한다.
이 문장에서는 ___여기만___ 강조한다.

<p>이 문장에서 <strong><em>여기부터 여기까지</em></strong> 강조한다.
이 문장에서는 <strong><em>여기만</em></strong> 강조한다.</p>

이 문장에서 여기부터 여기까지 강조한다. 이 문장에서는 여기만 강조한다.

링크(Links)

링크를 거는 방법에도 두 가지 방법이 있다. 하나는 보다 직관적인 방식이다.

마크다운에 관한 자세한 내용은 [여기](http://daringfireball.net/projects/markdown/)를 참고하라.
[여기](http://en.wikipedia.org/wiki/Markdown "Wikipedia")에도 잘 정리가 되어 있다.

<p>마크다운에 관한 자세한 내용은 <a href="http://daringfireball.net/projects/markdown/">여기</a>를 참고하라.
<a href="http://en.wikipedia.org/wiki/Markdown" title="Wikipedia">여기</a>에도 잘 정리가 되어 있다.</p>

마크다운에 관한 자세한 내용은 여기를 참고하라. 여기에도 잘 정리가 되어 있다.

링크 주소 뒤에 입력한 문자열은 링크 위에 커서를 올렸을 때 나타나는 링크의 제목이다.

문장 내 링크가 위치했을 때 가독성을 보다 높이기 위해 참조 방식으로 링크를 걸 수도 있다.

마크다운에 관한 자세한 내용은 [여기][1]를 참고하라.
[여기][2]에도 잘 정리가 되어 있다.

[1]: http://daringfireball.net/projects/markdown/ "Daring Fireball"
[2]: http://en.wikipedia.org/wiki/Markdown "Wikipedia"

<p>마크다운에 관한 자세한 내용은 <a href="http://daringfireball.net/projects/markdown/" title="Daring Fireball">여기</a>를 참고하라.
<a href="http://en.wikipedia.org/wiki/Markdown" title="Wikipedia">여기</a>에도 잘 정리가 되어 있다.</p>

마크다운에 관한 자세한 내용은 여기를 참고하라. 여기에도 잘 정리가 되어 있다.

참조 문자열은 꼭 숫자가 아니어도 된다. 영문, 한글 모두 가능하고 영문의 경우 대소문자를 구분하지도 않으며, 생략도 가능하다.

마크다운에 관한 자세한 내용은 [여기][Daring Fireball]를 참고하라.
[위키피디아][]에도 잘 정리가 되어 있다.

[daring fireball]: http://daringfireball.net/projects/markdown/ "Daring Fireball"
[위키피디아]: http://en.wikipedia.org/wiki/Markdown "Wikipedia"

<p>마크다운에 관한 자세한 내용은 <a href="http://daringfireball.net/projects/markdown/" title="Daring Fireball">여기</a>를 참고하라.
<a href="http://en.wikipedia.org/wiki/Markdown" title="Wikipedia">위키피디아</a>에도 잘 정리가 되어 있다.</p>

마크다운에 관한 자세한 내용은 여기를 참고하라. 위키피디아에도 잘 정리가 되어 있다.

참고로 링크를 거는 또 다른 방법이 있다.

링크: <http://google.com/>, 이메일: <mail@gmail.com>

<p>링크: <a href="http://google.com/">http://google.com/</a>, 이메일: <a href="mailto:mail@gmail.com">mail@gmail.com</a></p>

링크: http://google.com/, 이메일: mail@gmail.com

이미지(Images)

이미지를 삽입하는 것은 링크를 거는 것과 매우 흡사하다. 차이가 있다면 ! 문자만 앞에 붙여주면 된다.

![마크다운 로고](https://raw.github.com/dcurtis/markdown-mark/master/png/208x128.png)

<p><img src="https://raw.github.com/dcurtis/markdown-mark/master/png/208x128.png" alt="마크다운 로고"></p>

마크다운 로고

참고로 이 로고는 Dustin Curtis에 의해 만들어진 마크다운 로고이다.

코드(Code)

코드 블럭을 삽입하기 위해서는 앞에 공백 4개 혹은 탭 1개를 붙인다.

    <blockquote>
      <p>코드 예제</p>
    </blockquote>

변환하면 다음과 같다.

<pre><code>
  <blockquote>
    <p>코드 예제</p>
  </blockquote>
</code></pre>

<blockquote>
  <p>코드 예제</p>
</blockquote>

문장 내에서도 ` 문자를 이용해 코드 삽입이 가능하다.

문장 내에서도 `코드` 삽입이 가능하다.

<p>문장 내에서도 <code>코드</code> 삽입이 가능하다.</p>

문장 내에서도 코드 삽입이 가능하다.

마크다운 변환기에 따라서 펜스 코드블럭이 사용 가능한 경우도 있다. 펜스 코드블럭은 ``` 혹은 ~~~ 문자열로 코드 블럭을 감싸는 방법이다.

```
var test = 'test';
console.log('test:', test);
```

<pre><code>
var test = 'test';
console.log('test:', test);
</code></pre>

var test = 'test';
console.log('test:', test);

이스케이프(Backslash Escapes)

마크다운으로 글을 작성하다 보면 * 문자나 _ 문자 등을 사용하고 싶은 경우가 있다. 그럴 때는 \ 문자로 회피할 수 있다.

강조는 \* 문자 혹은 \_ 문자를 사용한다.

결과 화면은 다음과 같다.

강조는 * 문자 혹은 _ 문자를 사용한다.

혹 코드 내부에 ` 문자를 사용하고 싶으면 ` 대신 `` 문자열로 감싸야 한다.

때론 ``코드 내부에 ` 문자``를 사용하기도 한다.

결과 화면은...

때론 코드 내부에 ` 문자를 사용하기도 한다.

마치며

간단하지 않은가? 이 정도면 마크다운에 대하여 대부분 살펴보았다. 하지만 마크다운은 아직 진화 중이다. 관심을 가지고 꾸준히 지켜보면 더욱 좋을 것 같다.

마크다운(Markdown)에 대하여

February 13, 2014

마크다운(Markdown)이란?

왜 알아야 하는가?

마크다운의 문법

문단(Paragraphs)

제목(Headers)

가장 큰 제목

그 다음 크기의 제목

가장 큰 제목

그 다음 크기의 제목

또 그 다음 크기의 제목

가장 작은 크기의 제목

인용(Blockquotes)

제목 등의 다른 문법도 사용 가능하다.

목록(Lists)

강조(Emphasis)

링크(Links)

이미지(Images)

코드(Code)

이스케이프(Backslash Escapes)

마치며