<div oncontextmenu="return false" onselectstart="return false" ondragstart="return false" oncopy="return false" oncut="return false" onpaste="return false">
# 마크다운(Markdown) 소개 및 사용 방법
<a name="index"></a>
***
## ◼︎ 목차
- [마크다운(Markdown)이란?](#index-intro)
- [마크다운을 사용하는 주요 프로그램](#index-service)
- [마크다운 문법 (사용법)](#index-00)
- [1. 헤더 (Header)](#index-01)
- [2. 인용문 (BlockQuote)](#index-02)
- [3. 목록 (List)](#index-03)
- [4. 코드 (Code)](#index-04)
- [5. 수평선 (Horizontal Line)](#index-05)
- [6. 링크 (Anchor)](#index-06)
- [7. 강조 (Decoration)](#index-07)
- [8. 이미지 (Image)](#index-08)
- [9. 표 (Table)](#index-09)
<a name="index-intro"></a>
***
# ◼︎ 마크다운(Markdown)이란? <span style="font-size:0.8em">[↑](#index)</span>
<div style="text-align:center;">
<img src="https://hellotblog.files.wordpress.com/2018/06/trendtalk-school-web-markdown-250x250.jpg">
</div>
**마크다운**(Markdown)은 2004년 존 그루버(John Gruber)에 의해 개발된 마크업 언어(Markup Language)입니다.
간단한 특수기호와 문자로 이루어진 마크다운의 문법을 이용하면, HTML과 같은 ==다소 장황하고 복잡한 포맷이 없이도 구조적인 웹문서를 빠르게 작성==할 수 있습니다.
또한 마크다운을 이용해 작성된 문서는 HTML 또는 PPT와 같은 ==다른 문서 형태로도 손쉽게 변환==이 가능합니다.
마크다운으로 쓰여진 문서는 ```.md``` 라는 확장자를 사용합니다.
<a name="index-service"></a>
***
# ◼︎ 마크다운을 사용하는 주요 프로그램 <span style="font-size:0.8em">[↑](#index)</span>
- 워드프레스 (WordPress)
- 깃헙 (Github)
- 레딧 (Reddit)
- 텀블러 (Tumblr)
- 트렐로 (Trello)
- 스팀잇 (Steemit)
- 디스코드 (Discord)
- 스택오버플로우 (Stack Overflow)
<a name="index-00"></a>
****
# ◼︎ 마크다운 문법 (사용법) <span style="font-size:0.8em">[↑](#index)</span>
<a name="index-01"></a>
***
## 1. 헤더 (Header) <span style="font-size:0.8em">[↑](#index)</span>
```
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
```
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
<a name="index-02"></a>
***
## 2. 인용문 (BlockQuote) <span style="font-size:0.8em">[↑](#index)</span>
```
> This is a first blockqute.
> > This is a second blockqute.
> > > This is a third blockqute.
```
> This is a first blockqute.
> > This is a second blockqute.
> > > This is a third blockqute.
<a name="index-03"></a>
***
## 3. 목록 (List) <span style="font-size:0.8em">[↑](#index)</span>
### 3.1. 순서가 있는 목록
```
1. 첫번째
2. 두번째
3. 세번째
```
1. 첫번째
2. 두번째
3. 세번째
### 3.2. 순서가 없는 목록
```
* 빨강
* 녹색
* 파랑
+ 빨강
+ 녹색
+ 파랑
- 빨강
- 녹색
- 파랑
```
* 빨강
* 녹색
* 파랑
```
* 1단계
- 2단계
+ 3단계
```
* 1단계
- 2단계
+ 3단계
<a name="index-04"></a>
***
## 4. 코드 (Code) <span style="font-size:0.8em">[↑](#index)</span>
```
This is a normal paragraph:
This is a code block.
end code block.
```
This is a normal paragraph:
This is a code block.
end code block.
<a name="index-05"></a>
***
## 5. 수평선 (Horizontal Line) <span style="font-size:0.8em">[↑](#index)</span>
```
* * *
***
*****
- - -
-------------------
```
- 위의 표현은 모두 동일한 수평선을 표현합니다.
<a name="index-06"></a>
***
## 6. 링크 (Anchor) <span style="font-size:0.8em">[↑](#index)</span>
```
[트렌드톡](https://news.trendtalk.kr/)
```
<a href="https://news.trendtalk.kr/" target="_blank">트렌드톡</a>
<a name="index-07"></a>
***
## 7. 강조 (Decoration) <span style="font-size:0.8em">[↑](#index)</span>
```
*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
~~cancelline~~
```
*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
~~cancelline~~
<a name="index-08"></a>
***
## 8. 이미지 (Image) <span style="font-size:0.8em">[↑](#index)</span>
```
```
- 이미지의 사이즈를 변경하기 위해서는 ```<img width="OOOpx" height="OOOpx"></img>```와 같이 표현합니다.
<a name="index-09"></a>
***
## 9. 표 (Table) <span style="font-size:0.8em">[↑](#index)</span>
```
| 헤더1 | 헤더2 | 헤더3 |
|:---:|:---:|:---:|
| 셀 1 | 셀 2 | 셀 3 |
| 셀 4 | 셀 5 | 셀 6 |
| 셀 7 | 셀 8 | 셀 9 |
```
| 헤더1 | 헤더2 | 헤더3 |
|:---:|:---:|:---:|
| 셀 1 | 셀 2 | 셀 3 |
| 셀 4 | 셀 5 | 셀 6 |
| 셀 7 | 셀 8 | 셀 9 |
***
[](#index)
***
저작권자 ⓒ 트렌드톡 ( <a href="http://www.trendtalk.kr" target="_blank">www.trendtalk.kr</a> ) | 무단 전재 및 재배포 금지
***
</div>
