마크다운(MarkDown) 주요 사용법 정리

작성일 | In

마크다운MarkDown이란?

텍스트 문서를 좀 더 보기 편하게 편집하는 문법이라고 생각하면 된다. .md 확장자가 붙은 파일들이 바로 마크다운 언어로 작성된 파일이다. GitHub의 README 파일이나, Git 블로그의 포스트를 작성할 때 사용하려는 목적으로 마크다운 문법을 정리하게 되었다.

마크다운 편집을 지원하는 에디터는 여러가지가 있지만, 나는 VSCode의 확장 프로그램 기능을 사용하기로 했다.

VScode의 마켓 플레이스에서 Markdown All in One 확장 프로그램을 추가하면 된다.

1. 헤더

1
2
3
4
5
6
# 제목 H1
## 제목 H2
### 제목 H3
#### 제목 H4
##### 제목 H5
###### 제목 H6

총 여섯 단계로 타이틀의 크기를 지정할 수 있다. css의 H1~H6을 생각하면 된다.

2. 수평선

1
--- 또는 *** 또는 ___ 등으로, 세 개의 기호를 한 번에 입력하면 된다.

hr 태그에 해당하는 수평선으로, 내용을 구분하고 싶을 때 사용한다.

3. 엔터(개행)

라인의 마지막에 띄어쓰기를 두 번 하면
줄이 바뀐다.
여러 번 줄 바꿈을 하고 싶은 경우 < b r / > 을 사용하면 된다.

4. 강조

1
2
3
4
5
*이탤릭 체는 별표나 언더바를 사용한다(앞뒤로 space 없이)*
**두껍게는 별표 두 번이나 언더바 두 번을 사용한다**
~취소선은 물결 표시를 사용한다~
<u>밑줄은 언더라인 태그를 사용한다</u>

이탤릭 체는 별표(asterisk) or 언더바_ 를 사용한다.
두껍게(bold) 는 별표 두 번 or 언더바 두 번을 사용한다
취소선은 물결 표시(tilde)를 사용한다.
밑줄은 < u > < / u >를 사용한다.

5. 목록

1
2
3
4
5
6
7
8
9
0. 순서가 있는 목록 
1. 하나
2. 둘
3. 셋

+ 순서가 없는 목록
    - 순서가 없는 목록(서브)
    * 순서가 없는 목록에 사용한 기호는
        + 대쉬, 아스타리스크, 더하기가 있다.

서브 목록의 경우 탭(Tab) 두 번을 누르면 된다.

6. 인용구

1
2
> 인용 또는 강조할 내용에 사용한다다.
>> 중복 사용도 가능하다.

인용 또는 강조할 내용에 사용한다.

중복 사용도 가능하다.


7. 링크

1
2
3
4
5
6
7
8
Case 1. 단어를 클릭하면 URL로 연결
[네이버](https://naver.com)

Case 2. URL을 보여주고 자동 연결 
<https://google.com> 또는 https://google.com

Case 3. 동일 파일 내 문단 이동
[마크다운이란?](##-마크다운markdown이란?)

Case 1. 단어를 클릭하면 URL로 연결 네이버

Case 2. URL을 보여주고 자동 연결 https://google.com 또는 https://google.com

Case 3. 동일 파일 내 문단 이동 마크다운이란?

Case 3 문단 이동 시키는 법

  1. 이동 시킬 제목(h1~h6)을 복사해온 후
  2. 제목에 포함된 특수문자를 모두 제거하고
  3. 스페이스가 포함되어 있다면 -(대쉬)로 바꿔준 후
  4. 대문자는 모두 소문자로 변경한다.

8. 이미지

1
2
3
4
5
6
Case 1. 이미지만 삽입
![이미지](https://i.imgur.com/sUtqYGr.jpg)
Case 2. 삽입한 이미지의 사이즈를 조절하고 싶은 경우 html 태그로 처리
<img src="https://i.imgur.com/sUtqYGr.jpg" width="300" height="auto" />
Case 3. 이미지 삽입 후 링크 걸기
[![이미지](https://i.imgur.com/sUtqYGr.jpg)](https://naver.com)

Case 1. 이미지만 삽입 이미지 Case 2. 삽입한 이미지의 사이즈를 조절하고 싶은 경우 html 태그로 처리
Case 3. 이미지 삽입 후 링크 걸기 이미지

9. 코드

1
2
3
4
숫자 1번 키 왼쪽에 있는 ` 를 세 번 입력해서 영역을 지정한다. 
시작하는 영역의 ```옆에 해당 코드가 어떤 언어인지 적어주면 알아보기 쉽게 컬러 표시를 해 준다.
ex) ```css 
텍스트 내에서 인라인 코드를 강조하고 싶을 경우 `강조할 부분`에 이렇게 입력해주면 된다.

인라인 코드는 이런 식으로 강조된다.

1
.style{font-size:16px;}

해당 언어를 표기해 준 경우 위와 같이 컬러 표시가 된다.


10. 테이블

1
2
3
4
| 각 셀은 | 이렇게 | 구분한다 |  
|:--- | :---: | ---: |
| 헤더를 | 분리하고 싶은 경우 | 2번 라인에 ---를 사용한다. |
| 정렬이 | 필요한 경우 | 콜론(:)을 구분선(---) 왼쪽, 오른쪽, 양쪽에 배치한다. |
각 셀은 이렇게 구분합니다
헤더를 분리하고 싶은 경우 2번 라인에 —를 사용한다.
정렬이 필요한 경우 콜론(:)을 구분선(—) 왼쪽, 오른쪽, 양쪽에 배치한다.


Q. 테이블(표) 마크다운이 적용되지 않는데요?
A. 테이블은 위, 아래로 스페이스 2칸을 포함한 개행이 있어야만 랜더링 된다.
스페이스가 잘 들어가 있는지 확인해보자.