목차를 눌렀는데 다른 곳으로? 본문 ID 중복과 소제목 변경 뒤 링크 점검
목차가 엉뚱한 곳으로 이동하면 링크 목적지와 본문 ID를 나란히 확인하세요. 소제목을 복사하거나 문구를 고친 뒤에는 ID 중복과 누락을 점검하고 공개 화면에서 이동 결과를 확인합니다.
1. 목차 문구와 목적지는 다른 값입니다
목차에 보이는 문구는 독자가 읽는 이름이고, 이동 목적지는 링크의 href 안에 들어갑니다. 문구를 바꿨다고 목적지도 자동으로 바뀌었다고 생각하지 마세요. 소제목의 표시 문구와 해당 요소의 id 역시 구분합니다.
MDN은 문서 조각 링크를 만들 때 이동할 요소에 id를 지정하고, 같은 문서에서는 #과 그 id를 링크 목적지로 사용하는 방법을 설명합니다. 예를 들어 여행 예산이라는 소제목을 가족 예산으로 바꿔도 id를 유지하면 기존 목적지를 계속 사용할 수 있습니다.
2. 같은 ID를 복사하면 확인이 어려워집니다
HTML의 id는 문서 전체에서 고유해야 합니다. 여러 소제목을 복사해 놓고 같은 id를 남기면 같은 목적지를 가리키는 제목이 여러 개 생깁니다. 어느 소제목으로 이동했는지 화면에서 확인하고, 중복된 id를 각기 다른 값으로 정리하세요.
| 상태 | 목차와 본문 | 점검 |
|---|---|---|
| 정상 예시 | href는 #trip-budget, 본문 한 곳의 id는 trip-budget | 문자열 일치와 고유성 확인 |
| ID 중복 | 두 소제목에 id=trip-budget | 내용에 맞는 서로 다른 ID 부여 |
| 목적지 누락 | href는 #trip-budget, 해당 id 없음 | 실제 소제목 ID와 링크 대조 |
| 문구만 수정 | 제목은 가족 예산, ID는 trip-budget 유지 | 의도한 목적지가 유지되면 문구와 ID가 달라도 가능 |
3. 원고에서 두 값을 나란히 찾는 예시
다음은 직접 만든 간단한 코드 예시입니다. 편집기의 HTML 보기에서 링크의 # 뒤 값과 소제목의 id 값을 각각 찾습니다. 예시 문자열을 본문에 여러 번 복사할 때 실제 요소의 id까지 중복하지 않도록 주의하세요.
<a href="#trip-budget">가족 예산</a> <h2 id="trip-budget">가족 예산 준비</h2>
이 예시는 새 ID를 반드시 영어로 써야 한다는 뜻이 아닙니다. MDN에 따르면 id에 유니코드 문자를 사용할 수 있지만 ASCII 공백은 허용되지 않습니다. 작업자가 기억하고 대조하기 쉬운 값으로 정하고, 별도 CSS 선택자에 사용할 때는 해당 문법과 이스케이프 조건도 확인하세요.
4. 소제목을 고친 뒤 공개 화면에서 확인하기
- 수정할 글의 원문을 먼저 보존합니다.
- 목차 링크의 목적지와 소제목 ID를 목록으로 적습니다.
- 중복된 ID와 존재하지 않는 목적지를 찾아 고칩니다.
- 저장한 뒤 공개 글에서 목차를 실제로 클릭합니다.
- 주소의 # 뒤 값과 도착한 소제목을 함께 확인합니다.
이 글의 목차도 해당 소제목으로 이동하는 실제 링크입니다. 문구가 비슷하다는 이유만으로 이동 결과를 판단하지 말고, 목표 소제목이 화면에 나타났는지 확인하세요. 테마의 고정 메뉴가 제목을 가리는 문제와 목적지 누락은 따로 점검합니다.
| 확인 메모 | 기록 예시 |
|---|---|
| 목차 항목 | 가족 예산 |
| 목적지 | #trip-budget |
| 본문 ID 개수 | 고친 뒤 한 곳 |
| 클릭 결과 | 가족 예산 준비 소제목 도착 |
| 남은 문제 | 제목 가림 여부 별도 확인 |
5. 자주 묻는 질문과 공식 설명
소제목 글자를 바꾸면 ID도 바꿔야 하나요?
표시 문구와 ID는 구분됩니다. 의도한 목적지를 유지한다면 ID를 보존할 수 있습니다. ID를 바꾸면 연결된 목차도 함께 대조합니다.
한글 ID는 쓸 수 없나요?
유니코드 문자를 사용할 수 있습니다. 공백과 별도 선택자 문법을 확인하고, 공개 화면의 실제 이동 결과로 검증합니다.
목차가 밑줄 없이 보이면 기능도 확인된 건가요?
표시 서식과 이동 기능은 별개입니다. 링크의 목적지와 도착 위치를 직접 확인해야 합니다.
근거: MDN id 전역 속성, MDN 링크와 문서 조각. 표와 점검 양식은 이 글에서 직접 구성한 예시입니다.
MDN에서 본문 ID의 고유성 조건 확인하기확인 기준일: 2026년 10월 3일.
대표 썸네일은 AI로 제작한 개념 삽화이며, 본문 링크 점검 도표는 글 내용을 직접 구성했습니다.
