·3분 읽기
마크다운 표·코드 5가지 자주 틀리는 형식 - GitHub·Notion 호환
마크다운 작성 시 자주 틀리는 5가지 형식 실수와 해결법. 표 정렬·코드 블록·링크·이미지·중첩 리스트 GitHub·Notion 모두 호환되는 작성법.
📄
마크다운 미리보기 바로 사용하기
마크다운을 실시간으로 미리보기하세요
→
실수 1 — 표 정렬
**잘못된 예 (정렬 안 됨)**
```
| 이름 | 나이 | 점수 |
| 홍길동 | 30 | 85 |
```
**올바른 예 (구분 라인 필수)**
```
| 이름 | 나이 | 점수 |
|------|------|------|
| 홍길동 | 30 | 85 |
```
**정렬 옵션**
```
| 이름 | 나이 | 점수 |
|:-----|:----:|-----:|
| 홍길동 | 30 | 85 |
```
- `:----` 왼쪽 정렬
- `:---:` 가운데 정렬
- `----:` 오른쪽 정렬
**팁**
- 셀 수와 구분 라인 셀 수 일치 필수
- 셀 안에 `|` 쓸 땐 `\|`로 이스케이프
- 큰 표는 별도 도구 (Tablesgenerator) 활용
실수 2 — 코드 블록 언어 명시
**잘못된 예 (구문 강조 안 됨)**
````
```
function hello() {
console.log('hello');
}
```
````
**올바른 예**
````
```javascript
function hello() {
console.log('hello');
}
```
````
**언어 명시 효과**
- 구문 강조 (Syntax Highlighting)
- 가독성 향상
- GitHub·Notion·VSCode 모두 적용
**자주 쓰는 언어 코드**
- `javascript` 또는 `js`
- `typescript` 또는 `ts`
- `python` 또는 `py`
- `bash` 또는 `sh`
- `html`, `css`, `sql`
- `json`, `yaml`, `xml`
- `diff`, `markdown`
**인라인 코드**
```
`코드` 또는 `<code>`
```
백틱 1개 ↔ 코드 블록 백틱 3개 구분.
실수 3·4 — 링크와 이미지
**실수 3 — 링크 형식**
**잘못된 예**
- `[제목] (https://example.com)` (공백 있음)
- `[제목](example.com)` (https:// 없음)
**올바른 예**
- `[제목](https://example.com)`
- `[Toolkio](https://toolkio.com 'Toolkio 홈')` (툴팁)
- `[참고 링크][ref]` + `[ref]: https://example.com`
**자동 링크**
- `<https://example.com>` (자동 링크 생성)
- `<[email protected]>` (이메일 자동 링크)
**실수 4 — 이미지 형식**
**잘못된 예**
- `(image.png)` (느낌표 없음)
- `` (alt 없음 — SEO·접근성 마이너스)
**올바른 예**
- ``
- ``
- 절대 경로: ``
- 상대 경로: ``
**팁**
- alt 텍스트 필수 (검색엔진·스크린리더)
- 이미지 크기 조정은 마크다운 표준 X → HTML `<img>` 사용 또는 Notion/GitHub 별도 처리
실수 5 + Toolkio 활용
**실수 5 — 중첩 리스트 들여쓰기**
**잘못된 예 (들여쓰기 부족)**
```
- 1단계
- 2단계 (한 칸 들여쓰기)
```
**올바른 예**
```
- 1단계
- 2단계 (2칸 또는 4칸 들여쓰기)
- 3단계 (4칸 또는 8칸)
```
**렌더러별 차이**
- GitHub: 2칸
- Notion: 자동 처리
- VSCode: 4칸
- 안전한 선택: 2칸 통일
**번호 리스트 + 중첩**
```
1. 첫째
2. 둘째
- 하위 항목
- 하위 항목 2
3. 셋째
```
**Toolkio 마크다운 미리보기**
- 작성 즉시 렌더링 확인
- GitHub Flavored Markdown (GFM) 지원
- 표·코드·체크박스·이모지 모두 지원
- 결과물 HTML 변환·복사
**활용 사례**
- README 작성
- Notion·GitHub 문서
- 블로그 초안
- 회의록·정리 문서
**팁**
- 자주 쓰는 형식은 스니펫·템플릿 저장
- 큰 문서는 VSCode + Markdown All in One 확장 추천
- 발행 전 Toolkio 미리보기로 최종 확인