이것은 북마크하고 다시 돌아올 수 있는 Markdown 구문 참조입니다. 실제 예제로 다루는 모든 요소 — 제목, 강조, 링크, 이미지, 목록, 코드 블록, 표, 인용구 등. 기능이 표준 CommonMark의 일부인 경우 표시됩니다; GitHub Flavored Markdown (GFM)의 확장은 명시적으로 표시되어 있어 무엇이 보편적으로 지원되고 무엇이 렌더러에 따라 달라지는지 알 수 있습니다.
제목
Markdown에는 두 가지 제목 스타일이 있습니다. ATX 스타일은 해시 문자를 사용합니다 — h1에는 하나의 #부터 h6에는 여섯 개의 ######까지. Setext 스타일은 = 또는 - 문자의 밑줄을 사용하며 h1과 h2만 지원합니다. ATX 스타일이 어디서나 사용해야 하는 스타일입니다 — 명시적이고, 모든 6단계로 확장되며, 모든 도구가 지원합니다. 한 가지 일반적인 실수: # 뒤에 공백을 잊는 것. 엄밀히 말하면, CommonMark에서 #제목은 제목이 아닙니다 — 공백이 필요합니다.
# Page Title (h1)
## Section Heading (h2)
### Subsection (h3)
#### Detail Level (h4)
##### Minor Heading (h5)
###### Smallest Heading (h6)
---
<!-- Setext style — only h1 and h2, rarely used -->
Page Title
==========
Section Heading
---------------실제 문서에서는 일반적으로 맨 위에 하나의 h1(문서 제목), 주요 섹션에 h2, 그 내의 하위 섹션에 h3를 사용합니다. h3보다 더 깊어지는 것은 또 다른 중첩 단계보다 문서를 재구성해야 한다는 신호입니다.
텍스트 서식
굵게는 이중 별표 또는 이중 밑줄을 사용합니다. 기울임꼴은 단일 별표 또는 단일 밑줄을 사용합니다. 굵은 기울임꼴은 셋 중 하나를 세 개 조합합니다. 취소선은 GFM 확장이며 이중 물결표를 사용합니다. 인라인 코드는 백틱을 사용합니다.
**Bold text** or __Bold text__
*Italic text* or _Italic text_
***Bold and italic*** or ___Bold and italic___
~~Strikethrough~~ (GFM only)
`inline code`*와 _ 변형은 대부분 서로 바꿔 쓸 수 있지만, 한 가지 엣지 케이스에서 다릅니다: 단어 중간의 강조. 별표는 단어 중간에 작동하지만(un*believe*able은 unbelieveable로 렌더링됩니다), 밑줄은 그렇지 않습니다 — CommonMark에서 단어 내의 밑줄은 강조 마커가 아닌 단어 문자로 처리되기 때문에 un_believe_able은 그대로 렌더링됩니다. 이것은 식별자에 밑줄이 나타나는 기술 문서에서 중요합니다. 원칙적으로: 강조에는 *를 사용하고 강한 스타일 선호도가 있는 경우에만 _를 예약하세요. 동일한 강조 범위 내에서 *와 _를 혼용하지 마세요 — *텍스트_는 올바르게 닫히지 않습니다.
링크와 이미지
세 가지 링크 스타일이 있습니다: 인라인 링크, 참조 링크, 자동 링크. 이미지는 인라인 링크와 같은 구문을 따르지만 ! 접두사가 있습니다.
<!-- Inline link: [text](url) or [text](url "title") -->
Read the [CommonMark spec](https://spec.commonmark.org/current/ "CommonMark Specification")
Format Markdown with the [Markdown Formatter](/markdown-formatter)
<!-- Reference link: define the URL separately — cleaner in long documents -->
Check the [GFM spec][gfm] for GitHub-specific extensions.
[gfm]: https://github.github.com/gfm/
<!-- Autolink: angle brackets make a URL or email clickable -->
<https://commonmark.org>
<[email protected]>
<!-- Image: same as inline link but with ! prefix -->

width나 height 속성이 없습니다.  구문은 크기 없는 일반 <img> 태그에 매핑됩니다. 이미지 크기를 제어해야 한다면 원시 HTML로 내려와야 합니다: <img src="url" alt="text" width="400">. 이것은 알려진 제한 사항입니다 — Markdown 가이드가 해결 방법을 다룹니다.목록
순서 없는 목록은 -, *, 또는 +를 불릿 마커로 사용합니다. 순서 있는 목록은 마침표가 뒤따르는 숫자를 사용합니다. 두 개 또는 네 개의 공백으로 들여쓰기하여 목록을 중첩합니다. 작업 목록(GFM)은 체크되지 않은 항목에는 [ ]를, 체크된 항목에는 [x]를 사용합니다.
<!-- Unordered list -->
- Install dependencies
- Configure environment variables
- Run the dev server
<!-- Ordered list -->
1. Clone the repository
2. Run `npm install`
3. Copy `.env.example` to `.env` and fill in values
4. Run `npm run dev`
<!-- Nested list (indent 2 or 4 spaces) -->
- Backend
- Set up PostgreSQL
- Configure connection string
- Frontend
- Install Tailwind
- Configure PostCSS
<!-- Task list (GFM) — great for README checklists -->
## Release Checklist
- [x] Unit tests passing
- [x] End-to-end tests passing
- [ ] Changelog updated
- [ ] Docker image tagged
- [ ] Deployment approved코드 — 인라인 및 펜스
인라인 코드는 각 면에 단일 백틱을 사용합니다. 블록의 경우, 삼중 백틱(펜스 코드 블록)을 사용하고 선택적으로 여는 펜스 바로 뒤에 언어 식별자를 지정합니다 — 이것은 GitHub, VS Code 미리보기, 대부분의 정적 사이트 생성기에서 구문 강조 표시를 가능하게 합니다. 들여쓰기 코드 블록(4개의 공백 들여쓰기)도 사용할 수 있지만, 펜스 블록을 선호하세요: 언어 힌트를 지원하고, 명시적이며, 주변 콘텐츠에도 들여쓰기가 있을 때 작동합니다.
<!-- Inline code -->
Use the `fetch()` API to make HTTP requests.
Set the `Content-Type` header to `application/json`.
<!-- Fenced code block with language hint -->
```python
import json
with open("config.json") as f:
config = json.load(f)
print(config["database"]["host"])
```
```typescript
interface ApiResponse<T> {
data: T;
status: number;
message: string;
}
async function fetchUser(id: string): Promise<ApiResponse<User>> {
const res = await fetch(`/api/users/${id}`);
return res.json();
}
```
```bash
# Install dependencies and start the dev server
npm install
npm run dev
```
```json
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build"
}
}
```
```yaml
name: CI
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci && npm test
```일반적인 언어 식별자: python, js 또는 javascript, ts 또는 typescript, bash 또는 sh, json, yaml, html, css, sql, go, rust, java. Markdown 미리보기 도구를 사용하여 Markdown이 어떻게 렌더링되는지 미리 확인하세요.
표 (GFM)
표는 GitHub Flavored Markdown 확장입니다 — CommonMark 표준의 일부가 아닙니다. GitHub, GitLab, 대부분의 정적 사이트 생성기, VS Code에서 작동하지만 모든 Markdown 프로세서에서는 그렇지 않습니다. 구문은 파이프 문자로 열을 구분하고 헤더를 표시하는 대시 구분 행을 사용합니다. 구분 행의 콜론이 열 정렬을 제어합니다.
| Feature | CommonMark | GFM |
| -------------------- | :--------: | :-------: |
| Headings | ✅ | ✅ |
| Bold / Italic | ✅ | ✅ |
| Fenced code blocks | ✅ | ✅ |
| Tables | ❌ | ✅ |
| Task lists | ❌ | ✅ |
| Strikethrough | ❌ | ✅ |
| Autolinks | ✅ | ✅ (ext.) |열 정렬은 구분 행에서 설정됩니다. :---은 왼쪽 정렬(기본값)입니다. ---:은 오른쪽 정렬입니다. :---:은 가운데 정렬입니다. 소스에서 시각적으로 열을 맞추기 위해 공백으로 패딩할 필요가 없습니다 — 이것은 렌더링된 출력에 영향을 미치지 않는 미적인 것입니다. 각 행의 시작과 끝의 파이프는 기술적으로 GFM에서 선택 사항이지만 포함하는 것이 더 명확한 스타일입니다.
인용구
인용구는 각 줄에 >를 접두사로 붙입니다. 중첩 인용구는 >>를 사용합니다. 인용구 내에 다른 Markdown 요소 — 제목, 목록, 코드 블록 — 을 포함할 수 있으며, 이것이 문서의 콜아웃 박스에 유용하게 만듭니다.
> **Note:** As of Node.js 18, the `fetch` API is available globally
> without importing anything. No more `node-fetch` dependency.
> This is a quote that spans
> multiple lines.
>
> And has a second paragraph.
> Outer quote.
>
> > Nested quote — useful for "quoting a quote" in changelogs
> > or spec discussions.
<!-- Blockquote containing a code block — useful for quoting error messages -->
> The migration failed with:
>
> ```
> ERROR: relation "users" already exists
> ```수평선, 줄 바꿈, 이스케이프
이 세 가지 기능은 규칙을 알기 전까지 버그처럼 보이기 때문에 사람들을 혼란스럽게 합니다. 수평선, 하드 줄 바꿈, 백슬래시 이스케이프는 모두 명확하지 않은 특정 구문을 가지고 있습니다.
<!-- Horizontal rules: three or more of ---, ***, or ___ on their own line -->
---
***
___
<!-- All three render as <hr>. Most common style is --- -->
<!-- Hard line breaks: end a line with two trailing spaces, or use backslash -->
First line with two trailing spaces
Second line (rendered as a new line, not a new paragraph)
First line with backslash\
Second line (same result)
<!-- A single newline in Markdown source is NOT a line break — it's a space.
Two newlines = a paragraph break. -->
<!-- Backslash escaping: put before any Markdown character to render it literally -->
*This is not italic*
# This is not a heading
[Not a link](not-a-url)
`Not inline code`
<!-- Characters that can be escaped -->
\ ` * _ { } [ ] ( ) # + - . !\) 방식이 편집기나 CI 파이프라인이 후행 공백을 제거하는 경우 더 강력합니다. 또는 하드 줄 바꿈이 덜 필요하도록 콘텐츠를 재구성하세요 — 문서가 아닌 시나 주소에서 가장 자주 필요합니다.Markdown의 HTML
대부분의 Markdown 프로세서는 원시 HTML을 변경 없이 통과시키며, 이것은 순수 Markdown 구문으로 표현할 수 없는 몇 가지 유용한 패턴을 열어줍니다. GitHub README에서 가장 일반적인 사용 사례는 <details>/<summary> 접을 수 있는 섹션입니다. 다른 유용한 것들: 키보드 단축키를 위한 <kbd>, 정확한 앵커 링크를 위한 제목의 사용자 정의 id 속성.
<!-- Collapsible section — very common in GitHub READMEs -->
<details>
<summary>Click to expand: Advanced configuration options</summary>
You can override the defaults by creating a `config.local.json` file
in the project root. Supported keys:
| Key | Default | Description |
| ---------- | ------- | ----------------------- |
| `port` | 3000 | Dev server port |
| `logLevel` | `info` | One of debug/info/warn |
</details>
<!-- Keyboard shortcuts -->
Press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> to open the command palette.
<!-- Custom heading ID for anchor links -->
<h2 id="configuration-reference">Configuration Reference</h2>
<!-- Link to that heading from anywhere -->
See the [Configuration Reference](#configuration-reference).한 가지 중요한 주의 사항: <details> 블록은 해당 본문 콘텐츠에 Markdown이 포함된 경우 </summary> 닫는 태그와 본문 콘텐츠 사이에 빈 줄이 필요합니다. 빈 줄 없이는 내부의 Markdown이 파싱되지 않습니다 — 원시 텍스트로 렌더링됩니다. Markdown 포맷터 도구로 Markdown 파일을 정리하고 서식 지정할 수 있습니다.
마무리
이것으로 전체 구문을 다뤘습니다 — 표준 CommonMark와 개발자들이 매일 사용하는 GFM 확장. 엣지 케이스에 대한 권위 있는 말은 CommonMark 명세와 GFM 명세가 참조 덤프가 아닌 읽기 쉬운 문서입니다. CommonMark 빠른 참조는 편리한 단일 페이지 요약입니다. Markdown 가이드 기본 구문과 확장 구문 페이지도 예제와 함께 더 많은 산문 설명을 원한다면 잘 정리되어 있습니다. Markdown이 어떻게 보일지 커밋하기 전에 정확히 확인해야 할 때, Markdown 미리보기 도구가 브라우저에서 실시간으로 렌더링합니다. 문서 전체에서 일관성 없는 서식을 정리하려면, Markdown 포맷터가 제목 스타일, 목록 마커, 간격을 정규화합니다. 그리고 Markdown 출력에서 깔끔한 HTML을 생성하려면, HTML 포맷터가 Markdown 프로세서가 내보내는 것을 보기 좋게 만들어 줍니다.