본문 바로가기
개발

[마크다운] 문법 정리

by 민됴리 2021. 9. 26.

마크다운은 HTML과 같은 마크업 언어로 배우기가 쉽고 관리하기가 쉬워서 많은 곳에서 사용됩니다. 개발자들이 자주 사용하는 깃헙, 주피터 노트북, 스택 오버플로우, 비개발자들도 자주 사용하는 티스토리, 노션에서도 마크다운 문법을 지원합니다.

그러나 마크다운은 표준 문법이 없다는 단점을 가지고 있어서 어떤 곳에서는 작동하는 문법이 어떤 곳에서는 작동하지 않을 수 있습니다. 그래서 이 글에서는 보편적으로 사용 가능한 문법 위주로 서술했습니다.


헤더

제목을 쓰고 싶을 때 사용됩니다. #을 1~6개 쓰고 띄어쓰기를 꼭 한 다음 원하는 글을 적으면 됩니다. #을 적게 쓸수록 글자 크기가 커지며, #을 1개만 쓰면 글자가 자동으로 bold처리 되면서 글 밑에 수평선이 자동으로 추가됩니다. #을 쓰지 않아도 글 바로 밑에 줄에 '=='를 적으면 #을 1개, '--'를 적으면 #을 2개 쓴 것과 같은 효과를 줍니다.

<!-- Heading -->
# Heading level 1
## Heading level 2
### Heading level 3
#### Heading level 4
##### Heading level 5
###### Heading level 6

Heading level 1
===

Heading level 2
---

문단

메모장, 워드 등에서는 엔터를 한 번 치면 새로운 줄에서 글이 시작됩니다. 그러나 마크다운에서는 엔터를 두 번 쳐야 글이 새로운 줄에서 시작된 것처럼 보입니다. 이는 마크다운이 글 사이에 공백인 줄이 있어야 서로 다른 문단이라고 인식하기 때문입니다.

문단을 나누지 않고 엔터 효과를 내려면 글의 마지막에 스페이스 바를 2개 이상 적어준 다음 엔터를 누르면 됩니다.

<!-- Paragraph -->
글을 이렇게 적고 이렇게
엔터를 한 번만 누르면 새로운 줄에서 글이 쓰이지 않습니다

엔터를 두 번 쳐서

이렇게 줄 사이에 공백인 줄이 있어야 엔터 처리가 된 것처럼 보입니다.

글자 스타일

Bold

글자를 굵게 하려면 글자의 양옆을 * 2개로 감싸줍니다. 감싸주면 이렇게 됩니다.

Italic

글자를 기울이고 싶으면 글자의 양옆을 * 1개로 감싸줍니다. 감싸주면 이렇게 됩니다.

Bold와 Italic 동시 적용

글자를 굵게 하면서 기울이고 싶다면 글자의 양옆을 * 3개로 감싸줍니다. 감싸주면 이렇게 됩니다.

Strikethrough

글자에 취소선을 치고 싶다면 글자의 양옆을 2개로 감싸줍니다. ~감싸주면 이렇게 됩니다.~~

<!-- Style -->
**Bold체**
*Italic체*
***Bold, Italcic 동시 적용***
~~취소선~~

인용구

인용하고 싶은 글 앞에 > 를 적어주면 됩니다. 글 앞에 다수의 *를 적어주면 인용구 안에 인용구가 들어간 중첩된 형태가 됩니다.

한 번 인용됨

두 번 인용됨

<!-- Blockquote -->
> 한 번 인용됨
>> 두 번 인용됨

리스트

  • 이렇게
  • 글을 목록화
  • 하고 싶으면

글 앞에 * 또는 - 또는 숫자를 1개 적어줍니다. 어떤 문자를 사용하든 HTML의 <li> 태그로 변환돼서 출력되기 때문에 보이는 형태는 동일합니다. 하지만 앞서 말했듯이 마크다운은 표준 문법이 정립돼있지 않아서 숫자로 목록화하면 출력도 그렇게 나올 수 있습니다.

<!-- List -->
* 별모양을
* 붙여도

- 대시를
- 붙여도

1. 숫자를
2. 붙여도
3. 출력 결과는 
4. 다 같음!

링크

글자를 클릭하면 특정 사이트로 이동하게 만드는 방법은 다음과 같습니다.

<!-- Link -->
[보여지는 글자를 대괄호 안에 적고](괄호 안에 사이트 링크 적기)
[민도리집](http://mindorizip.tistory.com)

이미지 넣기

글에 이미지를 넣는 방법은 링크를 넣는 방법과 비슷합니다. 다른 점은 맨 앞에 !를 추가해주는 것입니다.

<!-- Image -->
![이미지](http://www.woowahan.com/img/mobile/woowabros.jpg)

표를 만들기 위해서는 | 기호로 칸을 나눠 줍니다. 가장 첫 번째 줄은 표의 헤더를 나타내고 두 번째 줄에는 그 밑에 부분들을 어떻게 정렬할지를 나타냅니다. |--|나 |:--|는 왼쪽 정렬, |:--:|는 가운데 정렬, |--:|는 오른쪽 정렬입니다.

<!-- Table -->
|Header|Descrition|
|--:|:--:|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|
|Cell1|Cell2|

수평선

글 한가운데를 가로지르는 수평선을 그리기 위해서는 _를 3개 적어주면 됩니다.

<!-- Line -->
___

인라인 코드 블럭

코드나 글을 인라인 처리하는 방법은 글을 백틱(`)으로 감싸면 됩니다.

예시 1

위와 같이 새로운 줄에 적어도 되고 예시 2처럼 글 한가운데 적어도 됩니다. 백틱은 작은따옴표 같이 보이지만 전혀 다른 문자로, 키보드 왼쪽 상단 ESC키 밑에 주로 있습니다.

<!-- Inline Code Block -->
`예시 1`
다음은 `예시 2`입니다

코드 블럭

여러 줄의 코드나 글을 코 드블럭 안에 넣기 위해서는 코드나 글의 상단과 하단에 백틱 3개씩을 적어주면 됩니다. 상단의 백틱 3개 옆에 C++, C, Python 등 코드 블럭 안에 집어넣을 코드의 언어를 적어주면 언어에 맞게 syntax highlight가 됩니다.

#include <iostream>
using namespace std;
int main(void){
    printf("이것은 예시 코드입니다.");
    return 0;
}
<-- Code Block -->
```C++
#include <iostream>
using namespace std;
int main(void){
    printf("이것은 예시 코드입니다.");
    return 0;
}
``'

이상으로 대체로 공통으로 사용되는 마크다운 문법에 대해 정리해봤습니다.

깃허브 같은 경우에는 조금 변경된 GitHub Flavored Markdown을 사용하는 등 어떤 소프트웨어, 서비스를 이용하는지에 따라 문법이 조금씩 다를 수 있습니다.
따라서 자신이 사용하고자 하는 서비스의 마크다운 문법을 찾아보시는 것을 추천합니다.


참고 문헌