css 속성 scroll-snap 간단 요약 정리
- IT/CSS
- 2022. 9. 22.
반응형
scroll-snap
- 페이지 스크롤 시 사용자에게 보여주고 싶은 영역에서 멈추게 해주는 기능
- 큰 이미지를 사용하는 풀스크린 레이아웃이나 갤러리용 상이트에 적용 하기 좋음.
scroll-snap 시 꼭 필요한 css 속성
- height:100vh;
- 감싸고 있는 영역의 높이와 요소의 높이를 100vh로 맞춰줘야한다.
scroll-snap-type 속성 값 종류
scroll-snap-type : | value 의미 |
x | 가로 방향 스크롤 시 빠르게 지나가거나 멈추게 할 수 있다. |
y | 세로 방향 스크롤 시 빠르게 지나가거나 멈추게 할 수 있다. |
both | 상하좌우 스크롤시 빠르게 지나가거나 멈추게 할 수 있다. |
scroll-snap-type 위치 지정
속성 종류 | 의미 |
mandatory | 현재 표시되는 영역이나 다음 영역 등 어느 한 부분이 표시된다. |
proximity | 경계선 근처로 움직였을 때 화면이 스크롤 되고 그렇지 않으면 중간 지점에서 멈춘다. |
scroll-snap-align 멈춤 기준 설정하기
scroll-snap-align | 의미 |
start | 다음 요소의 (맨 위쪽) 시작 지점에서 멈춘다. |
end | 다음 요소의 (맨 아래쪽) 끝나는 지점에서 멈춘다. |
center | 다음 요소의 정 가운데 지점점에서 멈춘다. |
반응형
scroll snap 예시
//Sass
.container{
scroll-snap-type: y proximity;
.item{
scroll-snap-align: start;
}
}
위와 같은 item1 에서 ~ 아래의 item 2로 넘어갈 때
위쪽의 1item의 여백이 살짝 있다면 알아서 2의 start 라인에 맞춰주는 역할을 한다.
-> 화면상에서 다음 item의 영역이 상당 수를 차지하면 다음 item으로 넘어가게끔 유도한 것이다.
css 제작에 도움이 되셨다면 공감 한 번 부탁드려요~
반응형
'IT > CSS' 카테고리의 다른 글
CSS 기초 내용 요약 (0) | 2022.09.10 |
---|---|
CSS 좋은 습관으로 깔끔하게 작성하기 (2) | 2022.08.18 |
CSS Dropdown menu 만들기 :hover 효과 이용하기 (0) | 2022.08.15 |