마크다운 사용법 및 예제: 기본 문법부터 HTML 변환까지 | WxNovic

마크다운(Markdown) 언어란?

**마크다운(Markdown)**은 2004년 존 그루버(John Gruber)에 의해 개발된 경량 마크업 언어입니다. 이 언어는 단순한 텍스트 기반의 문법을 사용하여 HTML로 쉽게 변환할 수 있으며, 가독성과 작성 편의성이 뛰어납니다.

마크다운의 주요 특징

가독성이 뛰어남: 일반 텍스트로 작성되어 쉽게 읽고 이해할 수 있습니다.
HTML 변환 가능: 별도의 편집 도구 없이도 HTML 문서로 변환할 수 있습니다.
간단한 문법: 특수문자와 기호를 활용하여 콘텐츠를 빠르게 작성할 수 있습니다.
다양한 플랫폼 지원: GitHub, Notion, 블로그, 위키 문서 등 여러 환경에서 활용됩니다.
경량성: 복잡한 서식 없이도 빠르게 문서를 작성하고 공유할 수 있습니다.

마크다운의 필요성

마크다운을 사용하지 않는다면 HTML을 직접 작성해야 하는데, 이는 유지보수와 작성의 불편함을 초래할 수 있습니다.

HTML로 작성했을 때:

<h2>마크다운 언어란?</h2>
<ul>
  <li>2004년 존 그루버에 의해 개발됨</li>
  <li>쉽고 직관적인 문법</li>
  <li>HTML로 변환 가능</li>
</ul>

마크다운으로 작성했을 때:

## 마크다운 언어란?

- 2004년 존 그루버에 의해 개발됨
- 쉽고 직관적인 문법
- HTML로 변환 가능

위와 같이 마크다운을 사용하면 더욱 간결하고 가독성이 뛰어난 문서를 작성할 수 있습니다.

마크다운 문법 정리

1. 제목(Header)

제목을 만들 때 # 기호를 사용합니다.

# 제목 1

## 제목 2

### 제목 3

#### 제목 4

##### 제목 5

###### 제목 6

HTML 변환 결과:

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>

2. 문단(Paragraph)과 줄바꿈(Line Break)

문단을 구분하려면 한 줄을 띄우면 됩니다. 줄바꿈을 원할 경우 스페이스 두 개를 추가합니다.

이것은 첫 번째 문단입니다.  
이것은 다음 줄입니다.

HTML 변환 결과:

<p>이것은 첫 번째 문단입니다.</p>
<p>이것은 다음 줄입니다.</p>

줄바꿈(스페이스 두 개) 예시:

이것은 한 줄입니다.  
이것은 다음 줄입니다.

HTML 변환 결과:

<p>
  이것은 한 줄입니다.<br />
  이것은 다음 줄입니다.
</p>

3. 텍스트 서식(Formatting)

3.1. 굵게(Bold)

**이 텍스트는 굵게 표시됩니다.**

HTML 변환 결과:

<p><strong>이 텍스트는 굵게 표시됩니다.</strong></p>

3.2. 기울임(Italic)

_이 텍스트는 기울여집니다._

HTML 변환 결과:

<p><em>이 텍스트는 기울여집니다.</em></p>

3.3. 취소선(Strikethrough)

~~이 텍스트는 취소선이 적용됩니다.~~

HTML 변환 결과:

<p><del>이 텍스트는 취소선이 적용됩니다.</del></p>

3.4. 강조(Highlight)

==이 텍스트는 강조됩니다.==

HTML 변환 결과:

<p><mark>이 텍스트는 강조됩니다.</mark></p>

4. 목록(List)

4.1. 순서 없는 목록(Unordered List)

- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목

HTML 변환 결과:

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ul>

4.2. 순서 있는 목록(Ordered List)

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

HTML 변환 결과:

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

5. 코드(Code)

5.1. 인라인 코드(Inline Code)

이것은 `인라인 코드` 입니다.

HTML 변환 결과:

<p>이것은 <code>인라인 코드</code> 입니다.</p>

5.2. 코드 블록(Code Block)

```python
print("Hello, World!")
```

HTML 변환 결과 (예시):

<pre><code class="language-python">
print("Hello, World!")
</code></pre>

6. 링크와 이미지

6.1. 링크(Link)

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

HTML 변환 결과:

<a href="https://www.google.com">Google</a>

6.2. 이미지 삽입(Image)

![Alt 텍스트](이미지 URL)

HTML 변환 결과:

<img src="이미지 URL" alt="Alt 텍스트" />

7. 표(Table)

| 제목1   | 제목2   | 제목3   |
| ------- | ------- | ------- |
| 데이터1 | 데이터2 | 데이터3 |

HTML 변환 결과:

<table>
  <tr>
    <th>제목1</th>
    <th>제목2</th>
    <th>제목3</th>
  </tr>
  <tr>
    <td>데이터1</td>
    <td>데이터2</td>
    <td>데이터3</td>
  </tr>
</table>

8. 체크리스트(Todo List)

- [x] 완료된 작업
- [ ] 진행 중인 작업

HTML 변환 결과:

<ul>
  <li><input type="checkbox" checked disabled /> 완료된 작업</li>
  <li><input type="checkbox" disabled /> 진행 중인 작업</li>
</ul>

마크다운 활용 사례

마크다운은 기술 문서 작성, 블로그 포스트 작성, 프로젝트 문서화, GitHub README.md 작성 등 다양한 용도로 활용됩니다.

대표적인 사용 사례

GitHub: README.md 파일 작성 및 프로젝트 문서 정리
블로그: 정적 사이트 생성기(Jekyll, Hugo 등)에서 콘텐츠 작성
문서 작성: Notion, Obsidian과 같은 노트 애플리케이션에서 활용
개발 문서: API 문서, 코드 설명서 작성

결론

마크다운은 가볍고 직관적인 문법을 제공하여 빠르고 효과적인 문서 작성을 가능하게 합니다. 특히, 다양한 플랫폼에서 지원되므로 문서화 작업을 더욱 편리하게 수행할 수 있습니다.

마크다운을 익히고 활용하여 더욱 효율적인 문서 작성을 경험해 보세요! 🚀