마크다운(Markdown): 개념, 장점 및 주요 문법 요약 정리

마크다운(Markdown): 개념, 장점 및 주요 문법 요약정리

마크다운(Markdown)은 가볍고 간편한 문법으로 텍스트를 서식 있게 작성할 수 있는 표기법입니다. HTML과 비교해 학습이 쉽고 가독성이 높으며, 다양한 플랫폼에서 호환되는 장점을 가지고 있습니다. 이번 글에서는 마크다운의 기본 개념, 장점 및 문법에 대해서 알아보겠습니다.

1. 마크다운(Markdown) 이란

마크다운(Markdown)은 텍스트 기반의 마크업 언어로 간결한 문법을 사용하여 텍스트를 구조화하고 서식을 적용할 수 있습니다. 2004년에 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)에 의해 개발되었습니다. 마크다운의 주요 목적은 웹 상에서 가독성을 높이고 쉽게 글을 작성할 수 있도록 돕는 것입니다. 일반 텍스트로 작성되었지만 HTML로 변환하여 웹페이지에 사용할 수도 있습니다.

2. 마크다운의 장점

마크다운은 아래와 같은 장점으로 꾸준히 널리 사용되고 있는 언어입니다.

  • 간결한 문법: 마크다운의 문법은 간단하고 직관적이어서 빠르게 배울 수 있으며 사용하기 쉽습니다. 특별한 툴 없이도 텍스트 에디터에서 작성할 수 있습니다.
  • 높은 가독성: 마크다운 문서는 서식이 적용되지 않은 상태에서도 읽기 쉽게 구조화되어 있습니다. 따라서 원본 텍스트를 읽거나 편집할 때 가독성이 높습니다.
  • 다양한 플랫폼 호환성: 마크다운 문서는 다양한 플랫폼에서 쉽게 열람할 수 있고 HTML이나 PDF 등 다른 형식으로 변환할 수도 있습니다.
  • 버전 관리 용이: 텍스트 기반으로 작성되기 때문에 Git 같은 버전 관리 시스템과 호환성이 좋습니다. 변경 사항을 추적하고 이전 버전으로 되돌릴 수 있어 협업에도 유용합니다.

마크다운 문법을 직접 미리보기

아래 이미지를 클릭하면 Markdown 미리보기·HTML 변환기로 이동합니다.

Markdown 미리보기와 실시간 HTML 변환기 화면

3. 마크다운 문법

3.1. 헤더(Headers)

마크다운에서 헤더는 텍스트의 제목과 서브 제목을 나타냅니다. ‘#’ 기호를 사용하여 헤더의 크기를 조절할 수 있습니다. ‘#’ 기호의 개수가 적을수록 크기가 큽니다. 1개부터 6개까지 사용할 수 있습니다.

▼ 문법 및 예제

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

3.2. 수평선(Horizontal Rules)

수평선은 문서에서 구분을 위해 사용됩니다. ‘-‘, ‘*’, ‘_’ 중 하나를 3개 이상 연속 사용하여 수평선을 만들 수 있습니다.

▼ 문법 및 예제

---
***
___

3.3. 줄 바꿈(Line Breaks)

줄 바꿈은 문장이 끝나고 다음 줄로 넘어갈 때 사용합니다. 일반적으로 엔터키를 두 번 입력하면 줄 바꿈이 적용되지만 문장의 끝에 스페이스바를 두 번 입력한 후 엔터키를 한 번 입력해도 줄 바꿈이 적용됩니다. 또한 HTML 태그인 <br>을 사용하여 줄 바꿈을 적용할 수도 있습니다.

▼ 문법 및 예제

이것은 첫 번째 문장입니다.  
이것은 두 번째 문장입니다.
    
이것은 새로운 단락입니다.<br>이것은 또 다른 줄입니다.

3.4. 강조(Emphasis)

마크다운에서는 텍스트를 강조하기 위해 볼드체와 이탤릭체를 사용할 수 있습니다. 볼드체는 두 개의 별표(**) 또는 두 개의 언더바(__)로 텍스트를 감싸고, 이탤릭체는 한 개의 별표(*) 또는 한 개의 언더바(_)로 텍스트를 감싸서 사용합니다.

▼ 문법 및 예제

*이것은 이탤릭체입니다.*
_이것도 이탤릭체입니다._
**이것은 볼드체입니다.**
__이것도 볼드체입니다.__

3.5. 인용(Blockquotes)

인용은 ‘>’ 문자로 시작하는 텍스트로 작성합니다. 여러 단계의 인용도 가능하고 각 단계마다 추가로 ‘>’ 문자를 사용합니다.

▼ 문법 및 예제

> 이것은 인용입니다.
>> 이것은 두 번째 단계 인용입니다.
>>> 이것은 다시 첫 번째 단계 인용입니다.

3.6. 목록(Lists)

3.6.1. 순서가 없는 목록(Unordered lists)

순서가 없는 목록은 별표(*), 더하기 기호(+), 빼기 기호(-) 중 하나로 시작하는 텍스트로 작성합니다.

▼ 문법 및 예제

* 항목 1
* 항목 2
* 항목 3

3.6.2. 순서가 있는 목록(Ordered lists)

순서가 있는 목록은 숫자와 마침표(1., 2., 3.)로 시작하는 텍스트로 작성합니다.

▼ 문법 및 예제

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

3.6.3. 혼합 리스트(Mixed lists)

순서가 있는 목록과 순서가 없는 목록을 혼합하여 사용할 수도 있습니다.

▼ 문법 및 예제

1. 첫 번째 항목
2. 두 번째 항목
   * 두 번째 항목의 첫 번째 하위 항목
   * 두 번째 항목의 두 번째 하위 항목
3. 세 번째 항목
   1. 세 번째 항목의 첫 번째 하위 항목
   2. 세 번째 항목의 두 번째 하위 항목

3.7. 백슬래시 이스케이프(Backslash Escapes)

마크다운에서 특수 문자를 일반 문자로 표현하려면 백슬래시”를 사용하여 이스케이프 처리할 수 있습니다. 예를 들어 일반적으로 별표(*)는 리스트 또는 강조를 나타내는데 이를 일반 문자로 표시하려면 백슬래시를 사용합니다.

▼ 문법 및 예제

* 이렇게 하면 별표가 표시됩니다.

3.8. 이미지(Images)

마크다운에서 이미지를 삽입하려면 다음과 같은 구문을 사용합니다.


▶ 문법: ![대체 텍스트](이미지_URL “이미지 제목(선택 사항)”)

▼ 문법 및 예제

![BlueShare 블로그 logo 이미지](https://tistory1.daumcdn.net/tistory/5103346/skin/images/bs_logo.png "Logo 이미지")


☞ 대체 텍스트는 이미지가 렌더링 되지 않을 때 표시되는 텍스트로 접근성을 위해 사용됩니다. 이미지 제목은 이미지에 마우스를 올렸을 때 표시되는 텍스트로 선택 사항입니다. 이미지 URL은 웹상의 이미지 주소 또는 로컬 파일 경로를 사용할 수 있습니다.

3.9. 링크(Links)

3.9.1. 외부 링크(External Links)

외부 링크는 웹페이지 주소를 연결하기 위한 것입니다. 다음과 같은 구문을 사용하여 외부 링크를 만듭니다.

▶ 문법: [링크 텍스트](링크_URL)

▼ 문법 및 예제

[BlueShare 블로그](https://blueshare.tistory.com)

3.9.2. 내부(해시) 링크(Internal/Hash Links)

내부 링크는 같은 문서 내에서 이동하기 위한 것입니다. 대상 항목에 앵커를 추가하고 링크 구문에 앵커 ID를 넣습니다. 앵커를 만들 때는 대상 항목 앞에 앵커 태그(<a id=”앵커_ID”></a>)를 추가합니다.


▼ 문법 및 예제

[목차로 이동](#목차)
    
<a id="목차"></a>목차


☞ [목차로 이동](#목차) 부분이 내부 링크이며 #목차가 앵커 ID입니다. <a id=”목차”></a>는 앵커 태그로 이 태그 앞에 있는 “목차”라는 텍스트를 클릭하면 문서 내에서 “목차”라는 항목으로 이동합니다.

3.10. 코드 블록(Code Blocks)

코드 블록은 코드를 간단하게 표시하거나 여러 줄의 코드를 표시할 때 사용합니다.

1. 인라인 코드 블록: 역따옴표(`)를 사용하여 감싸서 작성합니다.

▼ 문법 및 예제

`print("Hello, World!")`

2. 여러 줄의 코드 블록: 세 개의 역따옴표(“`)로 감싸서 작성합니다.

▼ 문법 및 예제

```python
def greet():
    print("Hello, World!")
    
greet()
```

3.11. 체크 리스트(Checklists)

체크 리스트는 할 일 목록을 표시할 때 사용합니다.


▼ 문법 및 예제

- [x] 운동하기
- [ ] 블로그 글 작성하기

3.12. 테이블(Tables)

테이블은 행과 열로 구성된 데이터를 표시할 때 사용합니다. 테이블을 생성하려면 헤더 행을 작성한 다음 헤더와 본문 사이에 적어도 3개의 하이픈(—)으로 구성된 구분 행을 추가합니다. 이 구분 행은 각 열의 정렬을 설정할 수도 있습니다. 각 열의 셀은 파이프(|)로 구분합니다.

  • 가운데 정렬: 셀 구분자 양쪽에 콜론(:)을 사용합니다. (예: :—:)
  • 왼쪽 정렬: 셀 구분자의 왼쪽에 콜론을 사용합니다. (예: :—)
  • 오른쪽 정렬: 셀 구분자의 오른쪽에 콜론을 사용합니다. (예: —:)


▼ 문법 및 예제

| 이름   | 나이 | 도시     |
|:-----|---:|:------:|
| 철수 | 20 | 서울    |
| 영희 | 22 | 일산    |
| 민수 | 23 | 인천    |

함께 보면 좋은 게시글

이 글이 도움이 되셨다면 공유 부탁 드립니다.

위로 스크롤