마크다운이란?

마크다운(Markdown)은 마크업 언어로 HTML을 사용하지 않고 웹 문서를 만드는 것을 도와줍니다. 처음에는 위키에서 많이 사용하다가 GitHub나 Stack Overflow와 같이 위키가 아닌 곳에서도 많이 사용합니다.

예를 들어 특정 문자열을 강조하는 것은 HTML로는 다음과 같이 작성합니다.

쓰리래빗츠 북은 온라인 <strong>도움말/매뉴얼</strong> 작성 도구입니다.

마크다운에서는 별표 두 개로로 문자열을 둘러싸서 강조합니다.

쓰리래빗츠 북은 온라인 **도움말/매뉴얼** 작성 도구입니다.

단락 구분은 HTML로는 다음과 같이 작성합니다.

<p>첫번째 단락</p>
<p>두번째 단락</p>

마크다운에서는 빈 줄로 단락을 구분합니다.

첫번째 단락

두번째 단락

일반적으로 HTML보다 마크다운을 사용하는 것이 쉽고 간단합니다.

쓰리래빗츠 마크다운 에디터

쓰리래빗츠는 마크다운 사용법에 대한 이해를 돕기 위해서 온라인 마크다운 에디터를 제공합니다.

마크다운 문법

다음 문서에 있는 내용을 기초로 마크다운 문법을 설명합니다.

http://daringfireball.net/projects/markdown/syntax

문자

매우 강조 strong

특정 문자열을 매우 강조하려면 해당 문자열을 별표 또는 밑줄 두 개로 둘러쌉니다.

쓰리래빗츠 북은 온라인 **도움말/매뉴얼** 작성 도구입니다.

쓰리래빗츠 북은 온라인 __도움말/매뉴얼__ 작성 도구입니다.

• 기호와 문자열을 띄어쓰지 않습니다.

• 시작하는 기호와 끝나는 기호는 같아야 합니다.

강조 em

특정 문자열을 강조하려면 해당 문자열을 별표 또는 밑줄로 둘러쌉니다.

쓰리래빗츠 북은 온라인 *도움말/매뉴얼* 작성 도구입니다.

쓰리래빗츠 북은 온라인 _도움말/매뉴얼_ 작성 도구입니다.

• 기호와 문자열을 띄어쓰지 않습니다.

• 시작하는 기호와 끝나는 기호는 같아야 합니다.

단락

보통 p

단락은 빈 줄로 구분합니다.

첫 번째 단락

두 번째 단락

여러 빈 줄은 빈 줄 하나가 있는 것과 같습니다.

첫 번째 단락



두 번째 단락

단순한 줄 바꿈은 br 태그로 처리합니다.

첫 번째 줄
같은 단락 두 번째 줄

제목 h1 ~ h6

제목 단락은 두 가지 방식으로 작성합니다.

제목을 작성하는 첫 번째 방법은 다음과 같습니다.

제목 1입니다.
========= 1 

제목 2입니다.
--------- 2

등호 또는 빼기 기호를 하나만 붙여도 상관없지만 명확한 구분을 위해 여러 개를 붙이는 것을 권장합니다.

제목 1입니다.
=

제목 2입니다.
-

제목을 작성하는 두 번째 방법은 다음과 같습니다. 첫 번째 방식과 달리 제목 1에서 제목 6까지를 모두 지원합니다.

# 제목 1입니다.

## 제목 2입니다.

### 제목 3입니다.

#### 제목 4입니다.

##### 제목 5입니다.

###### 제목 6입니다.

뒤에도 해시를 넣어서 끝 부분을 명확하게 표시할 수 있습니다. 시작 부분에 있는 해시 숫자와 같을 필요는 없습니다.

# 제목 1입니다. #

## 제목 2입니다. ##

### 제목 3입니다. ###

#### 제목 4입니다. #

##### 제목 5입니다. #

###### 제목 6입니다. ###############################

블럭 인용구 blockquote

블럭 인용구 단락은 꺾쇠로 줄을 시작합니다.

> 첫 번째 줄
> 두 번째 줄
> 세 번째 줄

줄과 줄 사이에 빈 줄이 없다면 첫번째 줄에만 꺾쇠를 붙혀도 됩니다.

> 첫 번째 줄
두 번째 줄
세 번째 줄

순서 목록 ol과 비순서 목록 ul

순서 목록은 숫자와 점으로 시작합니다.

1. 감자
2. 고구마
3. 옥수수

앞에 붙는 숫자와 상관없이 1부터 순서대로 번호를 붙입니다.

1. 감자
1. 고구마
1. 옥수수

9. 감자
99. 고구마
999. 옥수수

순서 목록이 아님에도 숫자와 점으로 시작하면 순서 목록으로 처리합니다.

1994. 응답하라
1997. 응답하라

이 때는 점 앞에 역 슬래시를 넣습니다.

1994\. 응답하라
1997\. 응답하라

비순서 목록은 별표 또는 더하기 또는 빼기 기호로 작성합니다. 어느 기호를 사용하나 결과는 같습니다.

* 감자
* 고구마
* 옥수수

+ 감자
+ 고구마
+ 옥수수

- 감자
- 고구마
- 옥수수

목록 사이에 줄 바꿈이 있으면 li 태그 다음에 p 태그가 들어가고 그 안에 내용이 들어갑니다.

* 감자

* 고구마

* 옥수수

한 내용을 여러 단락으로 나누려면 빈 줄을 넣고 띄어쓰기로 들여쓴 후 내용을 작성합니다.

* 첫 번째 항목 첫 번째 단락

  첫 번째 항목 두 번째 단락

* 두 번째 항목 첫 번째 단락

  두 번째 항목 두 번째 단락

줄 바꿈만을 하면 br 태그로 처리합니다.

* 첫 번째 항목 첫 번째 줄
  첫 번째 항목 두 번째 줄
* 두 번째 항목 첫 번째 줄
  두 번째 항목 두 번째 줄

계층 구조로 만들려면 목록 기호 앞에서 네 번 띄어쓰기로 들여씁니다.

* 1 단계
    * 2 단계
        * 3 단계

수평선 hr

수평선을 넣으려면 별표, 빼기, 밑줄 중에 하나를 세 번 이상 반복합니다.

***
---
___

기호와 기호를 띄어쓸 수 있습니다.

* * *
- - -
_ _ _

단락 안에 단락 넣기

블럭 인용구와 목록 단락에는 다른 단락을 넣을 수 있습니다. 이 때 마크다운 들여쓰기 규칙을 지켜야 합니다.

> 블록 인용구 단락에 순서 목록 단락 넣기
>
> 1. 감자
> 2. 고구마
> 3. 옥수수
>
> 블록 인용구 단락에 코드 단락 넣기
>
>     public static void main(String[] args) {
>         System.out.println("Hello World!");
>     }

* 비순서 목록 단락에 블록 인용구 단락 넣기

    > 감자
    > 고구마
    > 옥수수

* 비순서 목록 단락에 코드 단락 넣기

        public static void main(String[] args) {
            System.out.println("Hello World!");
        }

코드

코드 문자열 code

특정 문자열이 코드라면 해당 문자열을 역 따옴표로 둘러쌉니다.

로그를 기록하려면 `console` 객체의 `log` 메소드를 호출합니다.

코드 문자열에 역 따옴표 자체를 넣으려면 코드 문자열을 역 따옴표 두 개로 둘러쌉니다.

코드 문자열은 ``backtick(`)`` 문자로 둘러쌉니다.

코드 문자열이 역 따옴표로 시작하거나 끝나면 역 따옴표 2개와 문자열에 있는 역 따옴표를 띄어씁니다.

마크다운에서 문자열을 코드로 표시하려면 `` `console` ``과 같이 입력합니다.

코드 단락 pre code

코드 단락은 네 번의 띄어쓰기로 들여써서 작성합니다.

자바 `main` 메소드입니다.

    public static void main(String[] args) {
        System.out.println("Hello World!");
    }

마크다운은 코드 문자열이나 코드 단락에서 사용하는 <, >, & 문자를 HTML 태그로 바꾸지 않고 그대로 표시합니다.

HTML에서 문자열을 <strong>강조</strong>하려면 `<strong>` 태그를 사용합니다.

    <p>쓰리래빗츠 북은 온라인 <strong>도움말/매뉴얼</strong> 작성 도구입니다.

마크다운은 코드 문자열이나 코드 단락에서 사용하는 마크다운 표시들도 HTML 태그로 바꾸지 않고 그대로 표시합니다.

마크다운에서 문자열을 **강조**하려면 `**문자열**`과 같이 작성합니다.

    쓰리래빗츠 북은 온라인 **도움말/매뉴얼** 작성 도구입니다.

링크 a

링크 또는 이메일 주소를 그대로 표시한다면 링크 주소를 꺾쇠 괄호로 둘러쌉니다.

<http://www.3rabbitz.com>
<sales@3rabbitz.com>

링크 내용과 주소가 다를 때는 우선 링크 내용을 대괄호로 둘러 넣고, 주소를 괄호로 둘러 넣습니다.

[쓰리래빗츠](http://www.3rabbitz.com)

a 태그 title 속성 값은 링크 주소 괄호 안에서 띄어쓰기를 한 후 제목을 넣고 큰 따옴표로 둘러쌉니다.

[쓰리래빗츠](http://www.3rabbitz.com "Write document better, together.")

같은 웹 서버에 있는 주소라면 상대 경로로 작성합니다.

[쓰리래빗츠 북 사용자 가이드](/book_user_guide_2_0_ko)

참조 형식으로 링크를 작성할 수도 있습니다. 우선 링크 내용을 대괄호로 둘러 넣고, 참조 아이디도 대괄호로 둘러 넣습니다.

그리고 실제 링크 주소를 별도 줄에 작성하는데(줄 위치는 상관이 없지만 보통 링크가 들어가는 단락 다음이나 문서 맨 아래에 넣습니다) 링크 참조 아이디를 대괄호로 둘러 넣고 콜론을 붙인 후에 링크 주소를 넣습니다. a 태그 title 속성 값은 링크 주소 다음에 띄어쓴 후 제목을 넣고 큰 따옴표로 둘러쌉니다.

[사용자 가이드][user_guide]
[설치 가이드][installation_guide]

[user_guide]: http://www.3rabbitz.com/book_user_guide_2_0_ko
[installation_guide]: http://www.3rabbitz.com/book_installation_guide_2_0_ko "쓰리래빗츠 북 2.0 설치 가이드"

제목은 큰 따옴표뿐만 아니라 작은 따옴표나 괄호로 둘러쌀 수 있습니다.

[사용자 가이드][user_guide]
[설치 가이드][installation_guide]

[user_guide]: /book_user_guide_2_0_ko '쓰리래빗츠 북 2.0 사용자 가이드'
[installation_guide]: /book_installation_guide_2_0_ko (쓰리래빗츠 북 2.0 설치 가이드)

링크 주소가 길면 줄을 바꾼 후에 제목을 넣을 수 있습니다.

[사용자 가이드][user_guide]
[설치 가이드][installation_guide]

[user_guide]: /book_user_guide_2_0_ko
  "쓰리래빗츠 북 2.0 사용자 가이드"
[installation_guide]: /book_installation_guide_2_0_ko
  (쓰리래빗츠 북 2.0 설치 가이드)

읽기 쉽게 하기 위해 줄을 바꾼 후 들여쓰는 것을 권장합니다.

링크 내용을 참조 아이디로 사용할 수도 있습니다.

[사용자 가이드]
[설치 가이드]

[사용자 가이드]: /book_user_guide_2_0_ko
[설치 가이드]: /book_installation_guide_2_0_ko

그림 img

그림은 링크와 비슷하게 넣습니다. 링크와 구분하기 위해서 대괄호 앞에 느낌표를 넣습니다.

![로고](/resource/image/app/logo.png)

첫번째 대괄호 내용은 img 태그 alt 속성 값입니다. 링크와 같은 방식으로 img 태그 title 속성 값을 설정할 수 있습니다.

![로고](/resource/image/app/logo.png "쓰리래빗츠 로고")

링크처럼 참조 방식으로 그림을 넣을 수도 있습니다.

![로고][logo]

[logo]: /resource/image/app/logo.png

마트다운 기호

별표와 같은 마크다운 기호를 문서 내용에서 사용하려면 별표 앞에 역 슬래시를 넣습니다.

쓰리래빗츠 북은 온라인 \*\*도움말/매뉴얼\*\* 작성 도구입니다.

마크다운에서 사용하는 기호는 다음과 같습니다.

HTML 태그 사용하기

마트다운이 HTML을 완전하게 대체하는 것은 아닙니다. 예를 들어 표는 마크다운으로 처리할 수 없고 table 태그로 작성해야 합니다.

표는 `table` 태그로 작성합니다.

<table>
  <tr>
    <td>셀 1</tb>
    <td>셀 2</tb>
  </tr>
  <tr>
    <td>셀 3</tb>
    <td>셀 4</tb>
  </tr>
</table>

유투브 동영상도 iframe 또는 object 태그로 넣어야 합니다.

**피어나(가인)** 뮤직 비디오

<iframe width="560" height="315" src="//www.youtube.com/embed/K64mb5KUhhs" frameborder="0" allowfullscreen></iframe>

블록 태그 안에서는 마크다운 문법을 사용할 수 없고 인라인 태그 안에서는 마크다운을 사용할 수 있습니다. 아래 코드를 실행하면 그 차이를 알 수 있습니다.

<p>블록 태그 안에서는 **마크다운**을 사용할 수 없습니다.</p>

<span>인라인 태그 안에서는 **마크다운**을 사용할 수 있습니다.</span>

주요 블록 태그는 다음과 같습니다.

• p

• h1, h2, h3, h4, h5, h6

• ol, ul

• pre

• address

• blockquote

• dl

• div

• fieldset

• form

• hr

• noscript

• table

주요 인라인 태그는 다음과 같습니다.

• b, big, i, small, tt

• abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var

• a, bdo, br, img, map, object, q, script, span, sub, sup

• button, input, label, select, textarea