Scroll Snap
scroll snap은 웹 페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치에 자동으로 스냅되도록 하는 css 속성이다.
예를들어 유저가 페이지를 스크롤할 때 컨텐츠 중간에 멈춰버리면 콘텐츠의 일부분만 보이게 되는데, 이를 미리 설정한 위치로 자동 스냅하여 UX를 더욱 향상시키는 것이다.
scroll snap에는 4가지 속성이 있다.
- scroll-snap-type
- scroll-snap-align
- scroll-padding
- scroll-margin
scroll-snap-type
scroll-snap-type 속성은 스크롤 스냅이 동작하는 방식을 지정한다. 첫 번째 인자로 스냅이 적용될 축을 지정하고, 두 번째 인자로 스냅 적용 방식을 지정한다.
scroll-snap-align
scroll-snap-align 속성은 스크롤 스냅이 적용되는 요소가 스냅 위치에 정렬되는 방식을 지정한다. scroll-snap-type에서 지정한 축을 기준으로 snap area의 정렬을 정한다.
scroll-padding
scroll-padding 속성은 스크롤 영역의 패딩(padding)을 조정하는 속성이다. 이 속성을 사용하면 스크롤 스냅이 적용되는 영역을 확보할 수 있다.
scroll-margin
scroll-padding 과 마찬가지로 뷰 포트의 가짜 margin 영역을 지정하는 속성이다.
prefers-color-scheme
이 미디어 쿼리를 사용하면 웹 다크모드와 라이트모드 스타일링을 쉽게 적용할 수 있다.
@media (prefers-color-scheme: light) {
/* 라이트 모드에 적용할 스타일 정의 */
}@media (prefers-color-scheme: dark) {
/* 다크 모드에 적용할 스타일 정의 */
}