Markdown 정복기 (1) — 기본 문법 한 번에 정리
Markdown 시리즈 1편. 헤딩, 강조, 리스트, 링크, 인용 등 어떤 환경에서도 통하는 기본 문법을 한 번에 정리한다.
Series
Markdown 시리즈- 1Markdown 정복기 (1) — 기본 문법 한 번에 정리
- 2Markdown 정복기 (2) — 코드, 표, 이미지
- 3Markdown 정복기 (3) — GFM과 MDX 확장 문법
시리즈 소개
Markdown은 어디서든 쓰인다 — GitHub README, 노션, 블로그, Slack, Discord, 깃허브 이슈, MDX 기반 사이트. 환경마다 미묘하게 다르지만 공통의 기본 문법이 70%를 차지한다. 이 시리즈는 다음 세 편으로 나눈다.
- (1) 기본 문법 — 어디서든 통하는 표준 ← 지금 글
- (2) 코드, 표, 이미지 — 자주 쓰지만 헷갈리는 것들
- (3) GFM과 MDX 확장 문법 — GitHub 확장과 React 컴포넌트 임베딩
헤딩 — #의 개수
# H1 제목
## H2 섹션
### H3 하위
#### H4
##### H5
###### H6규칙은 단순하다 — # 뒤에 공백 한 칸, 그 뒤에 텍스트. H1은 보통 페이지 제목으로 한 번만 쓴다 (블로그라면 frontmatter의 title이 H1 역할을 하므로 본문은 H2부터 시작).
헤딩 레벨은 건너뛰지 않는 게 좋다. ## H2 다음에 #### H4로 가지 말 것. 스크린리더와 자동 TOC가 망가진다.
강조 — Bold, Italic
**굵게**
*기울임*
***둘 다***
~~취소선~~렌더 결과:
- 굵게
- 기울임
- 둘 다
취소선
_언더스코어_도 같은 의미지만 한글에서는 단어 경계 인식이 종종 깨진다. * 별표 사용을 추천한다.
리스트
순서 없는 리스트
- 항목 1
- 항목 2
- 중첩 (스페이스 2~4칸)
- 중첩 2
- 항목 3-, *, + 모두 가능하지만 한 문서 안에서 일관성 유지.
순서 있는 리스트
1. 첫째
2. 둘째
3. 셋째재미있는 사실 — 숫자가 틀려도 자동 보정된다.
1. 첫째
1. 둘째
1. 셋째→ 1, 2, 3으로 렌더된다. 문서를 중간에 편집할 때 번호를 다시 매길 필요가 없다.
체크리스트 (GFM 확장이지만 너무 흔해서 여기 둠)
- [ ] 할 일
- [x] 완료된 일링크
[표시할 텍스트](https://example.com)
[툴팁 있는 링크](https://example.com "마우스 오버 시 표시")
자동 링크: <https://example.com>참조 스타일 — 긴 글에 유용
[Next.js][nextjs]는 [Vercel][vercel]이 만든 React 프레임워크다.
[nextjs]: https://nextjs.org
[vercel]: https://vercel.comURL을 본문 흐름에서 빼낼 수 있어 가독성이 좋다.
인용
> 한 줄 인용
> 여러 줄도 가능하다.
> 그냥 `>` 만 계속 붙이면 된다.
> 중첩 인용도
> > 가능하다.블로그 시스템에 따라 디자인이 다르지만 의미는 같다.
수평선
---세 개 이상의 -, *, _ 모두 OK. 가장 흔한 건 ---.
---은 frontmatter 구분자로도 쓰인다. 파일 첫 줄에 ---만 있으면 frontmatter 시작으로 해석된다는 점에 주의. 본문에서 수평선을 쓸 땐 앞뒤로 빈 줄을 두자.
줄바꿈과 문단
여기가 입문자가 가장 많이 헷갈리는 지점.
이렇게 줄을 바꿔도
같은 문단으로 묶인다.
빈 줄을 한 번 두면
새 문단이 된다.한 줄 안에서 강제 줄바꿈:
줄 끝에 스페이스 두 개
하면 강제 줄바꿈이다.
또는 백슬래시\
를 써도 된다.블로그·GitHub 마크다운에서는 보통 빈 줄로 문단을 나누는 게 가장 안전하다.
인라인 코드
`useState` 같은 단어를 강조할 때 백틱으로 감싼다.→ useState
블록 코드는 다음 편에서 자세히.
이스케이프
특수문자를 그대로 보여주고 싶을 때 백슬래시.
\*별표를 그대로\*
\# 제목 아닌 그냥 #자주 깜빡하는 것 정리
| 헷갈리는 것 | 답 |
|---|---|
| 줄바꿈이 적용 안 돼요 | 빈 줄을 넣거나 줄 끝에 스페이스 두 개 |
| 리스트 안에 코드블록 넣으니 깨져요 | 들여쓰기 4칸 + 빈 줄 |
| 이미지가 너무 커요 | HTML <img>로 대체 또는 MDX 컴포넌트 사용 (다음 편) |
_단어_가 기울임 안 돼요 | *단어*로 (특히 한글 옆에 붙은 경우) |
정리 및 다음 편
여기까지가 어디서든 통하는 CommonMark 표준 기본 문법이다. GitHub, 노션, 블로그, Discord — 다 같다.
다음 편은 자주 쓰지만 자주 깨지는 영역 — 코드 블록(언어 지정, 라인 강조), 표(정렬, 셀 안 줄바꿈), 이미지(캡션, 크기 조절)를 다룬다.