[CSS] 스크롤 스냅(Snap) 처리하기
인스타그램처럼 페이지를 이동을 하면 스크롤이 해당 페이지의 첫 페이지의 위쪽 포인트만큼 이동이 되는 걸 본 적이 있을 겁니다. 이 기능을 사용하기 위해서는 fullpage.js 오픈 소스를 이용을 하는데, 상업용으로 이용할 경우엔 비용이 생깁니다. Javascript로 처리를 했었던 스냅 처리를 CSS로 할 수 있게 속성이 추가가 됐습니다. 그 속성은 scroll-snap-type 속성입니다. scroll-snap-type MDN에 따르면 scroll-snap-type 속성은'scroll-snap-type CSS 속성은 스냅 포인트가 있는 경우 스크롤 컨테이너에 스냅 포인트가 얼마나 엄격하게 적용되는지 설정합니다.' 라고 설명되어 있습니다. 스크롤은 좌우 축인 x축, 위아래 축인 y축 기준으로 스크롤을 ..
IT/응용
2021. 8. 4. 13:33
