🧲 CSS scroll-snap 생성기 | 코드 바로 복사

스냅 축

스냅 강제성

아이템 정렬 기준

scroll-padding (고정 헤더 등 여유 공간)

아이템 간격 (gap)

아이템 고정 크기 (0이면 넣지 않음)

한 칸씩만 넘기기 (scroll-snap-stop)

바깥 스크롤 전파 막기 (overscroll-behavior)

프로그램 스크롤을 부드럽게 (scroll-behavior)

가로 캐러셀이나 전체 화면 섹션을 만들 때 쓰는 scroll-snap 선언을 한 번에 뽑아 줍니다. 축과 강제성, 정렬 기준, 여유 공간, 아이템 간격과 크기를 고르면 컨테이너용 블록과 아이템용 블록을 나눠 만들어 주고, 바로 위 미리보기에서 실제로 스크롤해 볼 수 있습니다.

scroll-snap은 컨테이너와 아이템 양쪽에 선언이 있어야 동작합니다. 컨테이너에는 overflow와 scroll-snap-type이, 아이템에는 scroll-snap-align이 들어갑니다. 한 칸씩만 넘기려면 아이템에 scroll-snap-stop을 always로 두고, 컨테이너 끝에서 부모가 함께 움직이는 것을 막으려면 overscroll-behavior를 contain으로 둡니다. 속성 이름과 값은 W3C CSS Scroll Snap Level 1 을 따릅니다(2026년 10월 기준).

미리보기는 선언을 그대로 적용한 결과이지만 손가락 스크롤의 관성까지 재현하지는 않습니다. 또한 이 도구는 자바스크립트 캐러셀 컨트롤이나 인디케이터 점, 자동 재생은 만들지 않습니다. both 축을 고르면 레이아웃과 아이템 크기는 직접 정해야 합니다.

자주 묻는 질문

mandatory와 proximity는 어떻게 다른가요?

mandatory는 스크롤이 멈출 때마다 반드시 가까운 스냅 지점으로 당겨지고, proximity는 충분히 가까울 때만 당겨집니다. 긴 본문에는 proximity가 안전합니다.

스냅이 전혀 걸리지 않습니다.

컨테이너에 overflow가 auto나 scroll이어야 하고, 아이템 쪽에 scroll-snap-align이 있어야 합니다. 두 선언이 서로 다른 요소에 들어가야 동작합니다.

고정 헤더에 아이템이 가려집니다.

scroll-padding 값을 헤더 높이만큼 넣으면 스냅 지점이 그만큼 밀립니다. 아이템 쪽 여백인 scroll-margin으로도 같은 조정을 할 수 있습니다.

🧲CSS scroll-snap 코드 생성기

관련된 도구

CSS 커스텀 스크롤바 코드 생성기

CSS Flexbox 레이아웃 코드 생성기

자주 묻는 질문

관련된 도구

CSS 커스텀 스크롤바 코드 생성기

CSS Flexbox 레이아웃 코드 생성기

자주 묻는 질문

같은 카테고리 도구