본문 바로가기

Markdown 제목 구조 뷰어

브라우저 처리

Markdown 문서의 제목을 단계별로 들여써 보여 주고, 각 제목의 줄 번호와 GitHub 방식 앵커(#설치-방법)를 함께 표시합니다.

사용 전 확인
  • 파일·이미지·문서 처리 도구는 브라우저 안에서 처리되더라도 원본에 개인정보나 민감 정보가 포함될 수 있습니다. 공유·제출 전 원본과 결과를 한 번 더 확인하세요.
도구 실행입력 후 결과 확인
Markdown 제목 구조 뷰어 샘플 실행

수십 쪽짜리 README나 가이드는 스크롤만으로 구조를 파악하기 어렵습니다. 이 뷰어는 문서의 # 제목만 뽑아 단계별로 들여써 보여 주므로, 장과 절이 어떻게 짜여 있는지 한눈에 볼 수 있습니다.

브라우저 처리
샘플 결과
H1 1행 · 사용 안내 · #사용-안내
  H2 2행 · 설치 방법 · #설치-방법
    H3 6행 · Windows · #windows
  H2 7행 · 자주 묻는 질문 (FAQ) · #자주-묻는-질문-faq
자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.

Markdown 제목 구조 뷰어 사용 가이드

수십 쪽짜리 README나 가이드는 스크롤만으로 구조를 파악하기 어렵습니다. 이 뷰어는 문서의 # 제목만 뽑아 단계별로 들여써 보여 주므로, 장과 절이 어떻게 짜여 있는지 한눈에 볼 수 있습니다.

각 줄에는 'H2 7행 · 설치 방법 · #설치-방법'처럼 제목 단계, 원문 줄 번호, 제목 글자, 링크에 쓸 앵커가 나옵니다. 줄 번호로 편집기에서 바로 찾아가고, 앵커는 문서 안 링크를 만들 때 그대로 씁니다.

코드 블록(``` 또는 ~~~) 안의 # 주석 줄은 제목으로 세지 않고, '### 제목 ###'처럼 끝에 붙인 #은 떼고 보여 줍니다.

사용 방법

  1. '.md·.txt 파일'에서 구조를 볼 문서를 고르거나 'Markdown 내용'에 문서를 통째로 붙여 넣습니다.
  2. '실행'을 누르면 제목 단계만큼 들여쓴 구조 목록이 나옵니다.
  3. 들여쓰기가 들쭉날쭉한 곳이 있으면 줄 번호를 보고 원문의 제목 단계를 고칩니다.

예시: 코드 블록이 섞인 안내 문서

입력
# 사용 안내
## 설치 방법
```bash
# 주석
```
### Windows ##
## 자주 묻는 질문 (FAQ)
결과
H1 1행 · 사용 안내 · #사용-안내
  H2 2행 · 설치 방법 · #설치-방법
    H3 6행 · Windows · #windows
  H2 7행 · 자주 묻는 질문 (FAQ) · #자주-묻는-질문-faq

코드 블록 안 '# 주석'은 빠졌고, 'Windows ##'의 끝 #은 떼어졌습니다. 괄호는 앵커에서 지워집니다.

이럴 때 쓰면 좋아요

  • 남이 쓴 긴 문서를 고치기 전에 장·절 구조부터 파악할 때
  • 목차를 만들기 전에 제목 단계가 고르게 짜였는지 볼 때
  • 문서 안 링크에 넣을 정확한 앵커 이름을 확인할 때
  • 문서 리뷰에서 구조 의견을 줄 번호와 함께 남길 때

문제가 생겼을 때

제목 아래 밑줄(===, ---)로 만든 제목이 빠짐

이 뷰어는 # 방식 제목만 읽습니다. '제목' 다음 줄의 ===는 '# 제목', ---는 '## 제목'으로 바꾼 뒤 다시 실행하세요.

#제목 줄이 목록에 없음

#과 제목 사이에 공백이 없으면 Markdown 제목이 아닙니다. '# 제목'처럼 한 칸 띄우거나 Markdown 포맷터로 한 번에 고치세요.

활용 팁

  • 같은 제목이 두 번 나오면 두 번째 앵커에 -1이 붙습니다. 링크가 엉뚱한 곳으로 가면 앵커 번호를 확인하세요.
  • 구조를 확인한 뒤 바로 목차가 필요하면 같은 내용을 Markdown 목차 생성기에 넣으면 됩니다.

자주 묻는 질문

결과에서 들여쓰기는 몇 칸인가요?

제목 한 단계마다 공백 두 칸입니다. H1은 들여쓰기 없이, H3은 네 칸 들여써서 나옵니다.

앵커 규칙은 어느 사이트 기준인가요?

GitHub 방식입니다. 소문자로 바꾸고 공백은 하이픈으로, 괄호 같은 기호는 지웁니다. 다른 문서 사이트는 규칙이 조금 다를 수 있습니다.

제목이 하나도 없으면 어떻게 되나요?

결과가 비어서 나옵니다. # 제목이 있는지, 코드 블록 안에만 들어 있지 않은지 확인하세요.