스크롤 스냅1 [ HTML / CSS ] 스크롤 스냅(Scroll Snap) 기능 사용해보기 안녕하세요 오늘은 CSS의 스크롤 스냅(Scroll Snap) 기능을 사용해보겠습니다. 이 기능을 사용하면 스크롤바가 이동한 만큼만 하위 요소들이 이동하는 것이 아니라, 스크롤을 하면 자동으로 다음 요소로 애니메이션 효과와 함께 이동하면서 달라붙는 효과를 표현할 수 있습니다. 구현한 예제 시연 화면은 다음과 같습니다. 다음은 예제 전체 코드입니다. Spring Summer Autumn Winter 'container' 클래스에 'scroll-snap-type' 속성을 추가했습니다. 속성 값은 'y mandatory' 를 사용했습니다. 세로 방향으로 스크롤할 것이므로 'y' 값을 주었고, 페이지 단위로 자동으로 스크롤되게 하기 위해서 'mandatory' 값을 사용했습니다. 'mandatory' 속성을 사.. 2022. 10. 3. 이전 1 다음