scroll-margin-bottom
앵커 링크로 스크롤할 때 요소 아래쪽에 여백을 추가합니다. 고정 푸터가 있을 때 스크롤 대상이 가려지지 않도록 보정하는 데 사용합니다.
클래스 목록
패턴: smb{값}{단위}
| 클래스 | CSS | 설명 |
|---|---|---|
smb0 | scroll-margin-bottom: 0 | 스크롤 여백 없음 |
smb8px | scroll-margin-bottom: 8px | 8px 여백 |
smb16px | scroll-margin-bottom: 16px | 16px 여백 |
smb2rem | scroll-margin-bottom: 2rem | 20px 여백 |
smb4rem | scroll-margin-bottom: 4rem | 40px 여백 |
사용 예시
<!-- 고정 푸터가 있을 때 스크롤 대상 보정 -->
<section id="bottom-section" class="smb6rem">
<p>고정 푸터(60px)에 가려지지 않도록 아래쪽 여백 추가</p>
</section>
<!-- 세로 스크롤 스냅에서 아래쪽 여백 -->
<div class="smb2rem bg18181B p2rem br8px">
스냅 포인트 아래에 여유 공간 확보
</div>