scroll-padding-top
스크롤 컨테이너의 위쪽 패딩을 설정하여 스크롤 스냅 위치를 조정합니다. 고정 헤더(sticky/fixed header)가 콘텐츠를 가리는 문제를 해결하는 가장 효과적인 방법입니다.
클래스 목록
패턴: spt{값}{단위}
| 클래스 | CSS | 설명 |
|---|---|---|
spt0 | scroll-padding-top: 0 | 스크롤 패딩 없음 |
spt8px | scroll-padding-top: 8px | 8px 패딩 |
spt16px | scroll-padding-top: 16px | 16px 패딩 |
spt2rem | scroll-padding-top: 2rem | 20px 패딩 |
spt4rem | scroll-padding-top: 4rem | 40px 패딩 |
spt6rem | scroll-padding-top: 6rem | 60px 패딩 (일반적인 헤더 높이) |
spt8rem | scroll-padding-top: 8rem | 80px 패딩 |
spt10rem | scroll-padding-top: 10rem | 100px 패딩 |
사용 예시
<!-- 스크롤 컨테이너에 상단 패딩 -->
<html class="spt6rem">
<!-- 모든 앵커 링크(#id)가 60px 아래에 위치 -->
</html>
<!-- 스크롤 스냅 + 패딩 -->
<div class="spt4rem oya h100vh">
<section id="s1">섹션 1</section>
<section id="s2">섹션 2</section>
</div>핵심 패턴: 고정 헤더 보정
앵커 링크(#id)로 이동할 때 고정 헤더에 콘텐츠가 가려지는 문제를 해결합니다.
<!-- 고정 헤더가 있는 페이지 -->
<html class="spt8rem">
<body>
<header class="pf t0 l0 w100p h6rem bg000000 zi100">
<nav>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- 앵커 이동 시 헤더 아래 80px 지점에 위치 -->
<section id="about">...</section>
<section id="contact">...</section>
</body>
</html>팁 & 주의사항
scroll-padding-top vs scroll-margin-top
spt는 스크롤 컨테이너(보통 html)에 한 번만 설정하면 모든 앵커에 적용됩니다. smt는 각 대상 요소마다 개별 설정이 필요합니다.
헤더 높이와 일치시킬 것
scroll-padding-top 값은 고정 헤더의 높이와 같거나 약간 크게 설정하세요. 헤더가 60px이면 spt6rem 또는 spt8rem을 사용합니다.