마크다운 = 마(인)크(래프트) 다운(로드)
개요[편집 / 원본 편집]
텍스트 기반의 마크업 언어로, 2004년 존 그루버(John Gruber)가 만들었다. 위키에서는 그 위키 엔진에서 제공하는 문법으로 작성해야 원하는 모양으로 표시할 수 있는 것처럼, 마크다운이라는 문법 체계에 맞춰 작성하면 굵게 하거나, 기울이기 등을 적용할 수 있다.
널리 퍼지게 된 때는 깃허브에서 마크다운을 사용하기 시작하면서 간단하게 작성하면서 가독성이 높은 문서를 작성할 수 있어서 널리 퍼지게 되었다. 현재는 GitHub Flavored Markdown(GFM), CommonMark 등 다양한 확장 버전이 존재한다.
특징[편집 / 원본 편집]
문법이 간결하며, CKEditor와 같이 에디터가 없더라도 마크다운을 작성할 수 있으며, 에디터로 작성하는 것이 아닌 텍스트로 저장이 되기에 차지하는 용량이 적다는 장점이 있다.
또한 텍스트이기에 깃허브와 같이 버전 관리 시스템에서 변경사항을 확인할 수 있다.
하지만 표준이 없기에 변환 체계에 따라 결과물이 달라질 수 있으며, 모든 HTML을 대체할 수 없고, 몇몇 문법에서는 세세한 조절 또한 불가능하기에 HTML 태그를 이용해야 한다는 단점이 있다.
표준이 없으므로 마크다운을 사용하는 곳이더라도 같은 태그로 사용하더라도 지원하지 않는 곳도 있기에 확인이 필요하다.
문법[편집 / 원본 편집]
마크다운 문법, HTML 문법, 위키 문법, 결과물 순으로 작성하며, 위키에서는 마크다운 문법을 지원하지 않기에 위키 문법이나 HTML 문법으로 출력시킵니다.
제목 (Headings)[편집 / 원본 편집]
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6 |
<h1>This is a H1</h1>
<h2>This is a H2</h2>
<h3>This is a H3</h3>
<h4>This is a H4</h4>
<h5>This is a H5</h5>
<h6>This is a H6</h6> |
| 마크다운 문법 | HTML 문법 |
|---|---|
= This is a H1 =
== This is a H2 ==
=== This is a H3 ===
==== This is a H4 ====
===== This is a H5 =====
====== This is a H6 ====== |
|
| 위키 문법 | 결과 |
HTML에서 heading 태그가 <h6></h6>까지 있기에 마크다운 또한 h6까지만 지원한다. 즉, h7은 없다.
대체 제목 문법[편집 / 원본 편집]
H1과 H2는 다음과 같은 대체 문법도 사용할 수 있다:
This is an H1
=============
This is an H2
<hr> |
<h1>This is an H1</h1>
<h2>This is an H2</h2> |
| 마크다운 문법 | HTML 문법 |
|---|
강조 (Emphasis)[편집 / 원본 편집]
*기울임* 또는 _기울임_
**굵게** 또는 __굵게__
***굵고 기울임*** 또는 ___굵고 기울임___
<s>취소선</s> |
<em>기울임</em>
<strong>굵게</strong>
<strong><em>굵고 기울임</em></strong>
<del>취소선</del> |
| 마크다운 문법 | HTML 문법 |
|---|---|
''기울임''
'''굵게'''
'''''굵고 기울임'''''
<s>취소선</s> |
기울임 |
| 위키 문법 | 결과 |
목록 (Lists)[편집 / 원본 편집]
순서 없는 목록 (Unordered Lists)[편집 / 원본 편집]
* 봄
* 여름
* 가을
* 겨울
- 봄
- 여름
- 가을
- 겨울
+ 봄
+ 여름
+ 가을
+ 겨울
* 봄
+ 여름
- 가을
* 겨울 |
<ul>
<li>봄
<ul>
<li>여름
<ul>
<li>가을
<ul>
<li>겨울</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul> |
| 마크다운 문법 | HTML 문법 |
|---|---|
* 봄
** 여름
*** 가을
<hr> 겨울 |
겨울 |
| 위키 문법 | 결과 |
*, +, -를 혼합해서 사용해도 상관없다.
순서 있는 목록 (Ordered Lists)[편집 / 원본 편집]
1. 가나다
2. 라마바
3. 사아자
1. 가나다
3. 라마바
2. 사아자 |
<ol>
<li>가나다</li>
<li>라마바</li>
<li>사아자</li>
</ol> |
| 마크다운 문법 | HTML 문법 |
|---|---|
# 가나다
# 라마바
# 사아자 |
|
| 위키 문법 | 결과 |
마크다운에서는 순번을 정하면 자동으로 순서대로 출력하기 때문에 1, 3, 4, 2 순으로 해도 1, 2, 3, 4 순으로 내용값은 바뀜 없이 출력이 된다.
링크 (Links)[편집 / 원본 편집]
[링크 텍스트](URL)
[링크 텍스트](URL "툴팁 텍스트")
[Google](https://google.com)
[Google](https://google.com "구글 홈페이지")
참조 링크:
[링크 텍스트][참조]
[참조]: URL "툴팁"
자동 링크:
<https://google.com>
<[email protected]> |
<a href="URL">링크 텍스트</a>
<a href="URL" title="툴팁 텍스트">링크 텍스트</a>
<a href="https://google.com">Google</a>
<a href="https://google.com" title="구글 홈페이지">Google</a>
<a href="URL" title="툴팁">링크 텍스트</a>
<a href="https://google.com">https://google.com</a>
<a href="mailto:[email protected]">[email protected]</a> |
| 마크다운 문법 | HTML 문법 |
|---|---|
[https://google.com 링크 텍스트]
[[내부 링크]]
[[내부 링크|표시 텍스트]]
https://google.com |
|
| 위키 문법 | 결과 |
이미지 (Images)[편집 / 원본 편집]
참조 이미지:
![대체 텍스트][참조]
[참조]: 이미지URL "툴팁" |
<img src="이미지URL" alt="대체 텍스트">
<img src="이미지URL" alt="대체 텍스트" title="툴팁">
<img src="https://github.com/logo.png" alt="Github">
<img src="이미지URL" alt="대체 텍스트" title="툴팁"> |
| 마크다운 문법 | HTML 문법 |
|---|---|
[[파일:이미지.png]]
[[파일:이미지.png|대체 텍스트]]
[[파일:이미지.png|150px]]
[[파일:이미지.png|섬네일|설명]] |
|
| 위키 문법 | 결과 |
인용구 (Blockquotes)[편집 / 원본 편집]
> 이것은 인용구입니다.
>
> 여러 줄에 걸쳐 작성할 수 있습니다.
>
> > 중첩된 인용구도 가능합니다.
> >
> > 이렇게 말이죠.
> ## 인용구 안에서도
> ### 다른 마크다운 문법을 사용할 수 있습니다.
>
> - 목록도 가능하고
> - **굵은 글씨**도 가능합니다. |
<blockquote>
<p>이것은 인용구입니다.</p>
<p>여러 줄에 걸쳐 작성할 수 있습니다.</p>
<blockquote>
<p>중첩된 인용구도 가능합니다.</p>
<p>이렇게 말이죠.</p>
</blockquote>
</blockquote> |
| 마크다운 문법 | HTML 문법 |
|---|---|
<blockquote>
이것은 인용구입니다.
여러 줄에 걸쳐 작성할 수 있습니다.
<blockquote>
중첩된 인용구도 가능합니다.
이렇게 말이죠.
</blockquote>
</blockquote> |
|
| 위키 문법 | 결과 |
코드 (Code)[편집 / 원본 편집]
인라인 코드[편집 / 원본 편집]
`인라인 코드`는 백틱으로 감쌉니다.
``코드에 백틱이 있으면 ` 이렇게`` 사용합니다. |
<code>인라인 코드</code>는 백틱으로 감쌉니다.
<code>코드에 백틱이 있으면 ` 이렇게</code> 사용합니다. |
| 마크다운 문법 | HTML 문법 |
|---|---|
<code>인라인 코드</code>는 백틱으로 감쌉니다.
<nowiki><code>코드에 백틱이 있으면 ` 이렇게</code></nowiki> 사용합니다. |
|
| 위키 문법 | 결과 |
코드 블록[편집 / 원본 편집]
```
일반적인 코드 블록
여러 줄에 걸쳐 작성
```
```python
# 언어를 지정한 코드 블록
def hello():
print("Hello, World!")
```
들여쓰기 4칸으로도
코드 블록을 만들 수 있습니다. |
<pre><code>일반적인 코드 블록
여러 줄에 걸쳐 작성
</code></pre>
<pre><code class="language-python"># 언어를 지정한 코드 블록
def hello():
print("Hello, World!")
</code></pre>
<pre><code>들여쓰기 4칸으로도
코드 블록을 만들 수 있습니다.
</code></pre> |
| 마크다운 문법 | HTML 문법 |
|---|---|
<syntaxhighlight>
일반적인 코드 블록
여러 줄에 걸쳐 작성# 언어를 지정한 코드 블록
def hello():
print("Hello, World!")들여쓰기 4칸으로도 코드 블록을 만들 수 있습니다. </syntaxhighlight> |
일반적인 코드 블록
여러 줄에 걸쳐 작성# 언어를 지정한 코드 블록
def hello():
print("Hello, World!")들여쓰기 4칸으로도 코드 블록을 만들 수 있습니다. |
| 위키 문법 | 결과 |
구분선 (Horizontal Rules)[편집 / 원본 편집]
가나다라마바사
- - -
아자차카타파하
가나다라마바사
***
아자차카타파하
가나다라마바사
<hr>
아자차카타파하
가나다라마바사
* * *
아자차카타파하
가나다라마바사
<hr>
아자차카타파하
가나다라마바사
___
아자차카타파하 |
<p>가나다라마바사</p>
<hr/>
<p>아자차카타파하</p> |
| 마크다운 문법 | HTML 문법 |
|---|---|
가나다라마바사
<hr/>
아자차카타파하 |
가나다라마바사 아자차카타파하 |
| 위키 문법 | 결과 |
-, *, _ 문자를 3개 이상 사용하면 구분선이 그어진다. 사이에 공백이 있어도 된다.
테이블 (Tables)[편집 / 원본 편집]
GitHub Flavored Markdown에서 지원하는 테이블 문법:
| 제목1 | 제목2 | 제목3 |
|<hr>|<hr>|<hr>|
| 내용1 | 내용2 | 내용3 |
| 내용4 | 내용5 | 내용6 |
정렬:
| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
|:<hr>|:<hr>:|<hr>:|
| 내용1 | 내용2 | 내용3 |
| 내용4 | 내용5 | 내용6 | |
<table>
<thead>
<tr>
<th>제목1</th>
<th>제목2</th>
<th>제목3</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용1</td>
<td>내용2</td>
<td>내용3</td>
</tr>
<tr>
<td>내용4</td>
<td>내용5</td>
<td>내용6</td>
</tr>
</tbody>
</table> | |||||||||
| 마크다운 문법 | HTML 문법 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
{| class="wikitable"
|-
! 제목1 !! 제목2 !! 제목3
|-
| 내용1 || 내용2 || 내용3
|-
| 내용4 || 내용5 || 내용6
|} |
| |||||||||
| 위키 문법 | 결과 |
체크박스 (Task Lists)[편집 / 원본 편집]
GitHub Flavored Markdown에서 지원:
- [x] 완료된 작업
- [ ] 미완료 작업
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> 지원
- [x] 리스트 문법 필요 (순서 있는 목록이나 순서 없는 목록)
- [ ] 미완료 작업
- [ ] 중첩된 미완료 작업
- [x] 중첩된 완료 작업 |
<ul>
<li><input type="checkbox" checked disabled> 완료된 작업</li>
<li><input type="checkbox" disabled> 미완료 작업</li>
<li><input type="checkbox" checked disabled> @mentions, #refs, <a href="">links</a>, <strong>formatting</strong>, and <del>tags</del> 지원</li>
<li><input type="checkbox" checked disabled> 리스트 문법 필요</li>
<li><input type="checkbox" disabled> 미완료 작업
<ul>
<li><input type="checkbox" disabled> 중첩된 미완료 작업</li>
<li><input type="checkbox" checked disabled> 중첩된 완료 작업</li>
</ul>
</li>
</ul> |
| 마크다운 문법 | HTML 문법 |
|---|---|
| 미디어위키에서는 직접적인 체크박스 지원이 제한적입니다. | |
| 위키 문법 | 결과 |
이스케이프 문자 (Escaping)[편집 / 원본 편집]
\*이것은 기울임이 아닙니다\*
\# 이것은 제목이 아닙니다
\[이것은 링크가 아닙니다\]
\`이것은 코드가 아닙니다\`
이스케이프할 수 있는 문자들:
\ 백슬래시
` 백틱
* 별표
_ 언더스코어
{} 중괄호
[] 대괄호
() 소괄호
# 해시
+ 플러스
- 마이너스
. 점
! 느낌표 |
*이것은 기울임이 아닙니다*
# 이것은 제목이 아닙니다
[이것은 링크가 아닙니다]
`이것은 코드가 아닙니다` |
| 마크다운 문법 | HTML 문법 |
|---|---|
<nowiki>*이것은 기울임이 아닙니다*</nowiki>
<nowiki># 이것은 제목이 아닙니다</nowiki>
<nowiki>[이것은 링크가 아닙니다]</nowiki>
<nowiki>`이것은 코드가 아닙니다`</nowiki> |
*이것은 기울임이 아닙니다* |
| 위키 문법 | 결과 |
줄바꿈 (Line Breaks)[편집 / 원본 편집]
첫 번째 줄
두 번째 줄 (줄 끝에 공백 2개)
첫 번째 줄
두 번째 줄 (빈 줄로 문단 구분) |
첫 번째 줄<br/>
두 번째 줄
<p>첫 번째 줄</p>
<p>두 번째 줄</p> |
| 마크다운 문법 | HTML 문법 |
|---|---|
첫 번째 줄<br/>
두 번째 줄
첫 번째 줄
두 번째 줄 |
첫 번째 줄 첫 번째 줄 두 번째 줄 |
| 위키 문법 | 결과 |
확장 문법[편집 / 원본 편집]
GitHub Flavored Markdown (GFM)[편집 / 원본 편집]
GitHub에서 확장한 마크다운 문법들:
- 테이블 (Tables)
- 작업 목록 (Task Lists)
- 취소선 (
strikethrough) - 자동 링크 확장
- 이모지 지원 (:smile:)
- 코드 블록의 언어 하이라이팅
CommonMark[편집 / 원본 편집]
마크다운의 표준화를 위한 스펙:
- 일관된 파싱 규칙
- 명확한 문법 정의
- 다양한 구현체 간의 호환성
활용 사례[편집 / 원본 편집]
- GitHub - README 파일, 이슈, 위키
- Reddit - 댓글과 게시물
- Stack Overflow - 질문과 답변
- Discord - 메시지 포맷팅
- Jupyter Notebook - 마크다운 셀
- 정적 사이트 생성기 - Jekyll, Hugo, Gatsby 등
- 문서화 도구 - GitBook, Docsify, VuePress 등
- 노트 앱 - Obsidian, Notion, Typora 등
주의사항[편집 / 원본 편집]
마크다운 구현체마다 지원하는 기능이 다를 수 있다. 일부 특수한 기능은 HTML 태그를 직접 사용해야 한다.
대부분의 에디터 등은 보안을 위해 자바스크립트 코드를 무시한다.
들여쓰기와 공백에 민감한 마크업 언어이다. 한글과 영문 사이의 공백 처리에 주의해야 한다. 또한 번호 매기기에서 시작 번호는 첫 번째 항목의 번호를 따른다.
관련 도구[편집 / 원본 편집]
편집기[편집 / 원본 편집]
- Typora - WYSIWYG 마크다운 에디터
- Mark Text - 실시간 미리보기 에디터
- Zettlr - 학술 글쓰기용 마크다운 에디터
- Obsidian - 지식 관리용 마크다운 앱
변환 도구[편집 / 원본 편집]
- Pandoc - 다양한 문서 형식 간 변환
- Marked - JavaScript 마크다운 파서
- markdown-it - CommonMark 호환 파서
- Remark - 플러그인 생태계를 가진 프로세서