마크다운 사용법
블로그에 문서를 작성하려면 마크다운의 문법을 알아야할 필요가 있다.
기본적인 문법만 작성했다.
마크다운 작성 프로그램으로 Obsidian을 사용했는데, 프로그램에서의 미리보기와 블로그에 나오는 결과가 너무 달라 당황했다.
이유는 줄바꾸기로, 줄을 바꾸자 할 때 문장 맨 끝에 두 칸의 공백을 두는 것을 습관화 하도록 하자 .
1. 헤더 (Headers)
===&---로 설정
1
2
This is an H1
===
This is an H1
1
2
This is an H2
---
This is an H2
#로 설정
1
2
3
4
5
6
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6
This is a H1
This is a H2
This is a H3
This is a H4
This is a H5
This is a H6
2. 블록 인용구 (Block Quote)
1
2
3
> This is a first blockquote.
>> This is a second blockquote.
>>> This is a third blockquote.
This is a first blockqute.
This is a second blockqute.
This is a third blockqute.
3. 목록 (List)
- 순서 있는 목록
1
2
3
4
1. First line
2. Second line
3. Third line
4. Last line
- First line
- Second line
- Third line
- Last line
- 번호를 뒤죽박죽, 또는 중복해서 적었을 경우에도 순차적으로 번호를 정리해 줌
1
2
3
4
5
6
7
8
9
1. First line
3. Second line
4. Third line
2. Last line
---
1. First line
2. Second line
1. Thrid line
2. Last line
- First line
- Second line
- Third line
- Last line
- First line
- Second line
- Third line
- Last line
- 순서없는 목록 (
*,+,-사용 가능)
기호를 혼합해서 사용해도 무방
계층별로 나누고 싶다면tab을 삽입
1
2
3
4
5
6
7
8
9
10
11
12
* First
* Second
* Third
+ First
+ Second
+ Third
- First
- Second
- Third
- First
- Second
- Third
- Second
- First
- Second
- Third
- Second
- First
- Second
- Third
- Second
4. 코드 (Code)
- 코드 블럭(Code Block): ``` 혹은
<pre><code>{내용}</code></pre>이용 - 또는 줄 맨 앞에 탭(Tab)이나 4번의 공백이 삽입 되었을 때
- 인라인 코드 (Inline Code): ` 로 감싼 텍스트
```의 경우 특정 언어를 명시해줄 경우 그 언어에 대한 색상이 적용됨
1
2
3
4
5
6
7
8
9
``` C++
#include <iostream>
using namespace std;
int main() {
cout << "Hello, World!" << endl;
return 0;
}
```
#include <iostream>
using namespace std;
int main() {
cout << "Hello, World!" << endl;
return 0;
}
5. 구분선 (Horizontal Rules)
- 아래 아무거나 써도 다 된다.
1
2
3
4
5
***
---
___
- 그러나 글자 사이에 쓸 때는 줄바꿈이 최소 두번 필요하다
1
2
3
글자 밑에 바로 구분선을 두면
---
위에서 본 헤더가 되겠죠?
글자 밑에 바로 구분선을 두면
위에서 본 헤더가 되겠죠?
- 올바른 사용법
1
2
3
4
5
이렇게 써야
---
구분선이 제대로 되겠죠?
이렇게 써야
구분선이 제대로 되겠죠?
6. 링크 (Links)
- 참조 링크
1
2
3
4
5
6
7
8
9
사용문법
[link keyword][id]
[id]: URL "Optional Title here"
사용예
Link: [Google][googlelink]
[googlelink]: https://google.com "Go to Google"
Link: Google
- 인라인 링크
1
2
3
4
5
사용문법
[Title](link)
사용예
[Google](https://google.com)
- URL 링크
1
2
* 외부링크: <https://google.com>
* 이메일: <address@example.com>
- 외부링크: https://google.com
- 이메일: address@example.com
7. 강조 (Emphasis)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
볼드체
*single asterisks*
_single underscores_
이탤릭(기울임)체
**double asterisks**
__double underscores__
둘 다 쓸 수 있음
***triple asterisks***
___triple underscores___
취소선
~~cancelline~~
볼드체
single asterisks
single underscores
이탤릭(기울임)체
double asterisks
double underscores
둘 다 쓸 수 있음
triple asterisks
triple underscores
취소선
cancelline
- 문장 중간에 쓸 때는
_보다는*사용
마크다운 응용 프로그램에서는 단어 중간에 있는 밑줄을 처리하는 방법에 대해 동의하지 않는다고 하니 * 을 주로 사용하고자 함 근데 그냥 언더바 써도 지금은 잘 보임
1
2
3
4
5
6
This is *important*. You know? (o)
This is _important_. You know? (x)
This is **important**. You know? (o)
This is __important__. You know? (x)
This is ***important***. You know? (o)
This is ___important___. You know? (x)
8. 이미지 (Images)
1
2
3
4
5
6
7
8
9
10
11
12
사용문법
<img src:"Image address" width="---px" height="---px">
<img src:"Image address" width="---%" height="---%">
사용예
<img src= "https://drive.google.com/uc?export=view&id=1-6S4m0AHyLF6xtO6zkzdTxQy2Lg5diys" width="300px" height="300px">
<img src= "https://raw.github.com/dcurtis/markdown-mark/master/png/208x128.png" width="20%" height="20%">
○ 참고문서
마크다운(Markdown) 사용법 (github.com)
마크다운(Markdown) 문법 사용법 (eungbean.github.io)
Basic Syntax | Markdown Guide
Chirpy - Writing a New Post
This post is licensed under CC BY 4.0 by the author.