Skip to content

Markdown

마크다운 (Markdown)은 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었다. 읽기도 쓰기도 쉽다는 장점이 있다. 그루버는 마크다운으로 작성한 문서를 HTML로 변환하는 펄 스크립트도 만들었다. 확장자는 .md를 쓴다.

Basic Syntax

These are the elements outlined in John Gruber’s original design document. All Markdown applications support these elements.

Element

Markdown Syntax

Heading 

# H1
## H2
### H3

Bold

**bold text**

Italic

*italicized text*

Blockquote

> blockquote

Ordered List 

1. First item
2. Second item
3. Third item

Unordered List 

- First item
- Second item
- Third item

Code

`code`

Horizontal Rule

---

Link

[title](https://www.example.com)

Image

![alt text](image.jpg)

Extended Syntax

These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.

Element

Markdown Syntax

Table

Fenced Code Block
{ "firstName": "John", "lastName": "Smith", "age": 25 }

Footnote 

Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.

Heading ID

### My Great Heading {#custom-id}

Definition List 

term
: definition

Strikethrough

~~The world is flat.~~

Task List 

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Syntax 

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

제목1(h1)과 제목2(h2)는 다음과 같이 표현할 수 있습니다. 

제목 1
======

제목 2
------

강조 (Emphasis)

각각 <em>, <strong>, <del> 태그로 변환됩니다.

밑줄을 입력하고 싶다면 <u></u> 태그를 직접 사용. 

이텔릭체는 *별표(asterisks)* 혹은 _언더바(underscore)_를 사용하세요.
두껍게는 **별표(asterisks)** 혹은 __언더바(underscore)__를 사용하세요.
**_이텔릭체_와 두껍게**를 같이 사용할 수 있습니다.
취소선은 ~~물결표시(tilde)~~를 사용하세요.
<u>밑줄</u>은 `<u></u>`를 사용하세요.

<a>로 변환됩니다. 

[GOOGLE](https://google.com)

[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")

[상대적 참조](../users/login)

[Dribbble][Dribbble link]

[GitHub][1]

문서 안에서 [참조 링크]를 그대로 사용할 수도 있습니다.

다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(`< >`, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: <https://naver.com>

[Dribbble link]: https://dribbble.com
[1]: https://github.com
[참조 링크]: https://naver.com "네이버로 이동합니다!"

이미지 (Images)

<img>로 변환됩니다. 링크과 비슷하지만 앞에 !가 붙습니다. 

![대체 텍스트(alternative text)를 입력하세요!](http://www.gstatic.com/webp/gallery/5.jpg "링크 설명(title)을 작성하세요.")

![Kayak][logo]

[logo]: http://www.gstatic.com/webp/gallery/2.jpg "To go kayaking."

이미지에 링크

마크다운 이미지 코드를 링크 코드로 묶어 줍니다. 

[![Vue](/images/vue.png)](https://kr.vuejs.org/)

인라인 (inline) 코드 강조 

`background`혹은 `background-image` 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.

블록 (block) 코드 강조

`를 3번 이상 입력하고 코드 종류도 적습니다. 

```html
<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>

.list > li {
  position: absolute;
  top: 40px;
}

function func() {
  var a = 'AAA';
  return a;
}

$ vim ./~zshrc

s = "Python syntax highlighting"
print s


No language indicated, so no syntax highlighting. 
But let's throw in a tag.

<h3 markdown="1">
인용문 (BlockQuote)
</h3>
<p markdown="1">
`<blockquote>` 태그로 변환됩니다.
</p>
```md
인용문(blockQuote)

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
> _(네이버 국어 사전)_

BREAK!

> 인용문을 작성하세요!
>> 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
>>> 중중첩된 인용문 1
>>> 중중첩된 인용문 2
>>> 중중첩된 인용문 3

수평선 (Horizontal Rule)

각 기호를 3개 이상 입력하세요. 

---
(Hyphens)

***
(Asterisks)

___
(Underscores)

줄바꿈 (Line Breaks) 

동해물과 백두산이 마르고 닳도록 
하느님이 보우하사 우리나라 만세   <!--띄어쓰기 2번-->
무궁화 삼천리 화려 강산<br>
대한 사람 대한으로 길이 보전하세

Table

Mixing html inside markdown can work sometimes. In your particular case, it won't work cleanly: 

| <td colspan=1>Layer 1  | <td colspan=1>Layer 2   | Layer 3 |
| ---------------------- | ----------------------- | --------- |
| <td rowspan=4>L1 Name  | <td rowspan=2>L2 Name A | L3 Name A |
|                        |                         | L3 Name B |
|                        | <td rowspan=2>L2 Name B | L3 Name C |
|                        |                         | L3 Name D |

See also

Favorite site

Markdown Guide