지난 번글로 position sticky를 소개 해보았다. 하지만 어떻게 써야 할지 감이 안잡하는 분들도 있을 것이다. 뭐 물로 사용 해분 본들도 있겠지... 그래서 이번에 scroll-snap-type과 같이 이용하여 재밌는 스크롤 액션을 만든것을 소개해 보겠다. 위의 코드를 간단하게 확인해보면 확인해야 할 키워드는 scroll-snap-type : y mandatory ; scroll-snap-align : start ; position : sticky ; 위 세 가지의 css속성이다. position: sticky만 사용 하는 경우 title의 위치를 스크롤되는 도중 어디에 위치 시킬지 결정 할 수 있는 것은 지난 포스트에서 안내를 하였다. scroll-snap-* scroll-snap 속성은 스크롤하는 행위를 멈추었을 때, 스크롤의 오프셋을 조정 할 수 있는 속성이다. 따라서 scroll에 영향을 받는 position: sticky속성과 케미가 좋다. scroll-snap-type scroll-snap-type은 어느 축에 맞출지와 엄격도를 지정 할 수 있다. 위의 속성정의에 따르면 y축에 scroll-snap을 맞추고 항상 snap효과를 주라는 요청이 되어있다. scroll-snap-align scroll-snap-align은 스냅 되는 대상의 영역(snap area)의 어디 기준으로 맞출지에 대해 결정을 해준다. 위의 속성으로 보면 article 클래스의 상단 영역에 맞추고자 하는 것이다. 조금만 더 깊에 들어가자면 snap area, snap position, scroll container와 같은 단어의 뜻을 알면 좋긴 하다만, 일단은 사용예제를 한번 보고 어떻게 써볼지에 대해 고민해보는것이 좋을 듯 하다.