scroll-margin-top
앵커 링크로 스크롤할 때 요소 위쪽에 여백을 추가합니다. 고정 헤더가 있을 때 스크롤 대상이 헤더 뒤에 가려지는 것을 방지하는 데 유용합니다.
클래스 목록
패턴: smt{값}{단위}
| 클래스 | CSS | 설명 |
|---|---|---|
smt0 | scroll-margin-top: 0 | 스크롤 여백 없음 |
smt8px | scroll-margin-top: 8px | 8px 여백 |
smt16px | scroll-margin-top: 16px | 16px 여백 |
smt2rem | scroll-margin-top: 2rem | 20px 여백 |
smt4rem | scroll-margin-top: 4rem | 40px 여백 |
smt6rem | scroll-margin-top: 6rem | 60px 여백 (일반적인 헤더 높이) |
smt8rem | scroll-margin-top: 8rem | 80px 여백 |
smt10rem | scroll-margin-top: 10rem | 100px 여백 |
사용 예시
<!-- 앵커 링크 대상에 스크롤 여백 추가 -->
<section id="section1" class="smt6rem">
<h2>섹션 제목</h2>
<p>고정 헤더(60px) 아래로 가려지지 않습니다.</p>
</section>
<!-- 스크롤 스냅 + 마진 -->
<div class="smt4rem" id="card-1">
<div class="bg18181B p2rem br8px">Card 1</div>
</div>팁 & 주의사항
scroll-margin vs scroll-padding
smt는 스크롤 대상 요소에 적용하고, spt는 스크롤 컨테이너에 적용합니다. 고정 헤더 보정에는 scroll-padding-top이 더 적합합니다.