scroll-margin-top
앵커 링크로 스크롤할 때 요소 위쪽에 여백을 추가합니다. 고정 헤더가 있을 때 스크롤 대상이 헤더 뒤에 가려지는 것을 방지하는 데 유용합니다.
클래스 목록
패턴: smt{값}{단위}
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | 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 여백 |
사용 예시
<!-- Add scroll margin to anchor link targets -->
<section id="section1" class="smt6rem">
<h2>Section Title</h2>
<p>Not obscured below the fixed header (60px).</p>
</section>
<!-- Scroll snap + margin -->
<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이 더 적합합니다.