MarkdownCo
블로그로 돌아가기
가이드

마크다운 확장 문법: 예제와 함께하는 완벽 가이드

테이블, 코드 블록, 각주, 작업 목록, 이모지 등 마크다운 확장 문법의 모든 요소를 오늘 바로 사용할 수 있는 명확한 예제와 함께 배워보세요.

마크다운 확장 문법: 예제와 함께하는 완벽 가이드

마크다운 기본 문법은 일상적인 대부분의 글쓰기 요구를 충족하지만, 때로는 더 많은 기능이 필요합니다. 확장 문법은 테이블, 각주, 작업 목록 등 강력한 기능을 추가하여 마크다운을 단순한 서식 도구에서 완전한 기능을 갖춘 글쓰기 환경으로 전환합니다.

모든 마크다운 프로세서가 모든 확장 문법 요소를 지원하는 것은 아닙니다. 사용하기 전에 도구나 플랫폼이 필요한 기능을 지원하는지 확인하세요. 좋은 소식은 GitHub, GitLab, VS Code 및 주요 정적 사이트 생성기 등 대부분의 최신 플랫폼이 이러한 확장 기능의 대부분을 지원한다는 것입니다.

기본 문법이 아직 익숙하지 않다면 먼저 마크다운 기본 문법 가이드를 참고하세요.

테이블(Tables)

Markdown Tables

테이블을 사용하면 마크다운에서 직접 데이터를 행과 열로 정리할 수 있습니다. 파이프(|)로 열을 구분하고 하이픈(-)으로 헤더 행을 만듭니다.

| Feature       | Basic Syntax | Extended Syntax |
| ------------- | ------------ | --------------- |
| Tables        | No           | Yes             |
| Footnotes     | No           | Yes             |
| Task Lists    | No           | Yes             |

렌더링 결과:

FeatureBasic SyntaxExtended Syntax
TablesNoYes
FootnotesNoYes
Task ListsNoYes

열 정렬

헤더 구분 행에 콜론을 추가하여 텍스트 정렬을 제어합니다:

| Left Aligned | Center Aligned | Right Aligned |
| :----------- | :------------: | ------------: |
| Text         |     Text       |          Text |
| More         |     More       |          More |
  • :--- 왼쪽 정렬 (기본값)
  • :---: 가운데 정렬
  • ---: 오른쪽 정렬

테이블 팁

  • 소스 코드에서 파이프를 완벽하게 정렬할 필요는 없습니다 — 정렬하면 보기 좋을 뿐입니다
  • 테이블은 굵게, 기울임, 코드, 링크 등의 인라인 서식을 지원합니다
  • 테이블은 셀 내부의 제목, 인용 블록, 목록, 이미지를 지원하지 않습니다
  • 복잡한 데이터의 경우 HTML 테이블 사용을 고려하세요

펜스 코드 블록(Fenced Code Blocks)

Markdown Fenced Code Blocks

기본 문법에서는 들여쓰기 코드 블록을 지원하지만, 펜스 코드 블록이 훨씬 더 실용적입니다. 코드를 트리플 백틱(```) 또는 트리플 틸데(~~~)로 감싸고 구문 강조를 위한 언어를 지정합니다.

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))
```

완전한 구문 강조와 함께 렌더링됩니다:

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))

지원 언어

대부분의 렌더러는 수십 개의 언어 식별자를 지원합니다. 가장 일반적인 것들은 다음과 같습니다:

Language        Identifier
--------------  ----------------
JavaScript      javascript / js
Python          python / py
TypeScript      typescript / ts
HTML            html
CSS             css
JSON            json
Bash            bash / sh
SQL             sql
Markdown        markdown / md

코드 블록 모범 사례

  • 항상 언어를 지정하세요 — 구문 강조가 활성화되어 가독성이 향상됩니다
  • 적용할 언어가 없을 때는 text 또는 plaintext를 사용하세요
  • 펜스 블록은 구문 강조를 지원하고 각 줄을 들여쓸 필요가 없어 들여쓰기 블록보다 권장됩니다

각주(Footnotes)

Markdown Footnotes

각주를 사용하면 본문을 어지럽히지 않고 메모와 참조를 추가할 수 있습니다. 각주 내용은 페이지 하단에 표시됩니다.

Markdown was created by John Gruber in 2004.[^1] It has since become
the standard for technical writing.[^2]

[^1]: John Gruber's original Markdown project is documented on
    [Daring Fireball](https://daringfireball.net/projects/markdown/).
[^2]: Markdown is used by GitHub, Stack Overflow, Reddit, and
    countless other platforms.

참조 번호는 텍스트에서 위첨자 링크로 렌더링되고, 전체 메모는 문서 하단에 나열됩니다.

각주 문법 규칙

  • 각주 참조는 [^identifier]를 사용합니다 — 식별자는 숫자 또는 단어(공백 불가)
  • 각주 정의는 [^identifier]:로 시작하고 그 뒤에 내용을 작성합니다
  • 여러 단락의 각주는 후속 단락에 들여쓰기(스페이스 4개 또는 탭 1개)가 필요합니다
  • 각주 정의는 문서 어디에나 배치할 수 있습니다 — 항상 하단에 렌더링됩니다
Here's a footnote with multiple paragraphs.[^note]

[^note]: This is the first paragraph of the footnote.

    This is the second paragraph, indented with four spaces.

    You can even include code: `console.log("hello")`

제목 ID(Heading IDs)

커스텀 제목 ID를 사용하면 문서의 특정 섹션에 대한 정확한 앵커 링크를 만들 수 있습니다. 제목 텍스트 뒤에 중괄호로 ID를 추가합니다.

### My Custom Section {#custom-section}

생성되는 HTML:

<h3 id="custom-section">My Custom Section</h3>

제목 ID로 링크하기

제목에 ID가 설정되면 직접 링크할 수 있습니다:

Jump to [My Custom Section](#custom-section).

이는 긴 문서 상단에 수동으로 목차를 만들 때 특히 유용합니다:

## Contents

- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [Advanced Usage](#advanced-usage)
- [FAQ](#faq)

호환성 참고

많은 프로세서(GitHub 포함)는 {#id} 문법이 없어도 제목 텍스트에서 자동으로 제목 ID를 생성합니다. 하지만 명시적으로 ID를 설정하면 완전한 제어가 가능하고 플랫폼 간 일관된 동작을 보장합니다.

정의 목록(Definition Lists)

정의 목록은 용어집, FAQ, 용어와 설명을 짝지어야 하는 콘텐츠에 적합합니다.

Markdown
: A lightweight markup language for creating formatted text
  using a plain-text editor.

HTML
: The standard markup language for documents designed to be
  displayed in a web browser.

YAML
: A human-readable data serialization language commonly used
  for configuration files.

생성되는 HTML:

<dl>
  <dt>Markdown</dt>
  <dd>A lightweight markup language for creating formatted text
      using a plain-text editor.</dd>
  <dt>HTML</dt>
  <dd>The standard markup language for documents designed to be
      displayed in a web browser.</dd>
</dl>

여러 정의

하나의 용어에 여러 정의를 가질 수 있습니다:

Markdown
: A lightweight markup language.
: A tool used by developers and writers worldwide.

호환성 참고

정의 목록은 모든 프로세서에서 지원되지 않습니다. GitHub Flavored Markdown은 지원하지 않지만, 많은 정적 사이트 생성기와 문서 도구는 지원합니다.

취소선(Strikethrough)

취소선은 텍스트에 수평선을 그어 삭제되었거나 오래된 내용을 나타냅니다. 이중 틸데(~~)로 텍스트를 감쌉니다.

The project deadline is ~~Friday~~ Monday.
~~Old information~~ has been replaced with updated content.

렌더링 결과:

The project deadline is Friday Monday.

HTML 출력:

<p>The project deadline is <del>Friday</del> Monday.</p>

취소선은 널리 지원됩니다 — GitHub Flavored Markdown(GFM)의 일부이며 대부분의 최신 플랫폼에서 작동합니다.

작업 목록(Task Lists)

Markdown Task Lists

작업 목록(체크박스 또는 할 일 목록이라고도 함)은 대화형 체크리스트를 만듭니다. 미완료 항목에는 - [ ]를, 완료 항목에는 - [x]를 사용합니다.

- [x] Research extended syntax features
- [x] Write first draft
- [x] Add code examples for each section
- [ ] Create cover image
- [ ] Proofread and edit
- [ ] Publish the article

렌더링 결과:

  • Research extended syntax features
  • Write first draft
  • Add code examples for each section
  • Create cover image
  • Proofread and edit
  • Publish the article

작업 목록 활용 사례

작업 목록은 다음 상황에서 특히 인기 있습니다:

  • GitHub 이슈 및 풀 리퀘스트 — 작업 항목의 진행 상황 추적
  • 프로젝트 문서 — 프로세스의 단계 개요
  • 회의 메모 — 액션 아이템과 상태 기록

GitHub 같은 플랫폼에서는 이러한 체크박스가 대화형입니다 — 렌더링된 뷰에서 직접 클릭하여 토글할 수 있습니다.

이모지(Emoji)

마크다운 문서에 이모지를 추가하는 방법은 두 가지입니다.

복사 및 붙여넣기

가장 간단한 방법 — 아무 소스에서 이모지를 복사하여 텍스트에 직접 붙여넣습니다:

That's a great idea! 🎉 Let's ship it! 🚀

이모지는 표준 유니코드 문자이므로 어디서든 작동합니다.

숏코드

일부 플랫폼은 콜론으로 감싼 키워드인 이모지 숏코드를 지원합니다:

:smile: :rocket: :thumbsup: :warning: :heavy_check_mark:

일반적인 숏코드:

Shortcode              Emoji
---------------------  -----
:smile:                😄
:rocket:               🚀
:thumbsup:             👍
:warning:              ⚠️
:heavy_check_mark:     ✔️
:x:                    ❌
:fire:                 🔥
:star:                 ⭐

호환성 참고

이모지 숏코드는 플랫폼마다 다릅니다. GitHub, Slack, Discord는 각각 다른 세트를 지원합니다. 복사 및 붙여넣기 이모지는 보편적으로 작동하며 크로스 플랫폼 문서에 더 안전한 선택입니다.

하이라이트(Highlight)

하이라이트는 색상 배경으로 핵심 단어나 구문에 주의를 끕니다. 이중 등호(==)로 텍스트를 감쌉니다.

This is ==critically important== information.

생성되는 HTML:

<p>This is <mark>critically important</mark> information.</p>

HTML 대체 방법

마크다운 프로세서가 == 문법을 지원하지 않는 경우 HTML <mark> 태그를 직접 사용합니다:

This is <mark>critically important</mark> information.

두 방법 모두 같은 결과를 만듭니다 — 주변 콘텐츠에서 돋보이는 하이라이트된 텍스트입니다.

호환성 참고

==highlight== 문법은 널리 지원되지 않습니다. 일부 프로세서에서는 작동하지만 GitHub Flavored Markdown에서는 사용할 수 없습니다. 호환성이 중요하다면 <mark> HTML 태그를 사용하세요.

아래첨자와 위첨자(Subscript & Superscript)

이 요소들은 과학 표기법, 수학 표현식, 화학식에 필수적입니다.

아래첨자

단일 틸데(~)로 아래첨자 텍스트를 감쌉니다:

The chemical formula for water is H~2~O.
Carbon dioxide is CO~2~.

렌더링 결과: H2O와 CO2.

HTML 등가 표기:

<p>The chemical formula for water is H<sub>2</sub>O.</p>

위첨자

캐럿(^)으로 위첨자 텍스트를 감쌉니다:

The equation is E = mc^2^.
This is the 3^rd^ edition.

렌더링 결과: E = mc2와 3rd 판.

HTML 등가 표기:

<p>The equation is E = mc<sup>2</sup>.</p>

HTML 대체 방법

프로세서가 ~와 ^ 문법을 지원하지 않는 경우 HTML 태그를 직접 사용합니다:

H<sub>2</sub>O is water.
E = mc<sup>2</sup> is Einstein's famous equation.

이 HTML 방법은 거의 모든 마크다운 렌더러에서 작동합니다.

자동 URL 링크(Automatic URL Linking)

대부분의 마크다운 프로세서는 특별한 문법 없이 원시 URL을 클릭 가능한 링크로 자동 변환합니다:

Visit https://example.com for more information.

[text](url) 문법을 사용하지 않아도 클릭 가능한 링크로 렌더링됩니다.

자동 링크 비활성화

때때로 URL을 클릭 가능하게 만들지 않고 일반 텍스트로 표시하고 싶을 때가 있습니다. 백틱으로 감싸서 인라인 코드로 렌더링합니다:

`https://example.com`

이렇게 하면 URL이 클릭 가능한 링크가 아닌 코드로 표시됩니다 — URL 패턴을 설명할 때 유용합니다.

명시적 링크를 사용해야 할 때

자동 링크는 편리하지만 명시적 링크 문법이 더 많은 제어를 제공합니다:

<!-- Automatic: shows raw URL -->
https://example.com

<!-- Explicit: shows custom text -->
[Visit our website](https://example.com)

설명적인 앵커 텍스트가 필요할 때는 명시적 링크를 사용하세요 — 가독성과 SEO 모두에 더 좋습니다.

빠른 참조

Markdown Extended Syntax Quick Reference

모든 확장 문법 요소를 한눈에:

Element              Syntax                     Support
-------------------  -------------------------  --------
Table                | Col | Col |              Wide
Fenced Code Block    ``` code ```               Wide
Footnote             [^1] / [^1]: text          Moderate
Heading ID           ### Heading {#id}          Moderate
Definition List      Term / : Definition        Limited
Strikethrough        ~~text~~                   Wide
Task List            - [x] / - [ ]             Wide
Emoji (shortcode)    :emoji_name:               Varies
Highlight            ==text==                   Limited
Subscript            H~2~O                      Limited
Superscript          X^2^                       Limited
Auto URL Link        https://...                Wide

확장 문법 사용 시작하기

이제 모든 주요 확장 문법 요소를 알게 되었습니다. 다음은 실전에 활용하는 방법입니다:

  1. 플랫폼 확인하기: 사용 중인 마크다운 프로세서가 어떤 기능을 지원하는지 확인하세요. GitHub, VS Code, 대부분의 정적 사이트 생성기는 널리 지원되는 요소를 잘 처리합니다.

  2. HTML 대체 방법 활용하기: 지원이 제한적인 기능(하이라이트, 아래첨자, 위첨자)에는 HTML 태그 대안이 거의 어디서든 작동합니다.

  3. 실제 콘텐츠로 연습하기: 다음 README에 테이블을, 다음 블로그 글에 각주를, 다음 프로젝트 계획에 작업 목록을 추가해 보세요.

  4. 자신 있게 변환하기: 문서를 공유할 준비가 되면 Markdown를 PDF로 변환기로 LaTeX 수식과 테이블이 지원되는 인쇄용 출력을, Markdown를 HTML로 변환기로 웹 게시를, Markdown를 Word로 변환기로 이해관계자 검토용 Word 문서를 생성하세요 — 모든 확장 문법 요소가 포함됩니다.

기본 문법과 이러한 확장 기능을 합치면 완전한 마크다운 도구 키트를 갖추게 됩니다. 마크다운이 완전히 처음이라면 마크다운이란에서 기본을 배워보세요. 문서, 블로그 글, 기술 사양, 프로젝트 계획 — 무엇을 작성하든 마크다운이 해결해 줍니다.

Markdown확장 문법글쓰기생산성