긴 정적 페이지에는 대개 높이 56px에서 72px의 고정 상단 내비가 있고 얇은 공지 띠가 겹치기도 합니다. 독자가 #pricing나 자동 생성 목차 링크를 밟으면 브라우저는 제목을 스크롤포트 상단에 딱 맞춥니다. 고정 크롬은 보통 흐름에서 빠져 그 영역을 줄이지 않으므로 첫 줄이 바에 가려 읽기 어렵습니다. 2026년 현재 스크롤 컨테이너의 scroll-padding-*와 대상의 scroll-margin-* 조합이 가상 키보드·스냅 스크롤·문서 간 뷰 전환 아래에서도 덜 깨지는 해법입니다. 본문은 실무 값, scroll-behavior: smooth와의 관계, Safari/WebKit 현장 메모, 레이어가 겹치는 CSS 앵커 포지셔닝, View Transitions API를 켠 정적 MPA의 퇴행 테스트까지 묶습니다.
가격 메모로, Safari Technology Preview·안정 Safari·iOS WebView 차이를 한 번에 확인하려면 시뮬레이터 농장보다 MacHTML에서 빌린 Mac mini(대략 하루 16.9달러)가 더 빠른 경우가 많습니다. 네이티브 WebKit과 Apple Silicon 여유가 한 상자에 있어 픽셀 디프와 접근성 인스펙터 왕복이 가벼워집니다.
고정 헤더가 가리는 이유
네이티브 해시 이동은 대상 테두리 상자가 스크롤포트의 최적 시야 원점에 오도록 스크롤을 계산합니다. 불투명 64px 바가 얹히면 <h2 id="faq"> 제목 글자가 그 아래로 들어갑니다. 마케 팀이 먼저 불평하는 패턴은 히어나 요금표로 메일 캠페인 앵커 CTA를 보내는 경우입니다.
예전엔 보이지 않는 스페이서를 끼우거나 scrollIntoView({block:'start'}) 직후 window.scrollBy(0, -64)를 쳤습니다. 가상 키보드·스냅·문서 간 뷰 전환 조합에선 잘 깨지고 CSS 우선이 더 오래 갑니다.
html·body·내부 스크롤러의 scroll-padding
scroll-padding-top은 스크롤포트 안에서 스냅이나 스크롤 타깃 정렬 위치에 오프셋을 줍니다. 문서 수준이면 이렇게 둡니다.
html {
scroll-behavior: smooth;
scroll-padding-top: 4.5rem; /* 내비 3.5rem + 시각적 호흡 */
}모바일에서 쿠키 배너가 아래에 붙으면 scroll-padding-bottom도 씁니다. 값은 env(safe-area-inset-bottom) + 56px 전후가 무난해 홈 인디케이터 단말의 각주 앵커가 하단 바에 덜 가립니다.
문서 사이트가 <main class="docs">의 overflow: auto만 스크롤시키면 html이 아니라 그 요소로 scroll-padding-top을 옮깁니다. 조각 URL의 가장 가까운 스크롤 컨테이너가 안쪽인데 padding을 잊으면 “MDN 예제는 되는데 우리 레이아웃은 안 된다”의 전형적 원인입니다.
제목과 카드의 scroll-margin
목적지 id의 scroll-margin-top은 스크롤 정렬에 쓰는 논리 마진 박스를 넓히고 보통 레이아웃은 거의 안 바꿉니다. 링크될 수 있는 h2, h3, FAQ 행 모두에 둡니다.
.article-content h2[id],
.article-content h3[id] {
scroll-margin-top: 5rem;
}제목이 패딩 카드 안에 있으면 id는 바깥 래퍼로 옮기고 중첩 스티키 사이드바가 있어도 여백이 남도록 나눕니다. 실무 관례는 글로벌 크롬은 scroll-padding, 아코디언이 잠깐 높이를 키우는 국소 부품은 scroll-margin입니다.
쌓이는 스티키와 safe-area env()
물리 길이와 max()를 섞어 회전 단말에서도 안전 영역을 놓치지 않습니다.
html {
scroll-padding-top: max(4.5rem, env(safe-area-inset-top));
}top: 4rem에 붙는 장 레일이 있으면 그 아래 절 id에 2.5rem쯤 더해야 내비 뒤 스티키가 소제목을 덮지 않습니다.
부드러운 스크롤과 prefers-reduced-motion
전역 scroll-behavior: smooth는 쾌감 대신 전정 감수성 사용자를 괴롭힙니다. 미디어 쿼리로 감쌉니다.
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}스무스를 꺼도 padding은 유효합니다. Safari 접근성 인스펙터로 축소 모션 설정 실효를 확인하세요. WebKit은 2025~2026 포인트 릴리스에서 사용자 설정 존중을 다듬어 왔습니다.
2026 Safari/WebKit 메모
WebKit은 조각 스크롤에서 scroll-padding을 대체로 존중하지만 중첩 position: sticky 산은 실기 확인이 필요합니다. 스크롤 패널 안 스티키 테이블 헤더가 있으면 패널 내 앵커에 추가 scroll-margin-top이 필요할 수 있습니다. 사생활 보호 브라우징에선 확장이 가짜 툴바를 더해 유효 뷰포트 높이가 최대 48px 달라지는 구성도 있습니다.
@supports (scroll-padding-top: 1px)는 자바스크립트 우회를 게이트할 때만. 2026년 신경 쓸 Evergreen Safari는 이 속성을 지원하므로 폴리필보다 시각 회귀 테스트에 공수를 쏟는 편이 낫습니다.
클라우드 Mac mini에서 Safari 안정판과 Technology Preview를 나란히 두고 스크린샷을 비교하면, 고객사가 쓰는 구형 macOS에서도 동일한 스크롤 정렬 값이 안전한지 빠르게 가늠할 수 있습니다. 특히 긴 정적 랜딩은 마케팅 배너가 수시로 켜지므로, 운영 중에도 scroll-padding-top 재측정을 분기 일정에 넣어 두는 것이 좋습니다.
padding 대 margin 판단표
| 상황 | 선호 | 이유 |
|---|---|---|
| 단일 고정 글로벌 내비 | html에 scroll-padding-top | 페이지 내 링크를 한 손잡이로 |
| 여러 사이트에서 재사용하는 제목 컴포넌트 | 제목 클래스에 scroll-margin-top | 브랜드마다 내비 높이가 달라도 이식 쉬움 |
| 내부 문서 스크롤러 | 스크롤러 요소에 scroll-padding | overflow 컨테이너가 조각의 최근접 |
| id 근처 앵커 배치 팝오버 | 둘 다 병용 | 겹침이 움직여도 글 읽는 영역 유지 |
정적 HTML 출하 전 체크리스트
- DevTools 기기 모드로 폭 320px, 768px, 1280px에서 고정 헤더 높이를 잰다.
scroll-padding-top을 실측에 광학 갭 12px를 더한 값으로 둔다.- 공개 앵커 id 전부—법무 절 포함—에
scroll-margin-top을 단다. - 목차의 첫 절과 마지막 절을 밟는다. 끝 절은 하단 바와 충돌하기 쉽다.
- MPA에서 뷰 전환을 켰으면 재측정한다.
다듬어진 정적 사이트는 명료함이 생명입니다. 제목을 크롬 그림자에 숨기면 안 됩니다. MacHTML의 Mac mini(대략 하루 16.9달러)는 네이티브 Safari와 Apple Silicon 성능을 함께 주어 CSS 스크롤 정렬을 반복하고 픽셀 디프를 찍으며 마케 오버레이·스티키 레일이 있어도 깨지기 쉬운 자바스크립트 없이 출하할 수 있는지 확인하기 좋습니다.
클라우드 Mac mini에서 Safari 스크롤 정렬 사인오프
scroll-padding, 스티키 적층, 축소 모션 설정을 긴 정적 페이지를 내기 전 macOS 실기에서 굳힙니다.