📝

Markdown & GFM 서식 치트시트

제목, 텍스트 강조, 표, 태스크리스트, 접기/펼치기 및 GitHub Flavored Markdown 고급 문법

#markdown#gfm#docs#writing#github최종 업데이트: 2026-09-21

Markdown & GFM 서식 치트시트 핵심 명령어 및 실전 가이드

제목, 텍스트 강조, 표, 태스크리스트, 접기/펼치기 및 GitHub Flavored Markdown 고급 문법

## 1. 텍스트 강조 & 인라인 서식
```markdown
**굵은 텍스트** 또는 __굵게__
*기울임(이탤릭)* 또는 _기울임_
~~취소선 텍스트~~
==형광펜 하이라이트== (일부 지원)
`인라인 코드`
```

## 2. 제목 (Headers)
```markdown
# H1 대제목
## H2 중제목 (카드 및 대단락)
### H3 소제목
#### H4 서브 타이틀
```

## 3. 링크 및 이미지 삽입
```markdown
# 텍스트 링크
[구글 공식 사이트](https://google.com "도움말 툴팁")

# 이미지 삽입
![대체 텍스트](https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400 "이미지 설명")

# 클릭 가능한 이미지 링크
[![버튼](image.png)](https://example.com)
```

## 4. 목록과 인터랙티브 체크박스
```markdown
# 순서 없는 글머리 기호
- 첫 번째 항목
  - 하위 들여쓰기 (스페이스 2칸)
* 별표 기호도 동일

# 순서 있는 번호 목록
1. 첫 번째 단계
2. 두 번째 단계

# 태스크 체크리스트 (GFM 지원)
- [x] 프로젝트 기획 완료
- [ ] 메인 디자인 시스템 구축
- [ ] 배포 및 자동화 설정
```

## 5. 정렬 가능한 GFM 테이블 (표)
```markdown
| 기능명 | 지원 여부 | 설명 |
| :--- | :---: | ---: |
| 왼쪽 정렬 | 중앙 정렬 | 오른쪽 정렬 |
| Astro SSG | ✅ | 번개 같은 로딩 |
| Search | ✅ | Cmd+K 전역 검색 |
| 다단 뷰 | ✅ | 2단/3단/4단 지원 |
```

## 6. 인용구 및 알림창 (Alerts)
```markdown
> 일반 인용구 (Quote)
> 여러 줄로 인용할 수 있습니다.

# GitHub 스타일 경고/정보 박스 (GFM Alerts)
> [!NOTE]
> 유용한 배경 설명 및 참고 사항입니다.

> [!TIP]
> 생산성을 올려주는 꿀팁입니다.

> [!WARNING]
> 주의가 필요한 경고 문구입니다.
```

## 7. 접기 / 펼치기 (Details)
```markdown
<details>
<summary>👉 상세 내용 클릭하여 펼치기</summary>

여기에 긴 로그나 부가적인 상세 코드 스니펫을 숨겨둘 수 있습니다.
- 접힌 항목 1
- 접힌 항목 2
</details>
```

## 8. 수학 공식 및 LaTeX 수식 (KaTeX)
- 인라인 수식: 아인슈타인 질량-에너지 등가 방정식은 $E = mc^2$ 입니다.
- 2차 방정식 근의 공식 (블록 수식):
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
- 가우스 적분 공식 (코드 블록 `math` 문법 지원):
```math
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
```
- 시그마 합 공식:
$$
\sum_{k=1}^{n} k = \frac{n(n+1)}{2}, \quad \sum_{k=1}^{n} k^2 = \frac{n(n+1)(2n+1)}{6}
$$

## 9. 순서도 & 시퀀스 다이어그램 (Mermaid)
- 데이터 흐름 순서도 (Flowchart):
```mermaid
graph LR
  A[사용자 요청] --> B{캐시 확인}
  B -- 적중 --> C[0ms 즉시 응답]
  B -- 부재 --> D[비동기 Fetch]
  D --> E[수식·코드 파싱]
  E --> F[인메모리 캐시]
  F --> C
```

- API 호출 시퀀스 다이어그램 (Sequence Diagram):
```mermaid
sequenceDiagram
  autonumber
  actor Dev as 개발자
  participant Web as 웹 브라우저
  participant Engine as 렌더러 엔진
  Dev->>Web: 치트시트 URL 클릭
  Web->>Engine: 마크다운 텍스트 전달
  Engine->>Engine: 수식(KaTeX) & 다이어그램(Mermaid) 파싱
  Engine-->>Web: SVG & 다단 카드 주입
  Web-->>Dev: 화면 표시 완료
```

💬

Markdown & GFM 서식 치트시트

의견 및 질문

댓글 수정

댓글 삭제