치춘짱베리굿나이스

scroll-snap 웹앱 등지에서 스크롤을 넘기다 보면 특정 컴포넌트에서 자석같이 멈추는 느낌의 스크롤을 볼 수 있다 위의 이미지에서도 중간즈음까지 스크롤을 넘기면 자동으로 컴포넌트의 왼쪽에 맞춰서 착 달라붙는 것을 볼 수 있다 임의로 자석 스크롤, 쫀쫀 스크롤이라고 부르고 있었는데 CSS에서의 정식 명칭은 scroll-snap이었다 (이하 위와 같은 동작을 ‘스냅’ 이라고 부르도록 하겠다) 이 모션을 위한 총 3개의 스크롤 관련 CSS 속성이 존재하는데, 하나는 부모 컨테이너에 적용하고, 두 개는 스크롤이 스냅되길 원하는 자식 박스에 적용하면 된다 세 개의 속성들 scroll-snap-type (부모) scroll-snap-type: [ x | y | block | inline | both] [ ma..