페이지는 정상적으로 열리는데 “본문 바로가기”나 목차 링크를 눌러도 원하는 위치로 이동하지 않을 수 있습니다. 링크 뒤의 #이 가리키는 이름과 실제 문서의 ID가 일치하는지 먼저 확인하십시오. HTTP 200이라는 결과는 페이지를 받았다는 뜻이며 문서 안의 목적지까지 존재한다는 보장은 아닙니다.
없는 ID와 있는 ID를 비교했습니다
독립 HTML 실험 페이지에 링크 두 개를 만들었습니다. 첫 링크는 #shipping을 가리키지만 그런 ID를 넣지 않았습니다. 두 번째 링크는 실제 존재하는 #delivery를 가리킵니다. 같은 내장 Chromium 브라우저에서 두 링크를 차례로 클릭하고 주소의 fragment와 스크롤 위치를 읽었습니다.
| 클릭한 링크 | 대상 ID | 관찰된 스크롤 Y |
|---|---|---|
| #shipping | 없음 | 0 |
| #delivery | 있음 | 1074 |
첫 링크는 주소에 #shipping이 붙었지만 이동할 대상이 없었습니다. 두 번째 링크는 실제 영역으로 내려갔습니다. 1074px는 이 실험 화면의 관찰값일 뿐 올바른 링크의 고정 기준은 아닙니다. 화면 폭·글꼴·내용 높이가 달라지면 값도 달라집니다.
주소의 # 뒤와 본문의 ID를 맞춥니다
<a href="#delivery">배송 안내</a>
<section id="delivery">...</section>링크는 #delivery, 대상은 id=”delivery”로 같은 값을 사용합니다. 링크에만 이름이 있고 대상에 ID가 없으면 브라우저가 찾을 지점이 없습니다. 대소문자와 철자도 맞추고 같은 문서에 같은 ID를 여러 번 만들지 않습니다. HTML의 ID는 문서 안에서 고유해야 합니다.
워드프레스에서는 어디를 확인하나요?
해당 제목이나 그룹 블록을 선택한 뒤 고급 설정의 HTML 앵커를 확인합니다. 앵커 값에는 일반적으로 #을 붙이지 않고 이름만 넣으며, 연결하는 링크 쪽에는 #을 붙입니다. 제목 문구를 바꾸는 것과 앵커 값을 바꾸는 것은 별개의 변경이므로, 예전 목차 링크가 남아 있는지도 봅니다. 테마가 자체 ID를 만드는 영역은 임의로 덮어쓰지 말고 실제 출력된 값을 확인해야 합니다.
고정 헤더가 제목을 덮는 경우
ID가 맞고 스크롤도 이동했는데 제목이 안 보이면 고정 헤더 아래에 가려졌을 수 있습니다. 이 경우 없는 ID 문제와는 해결책이 다릅니다. 직접 관리하는 페이지라면 대상 영역의 scroll-margin-top 같은 여백을 검토할 수 있습니다. 헤더 높이가 모바일과 데스크톱에서 다르면 두 화면을 나누어 확인합니다.
페이지 전체 오류와 구별합니다
| 증상 | 먼저 볼 것 | 수정 방향 |
|---|---|---|
| 페이지 자체가 404 | # 앞의 주소 | 페이지 주소·이동 경로 |
| 주소에 #만 바뀌고 이동 없음 | 대상 ID 존재 | 앵커 이름 일치 |
| 이동하지만 제목이 가림 | 고정 헤더 | 스크롤 여백 |
| 다른 곳으로 이동 | 중복 ID | ID를 하나씩 고유하게 |
fragment는 브라우저가 문서 안에서 처리하는 위치 정보입니다. 서버 로그에 페이지 요청이 성공했다고 남더라도 그 뒤의 앵커 동작을 검사한 결과는 아닙니다. 저장 버튼 성공 메시지만 보고 끝내지 말고 공개 페이지에서 실제 링크를 클릭해야 합니다.
키보드와 모바일에서도 확인합니다
본문 바로가기는 마우스 사용자보다 키보드와 보조기술 사용자에게 특히 중요합니다. Tab으로 링크에 도달해 Enter를 눌렀을 때 본문으로 이동하는지, 대상이 화면에 보이는지 확인합니다. 단순한 스크롤 이동만으로 모든 스크린리더의 포커스 처리가 검증된 것은 아니므로 접근성 검사는 따로 범위를 정해야 합니다.
직접 누를 수 있는 실험 페이지
본문 위치 링크 실험 열기에서 두 링크를 비교할 수 있습니다. 없는 ID 링크를 먼저 누른 다음 정상 링크를 누르십시오. 네트워크에 개인정보를 입력하거나 앱을 설치할 필요가 없습니다. 이 페이지는 HTML 위치 이동의 작은 예제이며 모든 테마의 스크립트 동작을 대신하지 않습니다.