[출처] : https://nhnent.dooray.com/htmls/guides/markdown_ko_KR.html

마크다운

마크다운(Markdown)이란?

2004년에 존 그루버(John Gruber)와 애런 스워츠(Aaron Swartz)가 만든 마크업 언어의 하나로 읽기 쉽고 쓰기 쉬운 텍스트 포맷입니다.

이 페이지의 왼쪽은 마크다운 편집기입니다. 자유롭게 연습해 보세요. 여러분이 연습한 내용은 다른 사람에게 보이지 않고, 저장되지 않습니다. ㅇ 아래 링크를 클릭하여 해당 도움말(연습장)로 바로 이동할 수도 있습니다.

• 문단
• 제목
• 인용
• 강조
• 취소선
• 목록
• 할일 목록
• 링크
• 표
• 코드 포맷
• 수식
• UML

문단

문장 사이에 하나 이상의 빈 줄을 사용하면 문단을 나눌 수 있습니다.

마크다운 편집 모드에서는 빈 줄을 여러 번 입력해도 한 줄만 적용됩니다. 다음 예제를 보면 왼쪽 편집기에는 빈 줄이 세 줄 있지만 오른쪽 화면에는 빈 줄이 하나만 반영되어 있습니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Curabitur eros lorem, laoreet in enim at, sodales tempor quam. Etiam sit amet mattis ligula. Suspendisse accumsan orci sed leo aliquet, eget posuere neque iaculis.

제목

줄 앞에 #을 붙이면 제목이 됩니다. #을 중복해서 사용하여 하위 제목을 만들 수 있습니다.

# 다음에 공백을 한 칸 넣어야 하는 것을 잊지 마세요. 바로 아래 첫 번째 예제는 공백없이 제목을 입력해서 글자가 크게 보이지 않습니다.

#no_space

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

인용

글 앞에 > 표시를 사용해서 인용문을 나타낼 수 있습니다. 인용문의 두 번째 줄 앞에는 >을 적지 않아도 됩니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros lorem, laoreet in enim at, sodales tempor quam. Etiam sit amet mattis ligula.

Etiam sit amet mattis ligula. - someone

다만 인용문이 여러 문단일 경우에는 빈 줄에도 >을 붙여야 합니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros lorem, laoreet in enim at, sodales tempor quam. Etiam sit amet mattis ligula.

Etiam sit amet mattis ligula. - someone

강조

굵게 또는 기울여서 글을 강조할 수 있습니다. 글 앞/뒤에 *나 _를 1번(기울게) 혹은 2번(굵게)을 입력하여 감싸면 됩니다.

이 문장은 굵게 표시됩니다. 이 문장은 기울여 표시됩니다. 굵은 표시와 기울린 표시를 조합할 수도 있습니다.

이 문장도 굵게 표시됩니다. 이 문장도 기울여 표시됩니다.

취소선

문구나 문장의 앞 뒤를 ~~으로 감싸면 취소선을 표시할 수 있습니다.

이 문장은 취소선이 표시됩니다.

목록

순서 없는 목록

문장 맨 앞에 공백없이 * 나 -를 입력하면 순서 없는 목록을 만들 수 있습니다. * 앞에 공백을 넣으면 안되지만, * 다음에는 공백을 넣어야 합니다. 만일 * 다음에 공백을 넣지 않으면 강조로 인식할 수 있습니다.

*no_space

• item
• item

• item

• item
• item
• item

순서 있는 목록

글 앞에 숫자를 입력하면 순서 있는 목록을 만들 수 있습니다. 순서와 상관없이 입력해도 자동으로 숫자가 매겨집니다.

1. 첫 번째
2. 두 번째

3. 세 번째

4. 첫 번째
5. 두 번째
6. 세 번째

중첩된 목록

두 칸을 들여 쓰거나 TAB을 입력해서 중첩된 목록을 만들 수 있습니다. 반대로 내어 쓸 때는 Shift+TAB을 입력합니다.

1. 첫 번째 목록
   1. 첫 번째의 첫 번째 목록
   2. 첫 번째의 두 번째 목록
2. 두 번째 목록
   • 두 번째의 순서 없는 목록
   • 두 번 중첩된 순서 없는 목록
     • 몇 번이고 중첩할 수 있습니다.
3. 세 번째 목록

할 일 목록

본문에 간단한 할 일 목록을 만들 수 있습니다. 편집 화면이 아닌 읽기 화면에서 체크 박스를 클릭하면 클릭한 그 상태를 저장합니다.

장보기

• 계란
• 당근
• 우유

링크

일반 링크

화면에 표시할 글은 [](대괄호)로 감싸고, 이동할 주소에는 ()(괄호)를 감싸서 입력하면 자동으로 링크를 생성할 수 있습니다.

다음 예제와 같이 잘 알려진 유형에 대해서는 자동으로 링크를 생성해주기도 합니다.

Dooray! https://dooray.com/

업무 참조

Dooray! Project 업무 링크를 적을 때도 사용할 수 있습니다. 브라우저의 주소를 이용한 것보다 유용합니다.

편집기에서 [를 입력한 후 나타나는 메뉴에서 ‘업무 참조’를 선택합니다. 기본적으로 최근에 본 업무가 보입니다. 그 중에서 선택할 수도 있고 바로 검색어를 입력해서 원하는 업무를 찾아 선택할 수도 있습니다.

이미지

이미지는 ‘!’를 링크 앞에 붙여 생성할 수 있습니다.

표

첫 번째 행을 -(하이픈)으로 구별하고, 각 열을 |(수직선 기호)로 구별하여 표를 만들 수 있습니다.

행의 처음과 마지막에 |을 넣을 수도 있습니다.

-과 |들이 각각 열을 맞추지 않아도 됩니다.

표 안에 강조나 취소선 등도 사용할 수 있습니다.

하지만 셀을 걸쳐서는 사용할 수 없습니다.

표 안에 -(하이픈)과 :(콜론)을 사용하여 정렬을 맞출 수 있습니다.

셀 병합 기능은 개발 중입니다.

코드 포맷

프로그램 소스 코드를 위한 표기입니다. 다음의 방법을 이용하면 고정폭 글꼴과 배경색으로 문구나 문단을 강조할 수 있습니다.

인라인 포맷

문장 안에 있는 프로그램 코드를 `(억음 부호)로 감싸서 표현할 수 있습니다. 또한 ` 사이의 글은 모두 적힌 그대로 보입니다.

Lorem ipsum dolor sit amet, var a = new Message(); consectetur adipiscing elit. Curabitur eros lorem, laoreet in enim at, sodales tempor quam. Etiam sit amet mattis ligula. 여기 적은 글은 **굵게** 표시되지 않고 *기울여* 보이지도 않습니다.

멀티라인

억음 부호 3개( `)를 사용하면 독립된 블록으로 텍스트를 포매팅할 수 있습니다.

var message = 'hooray!';
console.log(message.replace(/^h/, 'D'));

어떤 프로그래밍 언어인지 지정할 수도 있습니다.

var message = 'hooray!';
console.log(message.replace(/^h/, 'D'));

String message = 'Dooray!';

LaTex 수식

LaTex 문법의 수식을 작성할 수 있습니다.

f(x) = \int_{-\infty}^\infty
\hat f(\xi),e^{2 \pi i \xi x}
,d\xi

UML

SW개발에서 사용하는 UML을, 내용을 기술하는 형태로 작성할 수 있습니다.

다음의 예를 참고하시고 자세한 것은 Dooray!에서 사용하는 PlantUML 사이트에서 확인하시기 바랍니다.(예제는 PlantUML 사이트에서 인용했습니다.)

http://plantuml.com/

Sequence Diagram

http://plantuml.com/sequence-diagram

Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response

UseCase Diagram

http://plantuml.com/use-case-diagram

:Main Admin: as Admin
(Use the application) as (Use)

User -> (Start)
User --> (Use)

Admin ---> (Use)

note right of Admin : This is an example.

note right of (Use)
  A note can also
  be on several lines
end note

note "This note is connected\nto several objects." as N2
(Start) .. N2
N2 .. (Use)

Class Diagram

http://plantuml.com/class-diagram

Object <|-- Dummy

class Dummy {
  String data
  void methods()
  -field1
  #field2
  ~method1()
  +method2()
}

class Flight {
   flightNumber : Integer
   departureTime : Date
}

class Car

Driver - Car : drives >
Car *- Wheel : have 4 >
Car -- Person : < owns

Activity Diagram

http://plantuml.com/activity-diagram-beta

start
partition Initialization {
    :read config file;
    :init internal variable;
}
partition Running {
    if (multiprocessor?) then (yes)
    fork
        :Treatment 1;
    fork again
        :Treatment 2;
        detach
    end fork
    else (monoproc)
    :Treatment 1;
    :Treatment 2;
    endif
}

stop

Component Diagram

http://plantuml.com/component-diagram

package "Some Group" {
  HTTP - [First Component]
  [Another Component]
}

node "Other Groups" {
  FTP - [Second Component]
  [First Component] --> FTP
}

cloud {
  [Example 1]
}


database "MySql" {
  folder "This is my folder" {
    [Folder 3]
  }
  frame "Foo" {
    [Frame 4]
  }
}


[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]

State Diagram

http://plantuml.com/state-diagram

[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string

State1 -> State2
State2 --> [*]

scale 350 width
[*] --> NotShooting

state NotShooting {
  [*] --> Idle
  Idle --> Configuring : EvConfig
  Configuring --> Idle : EvConfig
}

state Configuring {
  [*] --> NewValueSelection
  NewValueSelection --> NewValuePreview : EvNewValue
  NewValuePreview --> NewValueSelection : EvNewValueRejected
  NewValuePreview --> NewValueSelection : EvNewValueSaved

  state NewValuePreview {
     State1 -> State2
  }

}