마크다운 문법 및 사용법
마크다운(MarkDown) 개요
Markdown은 텍스트 기반의 마크업언어로, 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있습니다.
영어로 되어있지만 상세한 마크다운 사용법을 안내하고 있는 사이트 입니다.
Markdown Guide
장단점
장점
- 간결하다.
- 별도의 도구없이 작성가능하다.
- 다양한 형태로 변환이 가능하다.
- 텍스트(Text)로 저장되기 때문에 용량이 적어 보관이 용이하다.
- 텍스트파일이기 때문에 버전관리시스템을 이용하여 변경이력을 관리할 수 있다.
- 지원하는 프로그램과 플랫폼이 다양하다.
단점
- 표준이 없다.
- 표준이 없기 때문에 도구에 따라서 변환방식이나 생성물이 다르다.
- 모든 HTML 마크업을 대신하지 못한다.
문법
헤더Headers
- 큰제목: 문서 제목
This is an H1 =============
This is an H1 =============
- 작은제목: 문서 부제목
This is an H2 -------------
This is an H2 ————-
- 글머리: 1~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
####### This is a H7(지원하지 않음)
BlockQuote
이메일에서 사용하는 >
블럭인용문자를 이용한다.
> 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.
이 안에서는 다른 마크다운 요소를 포함할 수 있다.
This is a H3
- List
code
목록
● 순서있는 목록(번호)
순서있는 목록은 숫자와 점을 사용한다.
1. 첫번째
2. 두번째
3. 세번째
- 첫번째
- 두번째
- 세번째
현재까지는 어떤 번호를 입력해도 순서는 내림차순으로 정의된다.
1. 첫번째
3. 세번째
2. 두번째
- 첫번째
- 세번째
- 두번째
딱히 개선될 것 같지는 않다. 존 그루버가 신경안쓰고 있다고…
● 순서없는 목록(글머리 기호: *
, +
, -
지원)
* 골댕이
* 애교
* 귀여움
+ 골댕이
+ 애교
+ 귀여움
- 골댕이
- 애교
- 귀여움
- 골댕이
- 애교
- 귀여움
- 애교
- 골댕이
- 애교
- 귀여움
- 애교
- 골댕이
- 애교
- 귀여움
- 애교
혼합해서 사용하는 것도 가능합니다.
* 골댕이 1마리
- 골댕이 2마리
+ 골댕이 3마리
+ 골댕이 4마리
- 골댕이 1마리
- 골댕이 2마리
- 골댕이 3마리
- 골댕이 4마리
- 골댕이 3마리
- 골댕이 2마리
코드
4개의 공백 또는 하나의 탭으로 들여쓰기를 만나면 변환되기 시작하여 들여쓰지 않은 행을 만날때까지 변환이 계속된다.
들여쓰기
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. *****
한줄 띄어쓰지 않으면 인식이 제대로 안되는 문제가 발생합니다.
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. *****
코드블럭
코드블럭은 다음과 같이 2가지 방식을 사용할 수 있습니다:
<pre><code>{code}</code></pre>
이용방식
<pre>
<code>
public class BootSpringBootApplication {
public static void main(String[] args) {
System.out.println("Hello, Honeymon");
}
}
</code>
</pre>
public class BootSpringBootApplication {
public static void main(String[] args) {
System.out.println("Hello, Honeymon");
}
}
- 코드블럭코드(“```”) 을 이용하는 방법
```
public class BootSpringBootApplication {
public static void main(String[] args) {
System.out.println("Hello, Honeymon");
}
}
```
public class BootSpringBootApplication {
public static void main(String[] args) {
System.out.println("Hello, Honeymon");
}
}
GitHub에서는 코드블럭코드(“```”) 시작점에 사용하는 언어를 선언하여 문법강조(Syntax highlighting)이 가능하다.
```c++
#include
#include
#include
int main() {
std::vector numbers = {5, 2, 8, 1, 9, 4};
// 정렬
std::sort(numbers.begin(), numbers.end());
// 출력
for (int num : numbers) { // 범위 기반 for 루프
std::cout << num << " ";
}
std::cout << std::endl;
// 특정 값 찾기
auto it = std::find(numbers.begin(), numbers.end(), 8);
if (it != numbers.end()) {
std::cout << "Found 8 at index: " << std::distance(numbers.begin(), it) << std::endl;
}
return 0;
}
```
</code>
</pre>
```c++
#include
#include
#include
int main() {
std::vector numbers = {5, 2, 8, 1, 9, 4};
// 정렬
std::sort(numbers.begin(), numbers.end());
// 출력
for (int num : numbers) { // 범위 기반 for 루프
std::cout << num << " ";
}
std::cout << std::endl;
// 특정 값 찾기
auto it = std::find(numbers.begin(), numbers.end(), 8);
if (it != numbers.end()) {
std::cout << "Found 8 at index: " << std::distance(numbers.begin(), it) << std::endl;
}
return 0;
}
```
### 수평선 ```
```
아래 줄은 모두 수평선을 만든다. 마크다운 문서를 미리보기로 출력할 때 *페이지 나누기* 용도로 많이 사용한다.
```
* * *
***
*****
- - -
---------------------------------------
```
* 적용예
* * *
***
*****
- - -
---------------------------------------
### 링크
* 참조링크
```
[link keyword][id]
[id]: URL "Optional Title here"
// code
Link: [Google][googlelink]
[googlelink]: https://google.com "Go google"
```
Link: [Google][googlelink]
[googlelink]: https://google.com "Go google"
* 외부링크
```
사용문법: [Title](link)
적용예: [Google](https://google.com, "google link")
```
Link: [Google](https://google.com, "google link")
* 자동연결
```
일반적인 URL 혹은 이메일주소인 경우 적절한 형식으로 링크를 형성한다.
* 외부링크: <http://example.com/>
* 이메일링크: <address@example.com>
```
* 외부링크: <http://example.com/>
* 이메일링크: <address@example.com>
### 강조
```
*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
~~cancelline~~
```
* *single asterisks*
* _single underscores_
* **double asterisks**
* __double underscores__
* ~~cancelline~~
> ```문장 중간에 사용할 경우에는 **띄어쓰기** 를 사용하는 것이 좋다.```
> 문장 중간에 사용할 경우에는 띄어쓰기를 사용하는 것이 좋다.
### 이미지
```


```
사이즈 조절 기능은 없기 때문에 ```
</img>```를 이용한다.
예
```
</img>
</img>
```
### 줄바꿈
3칸 이상 띄어쓰기(` `)를 하면 줄이 바뀐다.
```
* 줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다.
이렇게
* 줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다.___\\ 띄어쓰기
이렇게
```
* 줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다. 이렇게
* 줄 바꿈을 하기 위해서는 문장 마지막에서 3칸이상을 띄어쓰기해야 한다. \
이렇게
[Top](#){: .btn .btn--primary }{: .align-right}