확장명이 .md인 파일이다. 간단한 사용법만 익히면 효과적인 문서를 작성할 수 있다.
최근엔 몇몇 댓글 플러그인 및 Notion, Slack, Trello 등 여러 곳에서 마크다운 문법을 기본 원리로 적용하여 사용할 수 있다. 개인적으론 여러 운영체제에서 깨짐없이, 비슷한은 모양(정확한 스타일링은 설정별로 다름)으로 볼 수 있어서 선호한다.
이 문서는 마크다운 문법을 정리함에 목적이 있다.
사실 이 블로그에서 포스트가 어떻게 보이는지 테스트하고, 스타일링하려 함🔧

마크다운은 기본적으로 html 태그를 바로 삽입할 수 있다. 그렇기 때문에 기본적으로 제공하는 것 외에 다른 기능을 사용하길 원한다면, html 태그를 사용하거나, 클래스 설정 후 스타일링을 하면 된다.

아래 제시한 문법은 비교적 자주 사용하는 문법들이다. 조금 더 다양한 문법은 마크다운 가이드확인.

문단과 줄바꿈 Paragraphs & Line Breaks

마크다운에서 문단 구분과 줄바꿈은 간단하지만, 뻔하진 않다.

문단은 간단히 한 줄 이상 띄면 분리된다. 줄의 수만큼 띄어지는 것은 아니다.

줄바꿈은 바꾸고 싶은 부분에서 <br />태그를 직접 사용하거나, 띄어쓰기 공백 두칸 이상을 문장 마지막에 붙이면 된다.

문단은 <p>, 줄바꿈은 <br>로 변환된다.

.md
첫번째 문단이다. 어쩌구 저쩌구

두번째 문단이다.

문단을 나눈 것이 아닌,<br />줄바꿈은 이렇게 태그를 넣으면 된다.

다른 방법으로는, 줄바꿈하는 줄 끝에(이 부분 드래그→)  
띄어쓰기 공백을 두 칸이상을 넣고 다음 줄을 작성하면 된다.

줄바꿈의 잘못된 예시이다.(이 부분 드래그시 공백 없음→)
이렇게 바로 줄을 바꾸면 구분이 되지 않는다.
문단 & 줄바꿈 결과 보기

첫번째 문단이다. 어쩌구 저쩌구

두번째 문단이다.

문단을 나눈 것이 아닌,
줄바꿈은 이렇게 태그를 넣으면 된다.

다른 방법으로는, 줄바꿈하는 줄 끝에
띄어쓰기 공백을 두 칸이상을 넣고 다음 줄을 작성하면 된다.

줄바꿈의 잘못된 예시이다. 이렇게 바로 줄을 바꾸면 구분이 되지 않는다.

제목 Header

제목을 나타내는 Header로 <h1>부터 <h6>까지 총 6단계가 있다. 숫자가 작을수록 더 중요한 Header인 만큼, 글자 크기도 크고, 단락사이 간격도 더 넓다.
앞에 #을 붙여서 작성하며, #의 개수가 단계이다. 보통 <h1>, <h2>는 밑줄이 있는 경우가 많으며 이 두 단계는 바로 밑에 ===, ---를 작성하는 것으로 대체 가능하다.

.md
# h1단계 제목
## h2단계 제목
### h3단계 제목
#### h4단계 제목
##### h5단계 제목
###### h6단계 제목

또는,
h1단계 제목
===

h2단계 제목
---
제목 결과 보기

h1단계 제목

h2단계 제목

h3단계 제목

h4단계 제목

h5단계 제목
h6단계 제목

h1단계 제목

h2단계 제목

구분선 Horizontal Rules

구분선(수평선)을 넣기 위해선, ---, ***, ___ 처럼 별, 하이픈, 언더바를 세개 이상 사용한다.

별표(*) 구분선
***

언더바(-) 구분선
___

하이픈(-) 구분선

---

하이픈의 경우 앞뒤 공백줄이 없으면, h2로 적용될 수 있으니 주의
---
구분선 결과 보기

별표(*) 구분선


언더바(-) 구분선


하이픈(-) 구분선


하이픈의 경우 공백줄이 없으면, h2로 적용될 수 있으니 주의

코드 Code

코드 블럭은 <pre>, <code>로 변환되며, 백틱(`)으로 표현한다.

문장 도중 사용되는 Inline code는 앞 뒤 `(백틱) 하나씩 사용한다.

새로운 Block으로 사용할 경우, ```(백틱) 3개 이상으로 묶어 사용한다.
앞부분 백틱 3개 뒤에 코드 종류도 적어주는 것이 좋다.

.md
문장 중간에 코드표현이 필요할 경우 백틱 한번으로 표현 가능하다. 같은 단어라도 백틱안에 넣으면 표현되는 것이 다르다. 예를들어 function이라는 단어를 `function`처럼 백틱안에 넣으면 블록으로 하이라이트된다. 문장중간에 코드표현은 백틱 하나로 감싸면 된다.

```javascript
for (let i = 0; i < a.length; i++) {
  console.log(i)
};
```

```html
<div>어쩌구</div>
```
코드 결과 보기

문장 중간에 코드표현이 필요할 경우 백틱 한번으로 표현 가능하다. 같은 단어라도 백틱안에 넣으면 표현되는 것이 다르다. 예를들어 function이라는 단어를 function처럼 백틱안에 넣으면 블록으로 하이라이트된다. 문장중간에 코드표현은 백틱 하나로 감싸면 된다.

for (let i = 0; i < a.length; i++) {
  console.log(i)
};
<div>어쩌구</div>

강조 Emphasis

강조하고 싶은 문구 앞 뒤로 특수문자를 넣어주면 된다.

이텔릭체(기울기)는 *(별표) 혹은 _(언더바) 한 개씩 붙이면 되고, <em>으로 변환된다.
볼드하게(굵게)는 **(별표) 혹은 __(언더바) 두 개씩 붙이면 되고, <strong>으로 변환된다.
추가로, 이탤릭과 볼드를 문장 중간에 사용할땐, _(언더바)보다는, *(별표) 사용을 권장한다.
글자 가운데로 선이 지나가는 취소선은 ~~(물결) 두 개씩 붙이고, <del>로 변환된다.
참고로 밑줄은 지원하지 않는다.

이것들을 같이 사용할 수 있다.
앞 뒤에 특수문자를 넣는다는 규칙을 유지하기만 하면 된다.
예를 들어 볼드 & 이탤릭이라면, **_ 혹은 *__ 식으로 특수문자를 대칭으로 붙이면 된다.
가장 추천하는 방법은 ***를 앞뒤로 붙이는 것이며, 문장 중간 ___는 권장되지 않는다.

.md
*기울기* 혹은 _기울기_  
**굵게** 혹은 **굵게**  
~~취소선~~

**전체적으로 볼드, _부분 이텔릭_**  
~~전체 취소, **부분 볼드**~~  
***전체 볼드 & 이텔릭***  
강조 결과 보기

기울기 혹은 기울기
굵게 혹은 굵게
취소선

전체적으로 볼드, 부분 이텔릭
전체 취소, 부분 볼드
전체 볼드 & 이텔릭

인용구 lockquotes

인용구를 표현하기 위해선 >를 사용한다.
중첩된 인용구은 >>처럼 > 개수로 표현할 수 있다.

.md
> 인용구은 이렇게 앞에다 >표시를 하다.

> 인용구 중첩도 가능하다.
>> 이렇게

> ### 인용구 안에 다른 문법 사용도 가능하다.
>> 윗줄처럼 Header도, **bold**도 가능.
인용구 결과 보기

인용구은 이렇게 앞에다 >표시를 하다.

인용구 중첩도 가능하다.

이렇게

인용구 안에 다른 문법 사용도 가능하다.

윗줄처럼 Header도, bold도 가능.

리스트 List

List의 종류에는 순서가 필요한 list(Ordered list)와 순서가 상관없는 list(Unordered list)가 있다.

순서있는 리스트 Ordered List

순서가 있는 리스트를 나타내며, <ol><li></li></ol>을 의미한다.

리스트 아이템 앞에 숫자를 붙여서 표현한다. 숫자는 1. 2. 3.처럼 순서대로 표시해도 되고, 1. 1. 1. 처럼 모두 한 숫자로 표시해도 된다. 심지어 1. 5. 9.로 뒤죽박죽 이어도 1. 2. 3. 올바르게 표현된다(첫 숫자에 맞춰 커진다).

.md
1.2.3.---

1.1.1.---

1.5.9.
순서있는 리스트 결과 보기


순서없는 리스트 Unordered List

순서가 상관없는 리스트를 나타내며, <ul><li><li></ul>을 의미한다.

리스트 아이템 앞에 -, *, + 특수문자를 붙여 표현한다. 세가지의 특수문자들은 구분없이 사용되며, 들여쓰기에 따라 계층이 구분된다.

.md
- 순서가 필요하지 않은 목록에 사용 가능한 기호
  - 대쉬(hyphen)
  * 별표(asterisks)
  + 더하기(plus sign)

---

* First
* Second

---

+ First
+ Second

---

- Unordered
  - first
  - second
순서없는 리스트 결과 보기


Ordered List와 Unordered List를 섞어서 사용할 수도 있다.

.md
1. 첫번째 순서가 필요한 목록
   - 여긴 필요 없음
   * 여기도 필요 없음

2. 순서가 필요한 목록 세번째
   1. 순서가 필요한 서브목록
       1. 서서브(?) 첫번째
       2. 두번째
           - 순서 없는 목록
           * 순서 없는 목록
           + 당연!

   2. 순서가 필요한 두번째 서브목록
       - 순서 필요 없음
       - 순서 필요 없음
       - 순서 필요 없음

---

- 순서 없는 메인 목록
   1. 여긴 서브목록도 순서가 필요해
   1. 서브목록 속 두번째
- 순서 필요 없음
   - 순서 필요 없는 서브 목록
   - > 인용문 추가도 가능
혼합된(?) 리스트 결과 보기
  1. 첫번째 순서가 필요한 목록

    • 여긴 필요 없음
    • 여기도 필요 없음
  2. 순서가 필요한 목록 세번째

    1. 순서가 필요한 서브목록

      1. 서서브(?) 첫번째
      2. 두번째

        • 순서 없는 목록
        • 순서 없는 목록
        • 당연!
    2. 순서가 필요한 두번째 서브목록

      • 순서 필요 없음
      • 순서 필요 없음
      • 순서 필요 없음

체크박스 Task List

마크다운 가이드에선 Task List라고 표현하고 있는데, 흔히 말하는 체크박스이다.
간단하게 - [ ] 내용으로 사용하며, 체크하고 싶은 경우는 - [x] 완료내용 형태로 사용한다.
리스트 속 <input type="chekcbox">로 변환된다.

.md
- [ ] 미완료
- [x] 완료
- [x] 완료
- [ ] 아직 안 함
체크박스 결과 보기

링크 Link

링크는 [링크명](url주소 "링크설명-생략가능")로 사용하며, 링크명이 <a>로 나타나며, 클릭시 url주소로 연결된다.
링크설명의 경우, 하이퍼링크에 hover시 나타나는 설명이다.
또한 상대적 참조도 가능하다.

참조링크도 가능하다.
참조는 [참조명]: url주소로 표기하고,
링크추가시 [링크명][참조명]으로 사용한다.
참조는 표시되지 않으며, 참조를 통한 링크추가시에도 링크명만 나타난다.

단순하게 주소에 <a>를 걸고 싶다면,
주소를 그대로 입력하면 자동으로 링크되며, <> 안의 url또한 자동으로 링크된다.

.md
[Google](https://google.com)

깃허브 url https://www.github.com

<https://google.com>

[Daum](https://www.daum.net "클릭하면 다음으로 이동")

[상대적 참조](../blog/markdown-syntax)

---

문서 어딘가에서 참조 작성하고

[구글참조]: https://google.com

↑참조는 마크다운 변환시 보이지 않는다.  
구글주소 링크가 필요할때, 가져다가 사용한다.

예시) 프로그래밍을 공부할땐 [구글][구글참조]검색이 필수적이다.
링크 결과 보기

Google

깃허브 url https://www.github.com

https://google.com

Daum

상대적 참조


문서 어딘가에서 참조 작성하고

↑참조는 마크다운 변환시 보이지 않는다.
구글주소 링크가 필요할때, 가져다가 사용한다.

예시) 프로그래밍을 공부할땐 구글검색이 필수적이다.

이미지 Image

이미지는 ![대체텍스트](이미지주소 "이미지설명")형식으로 작성된다. <img alt="대체텍스트" title="이미지설명"> 태그로 변환된다.

역시 참조로 이미지 주소 대체가 가능하며, 이미지 클릭시 링크도 연결할 수 있다.
[![대체텍스트](이미지주소 "이미지설명")](링크url)형식으로 작성하면 된다.

![google-logo](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)

이미지 클릭시 링크 연결
[![notion](https://pbs.twimg.com/profile_images/875782063818809345/cbCR7w5R.jpg "노션홈페이지 연결")](https://notion.so)

파일 어딘가에 참조 작성

[이미지주소]: https://www.universalstudioshollywood.com/tridiondata/ush/en/us/files/images/ush-header-logo-b.png "universal-studios-hollywood"

↑참조는 변환시 보이지 않음.
글 다른 부분에서 사용할 때 긴 주소대신 참조로 가져올 수 있음.
![유니버셜스튜디오][이미지주소]
이미지 결과 보기

google-logo

이미지 클릭시 링크 연결 notion

파일 어딘가에 참조 작성

↑참조는 변환시 보이지 않음. 글 다른 부분에서 사용할 때 긴 주소대신 참조로 가져올 수 있음. 유니버셜스튜디오

표 Table

마크다운에서 표 작성은 간단하다. 각 칼럼의 헤더는 세개 이상의 하이픈---으로 구분되고, 각 칼럼은 파이프|로 구분된다. <table>로 변환된다.

세개 이상의 하이픈이라면 보기 좋게 넓이를 맞춰도 되고, 맞추지 않아도 결과물은 같다.

표 안의 정렬은 콜론:으로 가능하다. 헤더를 구분짓는 하이픈에서 :을 사용하여 정렬한다. 기본값은 좌측정렬이다.

| 기본 | 좌측정렬 | 가운데정렬 | 우측정렬 |
| --- | :----- | :------: |   ---: |
| 내용 | 좌측내용 | 가운데내용 | 우측내용 |
|  | 안맞추고 | 그냥 쫘르르륵 써볼게여 | 과연?? |
| ↑빈칸도 가능 | **와우** | *띠용* | ~~오잉~~ |
표 결과 보기
기본 좌측정렬 가운데정렬 우측정렬
내용 좌측내용 가운데내용 우측내용
넓이 안맞추고 그냥 쫘르르륵 써볼게여 과연??
↑빈칸도 가능 와우 띠용 오잉

마무리

마크다운 문법이 다양하고 간편하다는 것을 알고 있었다. 은근히 쓰던 것들만 계속 쓰게되는 것을 느끼고 있었는데, 이렇게 전체적을 정리하다 보니 명확하게 알게 되었다. 좀 더 다양한 블로그 포스트를 쓸 수 있게 되길...

Reference & Learn More

Markdown Guide

Comments