튜토리얼
Claude Opus 5.5로 고정 헤더에 가려진 페이지 내부 링크 수정하기
섹션 링크에 오프셋을 더하기 전에 Claude Opus 5.5가 헤더의 점유 공간과 실제 스크롤 컨테이너를 확인하도록 하세요.
섹션 링크에 오프셋을 더하기 전에 Claude Opus 5.5가 헤더의 점유 공간과 실제 스크롤 컨테이너를 확인하도록 하세요. 올바른 URL 조각에 제목이 있어도 메뉴 뒤에 숨을 수 있습니다. 메뉴 줄바꿈, 프로모션 배너, 키보드 포커스에서도 작동해야 합니다.
고정 헤더에 관한 개발자 질문은 같은 증상을 보고합니다. 커뮤니티 맥락이며 현재 페이지의 진단은 아닙니다. 아래는 계산 예시를 포함한 제안으로, 실행한 Opus 시험은 아닙니다.
부족한 공간을 어디에 넣을지 찾기
| 상황 | 확인할 것 | 수정 후보 |
|---|---|---|
| 모든 섹션 대상이 가려짐 | 스크롤 컨테이너와 덮개 높이 | 컨테이너 scroll padding |
| 한 대상만 여백이 필요함 | 해당 대상 정렬 | 대상 scroll margin |
| 모바일 메뉴가 두 줄임 | 실제 헤더 점유 높이 | 반응형 또는 측정 오프셋 |
| 포커스 컨트롤이 숨음 | 키보드 경로와 모든 덮개 | 앵커 외의 포커스 가시성 |
MDN scroll-margin-top 문서는 대상 스크롤 영역의 오프셋을 설명합니다. 눈에 보이는 일반 바깥 여백과 혼동하지 마세요. W3C C43 기법은 가림을 해결하는 scroll padding을 보여 줍니다. 앵커 이동 한 번의 성공은 전체 접근성 평가가 아닙니다.
오프셋을 계산하고 실제 검증하기
가상 페이지에 64 CSS 픽셀 고정 메뉴와 바로 위에 쌓인 32픽셀 배너가 있다고 가정합니다. 96픽셀을 차지하고 원하는 간격 16을 더하면 112픽셀입니다. 메뉴가 줄바꿈되어 88픽셀이면 합계는 136픽셀입니다. 가정한 치수의 계산이며 Panelly 실측값은 아닙니다.
가로 쓰기, 문서 스크롤, 확인된 덮개 높이 96픽셀이라는 조건에서 시작할 예제입니다.
html { scroll-padding-top: 112px; }이 값에는 원하는 간격이 포함됩니다. 대상에도 습관적으로 112픽셀 scroll margin을 더하면 지나치게 멀어질 수 있습니다. 한 대상에만 여백이 필요하면 의도한 추가량을 선택하세요. 패널 안의 콘텐츠라면 실제 스크롤 요소를 확인해야 합니다. `html` 설정은 다른 스크롤러를 설정하지 않습니다.
배너가 나타나거나 메뉴가 줄바꿈되면 고정값이 맞지 않게 됩니다. 겹치지 않는 배치, 적절한 반응형 값, 주의 깊게 측정한 공통 높이를 고려하세요. 글꼴 로딩 뒤에도 시험합니다. 좁은 화면을 헤더가 너무 많이 차지하면 오프셋을 계속 늘리기보다 고정을 해제하는 편이 나을 수 있습니다.
복사 가능한 Opus 수정 요청
공식 Opus 안내와 함께 사용하세요.
페이지 마크업, 계산된 스타일, 헤더와 배너 치수, 실패하는 조각 URL을 검사하세요. 실제 스크롤 컨테이너와 대상에 영향을 주는 고정 또는 스티키 덮개를 모두 찾으세요.
일반 흐름 간격, 컨테이너 scroll padding, 대상 scroll margin을 구분하세요. 점유 높이와 원하는 간격을 계산하고 합산 효과를 설명하지 않은 채 오프셋을 중복하지 마세요. 메뉴 줄바꿈, 글꼴 로딩, 배너 닫힘을 고려하세요.
기존 조각 ID와 링크를 보존하는 최소 패치를 제안하고 가능하면 기본 탐색을 유지하세요. 스크린샷만 맞추려고 제목에 포커스를 강제하지 말고 포커스 관리 변경의 목적을 설명하세요.
내부 클릭, 조각 URL 직접 로드, 뒤로 가기, Tab과 Shift+Tab, 320/390/1440 CSS 픽셀 시험을 반환하세요. 확대와 두 줄 헤더도 포함하세요. 대상 가시성과 포커스 컨트롤 가시성을 구분하고 관찰하지 않은 브라우저 결과는 대기로 두세요.두 가지 사용자 경로 시험하기
먼저 섹션 링크를 클릭하고 같은 조각 URL을 직접 엽니다. 글꼴과 이미지가 안정된 뒤 제목 위쪽을 확인하고 뒤로 가기를 사용합니다. 기존 ID를 유지해 저장 링크가 계속 작동하게 합니다. 사용자 정의 클릭 처리 뒤에만 작동하면 직접 링크 시험은 통과하지 못한 것입니다.
다음으로 Tab과 Shift+Tab으로 링크와 컨트롤을 이동하며 위·아래 덮개에도 포커스가 보이는지 확인합니다. 마우스 스크린샷으로 키보드 동작을 추론하지 마세요. 배너가 열린 상태와 닫힌 상태, 확대 상태에서 반복합니다. 뷰포트와 상태별 실패를 기록해야 다음 수정이 재현 가능한 문제를 다룹니다.
흔한 결정
**일반 padding이 모든 앵커를 고치나요?** 레이아웃과 스크롤 정렬은 따로 살펴야 합니다.
**이동마다 JavaScript가 필요한가요?** 실제 조건을 만족하면 기본 링크와 CSS부터 씁니다.
**데스크톱 한 번이면 끝인가요?** 줄바꿈과 확대가 점유 공간을 바꿉니다.
섹션 탐색이 작동하면 Panelly Studio에서 캠페인 이미지를 만드세요. 탐색 중 움직임은 별도의 사용자 설정 문제이므로 동작 줄이기 검토를 참고할 수 있습니다.
