Markdown Editor

마크다운 사용자 가이드

0.1마크다운이란?

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

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

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

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

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

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

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

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

첫번째 단락

두번째 단락

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

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

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

1Stack Overflow가 제공하는 것과 비슷한 에디터는 간단한 마크다운 문법을 지원합니다.

2파일 업로드가 아닌 웹에 있는 그림을 넣는 것만을 지원합니다.

3자바로 만들어진 markdown4j 라이브러리로 미리보기를 제공합니다.

4미리보기에 HTML 태그를 표시할 지를 설정합니다.

0.3마크다운 문법

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

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

0.3.1문자

0.3.1.1매우 강조 strong

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

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

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

0.3.1.2강조 em

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

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

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

0.3.2단락

0.3.2.1보통 p

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

첫 번째 단락

두 번째 단락

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

첫 번째 단락



두 번째 단락

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

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

마크다운 공식 문서에서는 빈 줄이 아닌 줄 바꿈은 br 태그를 삽입하지 않는다고 설명하고 있지만 미리보기에서는 br 태그를 삽입합니다.

0.3.2.2제목 h1 ~ h6

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

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

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

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

1제목 1 단락은 단락 바로 다음 줄에 등호를 넣습니다.

2제목 2 단락은 단락 바로 다음 줄에 빼기 기호를 넣습니다.

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

제목 1입니다.
=

제목 2입니다.
-

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

# 제목 1입니다.

## 제목 2입니다.

### 제목 3입니다.

#### 제목 4입니다.

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

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

해시와 내용을 띄어쓰지 않아도 상관없지만 읽기 쉽게 하기 위해 띄어씁니다.

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

# 제목 1입니다. #

## 제목 2입니다. ##

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

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

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

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

0.3.2.3블럭 인용구 blockquote

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

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

꺾쇠와 내용을 띄어쓰지 않아도 상관없지만 읽기 쉽게 하기 위해 띄어씁니다.

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

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

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

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

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

숫자와 점은 띄어쓰지 않고 점과 내용은 띄어씁니다.

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

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

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

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

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

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

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

* 감자
* 고구마
* 옥수수
+ 감자
+ 고구마
+ 옥수수
- 감자
- 고구마
- 옥수수

기호와 내용은 반드시 띄어씁니다.

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

* 감자

* 고구마

* 옥수수

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

마크다운 공식 문서에서는 네 번 띄어쓰거나 탭 문자를 넣어야 한다고 설명하고 있지만 미리보기에서는 한 번만 띄어써도 단락을 구분합니다.

* 첫 번째 항목 첫 번째 단락

  첫 번째 항목 두 번째 단락

* 두 번째 항목 첫 번째 단락

  두 번째 항목 두 번째 단락

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

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

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

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

0.3.2.5수평선 hr

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

***
---
___

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

* * *
- - -
_ _ _

0.3.3단락 안에 단락 넣기

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

> 블록 인용구 단락에 순서 목록 단락 넣기
>
> 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!");
        }

0.3.4코드

0.3.4.1코드 문자열 code

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

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

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

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

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

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

0.3.4.2코드 단락 pre code

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

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

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

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

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

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

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

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

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

0.3.5링크 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

넣을 링크 주소가 많거나 같은 주소를 여러 번 사용한다면 참조 방식으로 링크를 넣는 것이 읽기도 바꾸기도 쉽습니다.

0.3.6그림 img

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

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

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

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

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

![로고][logo]

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

마크다운으로 그림 너비와 높이를 설정할 수는 없습니다. 너비와 높이를 설정해야 한다면 img 태그를 사용합니다.

0.3.7마트다운 기호

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

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

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

표 0-1마크다운 기호

기호

영어

한국어

\

backslash

역 슬래시

`

backtick

역 따옴표

*

asterisk

별표

_

underscore

밑줄

{}

curly braces

중괄호

[]

square brackets

대괄호

()

parentheses

괄호

#

hash mark

해시

+

plus sign

더하기

-

minus sign (hyphen)

빼기(하이픈)

.

dot

!

exclamation mark

느낌표

링크 주소를 넣을 때 사용하는 꺽쇠 괄호(angle brackets)는 마크다운 기호가 아닙니다.

0.3.8HTML 태그 사용하기

마트다운이 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>

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

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