Quick Syntax
- 상위 항목
- 하위 항목
- 하위 항목
1. 단계
1. 세부 단계
2. 세부 단계중첩 목록은 상위 marker 뒤 content column을 기준으로 들여쓰며, tab은 4-column으로 확장되므로 공백과 섞지 않습니다. 목록 안 문단·fenced code도 같은 content 영역에 맞춰 들여쓰고, 깊이가 늘어 읽기 어려워지면 특정 단계 수를 규칙으로 고정하지 말고 제목이나 별도 섹션으로 나눕니다.
문법
CommonMark는 들여쓰기 칸 수를 정밀하게 계산하기 때문에 일관성이 핵심이다
CommonMark 규격에서 bullet 목록의 중첩은 상위 마커 이후 콘텐츠 시작 위치를 기준으로 판단한다. - 이후 텍스트가 시작되는 열이 기준점이므로, 하위 항목은 그 열 이상으로 들여써야 중첩으로 인식된다. 일반적으로 공백 2칸 또는 4칸으로 통일하는 관행이 있지만, 번호 목록에서는 마커 폭이 다르기 때문에 1. 이후 콘텐츠 위치(보통 3칸)를 맞춰야 한다. 탭과 공백을 섞으면 렌더러마다 탭 폭 해석이 달라 의도하지 않은 결과가 나온다.
- 항목 A
- 하위 A1 (공백 2칸)
- 하위 A2
1. 1단계
1. 세부 1-1 (공백 3칸, '1. ' 이후 위치 맞춤)
2. 세부 1-2목록 항목 아래에 코드 블록이나 문단을 넣으려면 들여쓰기가 이어져야 한다
목록 항목과 연결된 코드 블록이나 추가 문단을 같은 항목의 콘텐츠로 인식시키려면, 해당 블록도 목록 콘텐츠 시작 위치만큼 들여써야 한다. 들여쓰기가 부족하면 목록이 끝나고 새 코드 블록이나 문단이 시작된 것으로 파싱되어 목록 구조가 끊어진다. 이 규칙은 특히 단계별 설치 가이드처럼 각 단계 아래 코드 예시가 따라오는 문서에서 자주 틀리는 부분이다.
1. 저장소를 클론합니다.
```bash
git clone https://github.com/example/repo.git-
의존성을 설치합니다.
bashnpm install
### 깊어진 중첩은 제목 분리가 더 읽기 쉬울 수 있다
목록 중첩은 포함 관계를 표현하는 데 적합하지만, 깊어질수록 시각적으로 복잡해지고 들여쓰기 칸 수도 확인하기 어려워진다. 몇 단계부터 나눌지는 문서 길이와 항목 밀도에 따라 달라진다. 상위 항목의 설명보다 하위 목록을 읽는 시간이 길어지면 `###` 소제목으로 분리하거나, 항목을 별도 섹션으로 독립시키는 편이 낫다.
```text
<!-- 너무 깊은 중첩: 읽기 어려움 -->
- 시스템
- 운영체제
- 프로세스
- 스케줄링
- 알고리즘
<!-- 개선: 제목으로 분리 -->
## 시스템 구조
### 운영체제와 프로세스
- 프로세스 스케줄링 알고리즘
- ...탭과 공백 혼용은 들여쓰기 기준을 읽기 어렵게 만든다
CommonMark는 탭을 다음 4-column tab stop까지 확장해 block 구조를 계산한다. 눈에 보이는 공백 폭과 parser의 column 계산이 달라질 수 있고, CommonMark 밖의 renderer는 별도 규칙을 둘 수 있다. 목록 들여쓰기는 공백으로만 처리하고, .editorconfig나 편집기 설정에서 tab을 공백으로 변환하면 source를 읽을 때 혼란을 줄일 수 있다.
실무에서는 "보기에만 맞춘 들여쓰기"가 가장 자주 깨진다. 목록 안 코드 블록, 번호 목록 중첩, 복사된 탭 문자가 한 파일 안에 섞이면 렌더러마다 전혀 다른 구조처럼 보일 수 있다.
선택 기준
| 상황 | 적합한 선택 |
|---|---|
| bullet 목록 중첩 | 공백 2칸 들여쓰기 통일 |
| 번호 목록 중첩 | 1. 이후 위치 기준 (보통 3칸) |
| 목록 항목 아래 코드 블록 | 같은 들여쓰기 수준 유지 |
| 중첩이 길어져 구조를 놓치기 시작할 때 | ### 소제목으로 분리 |
| 탭과 공백 혼용 | 피해야 함, 공백으로 통일 |
| 코드 예시가 포함된 단계 문서 | 목록보다 fence 위치를 먼저 확인 |
주의할 점
탭과 공백을 섞거나 항목마다 들여쓰기 폭이 달라지면 하위 목록이 깨져 보일 수 있습니다. 목록 안 코드 블록은 목록 콘텐츠 시작 위치까지 들여써야 같은 항목으로 인식됩니다. 목록 문서는 정렬 아름다움보다 들여쓰기 일관성이 더 중요합니다.
1. 설치합니다.
```bash
npm install
이 상태는 코드 블록이 1번 단계에 속하지 않고 목록 밖으로 빠질 가능성이 큽니다. 단계 아래 코드 예시는 fence 자체도 같이 들여써야 합니다.참고 링크
2 sources