스크롤 스냅 (Scroll Snap)

인스타그램 릴스나 틱톡처럼 위아래로 스크롤할 때 콘텐츠가 화면의 정해진 위치에 자석처럼 '착' 달라붙게 만드는 기능입니다. 과거에는 복잡한 자바스크립트 라이브러리가 필요했지만, 이제는 순수 CSS의 스크롤 스냅(Scroll Snap) 기능만으로 완벽하게 구현할 수 있습니다.

부모 컨테이너에 scroll-snap-type (스크롤 방향과 강도)을 지정하고, 자식 요소들에 scroll-snap-align (달라붙을 기준점: start, center 등)을 설정하기만 하면 부드러운 스와이프 UI가 완성됩니다.

<div style="color: #cbd5e1; margin-bottom: 10px;">마우스 시프트(Shift)+스크롤 또는 터치로 좌우로 슬라이드 해보세요.</div> <div class="gallery"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>