-
CSS scroll-snap 속성을 이용하여 스와이퍼 구현하기Front-end/CSS 2020. 11. 13. 01:18
scroll-snap
scroll-snap은 사용자가 터치 혹은 스크롤 조작을 하였을 때 offset을 설정할 수 있는 속성입니다.
예를들면 에어비앤비 모바일 환경의 숙소 사진을 볼 때 스와이퍼 형태가 바로 이런 방식인데요, 볼 때는 많은 기능들이 들어간 것 같지만 scroll-snap을 사용하면 쉽게 구현할 수 있습니다.
위의 기능을 똑같이 구현해보면서 사용법을 익혀보겠습니다. 예제는 iPhoneX를 기준으로 구현하였습니다.
❗️ 이 글은 개인적으로 학습한 정보와 지식을 토대로 작성된 글입니다. 혹시 잘못된 부분이 있거나 수정사항이 있다면 말씀해주시면 반영하겠습니다. 🙏
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slider</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="slide-container"> <div class="slider"> <div class="img"> <img src="https://images.unsplash.com/photo-1604928141064-207cea6f571f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"/> </div> <div class="img"> <img src="https://images.unsplash.com/photo-1604769283067-12509928fdb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"/> </div> <div class="img"> <img src="https://images.unsplash.com/photo-1600073956897-4fc08a2b27d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"/> </div> <div class="img"> <img src="https://images.unsplash.com/photo-1603565671981-5d4986360d6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"/> </div> </div> </div> </body> </html>슬라이더를 전체를 감싸는 컨테이너 하나, 그리고 이미지들을 감싸는 슬라이더, 그리고 이미지를 감싸는 박스 하나를 만들고 임의의 이미지 4개를 배치하였습니다.
이렇게 마크업한 화면은 아래와 같이 나올 것입니다.
특별한 것 없이 이미지들이 본인 크기에 맞게 나열된 모습이죠?
이제 이걸 하나씩 스타일링 해보겠습니다.
index.css
먼저 세로로 정렬되어있는 이미지들을 오른쪽 정렬 해주겠습니다.
.slider { display: flex; }scroll-snap-type
여기서 첫 번째 scroll-snap 속성이 나오는데요, 이는 바로 scroll-snap-type입니다.
이 속성의 역할은 축과 엄격도를 선언할 수 있습니다.
축에는 대표적으로 x, y축이 있어서 선언하는 축으로 스냅이 가능합니다.
엄격도에는 proximity와 mandatory가 있는데 mandatory는 항상 스냅한다는 의미입니다. 만약 항상 스냅하지 않는다면 기본적으로 proximity가 설정이 되는데요 이는 축에 따라서 자동으로 맞추어져 스냅하게 됩니다.
즉 우리는 오른쪽으로 스와이프를 하려고 하니 x축을 선언하고 항상 스냅을 해야하니 mandatory를 선언하면 되겠죠?
또한 넘치는 이미지는 숨기기 위해 overflow를 선언해줍니다.
.slider { display: flex; overflow: auto; scroll-snap-type: x mandatory; }여기까지 중간점검을 한 번 해보겠습니다.
.
.
.
오른쪽 정렬이 됐고, x축으로 스크롤이 되네요!
그런데 지금은 사진의 크기도 제각각이고 9시 방향 모서리에 맞지 않게 나오고있습니다. 이제 이 부분을 해결해보겠습니다.
먼저 사진들의 width와 height를 맞추어보겠습니다.
.slider { display: flex; overflow: auto; scroll-snap-type: x mandatory; } .img { flex: none; width: 100%; } .img img { display: block; width: 100%; height: 100%; }이미지를 감싸고 있는 컨테이너는 flex: none을 통해서 각각 width와 height에 맞춰 동일하게 설정되도록 하였고 이미지는 동일하게 따라가도록 하였습니다.
크기가 잘 맞추어졌는지 확인해볼까요?
.
.
.
이미지들의 크기가 으리번쩍하게 잘 통일이 됐네요!
이제 마지막 관문인 스냅시 크기에 맞주는 일만 남았습니다.
scroll-snap-align
scroll-snap-align은 스냅이 되었을 때 정렬해주는 속성입니다. 즉, 스냅을 할 때 그 상태에서의 정렬을 해주는 친구라는거죠!
none, start, center, end 네 가지의 값이 있는데요 단어만 봐도 느낌이 올 것만 같습니다.
지금 적용해야하는건 뭘까요?
start의 느낌이 물씬 풍깁니다.
.slider { display: flex; overflow: auto; scroll-snap-type: x mandatory; } .img { flex: none; scroll-snap-align: start; width: 100%; } .img img { display: block; width: 100%; height: 100%; }이미지를 가지고 있는 컨테이너의 시작점을 기준으로 정렬을 해야하므로 감싸고 있는 컨테이너에 선언을 해주었습니다.
이제 스냅 후 정렬이 되는지 확인해보겠습니다.
.
.
.
풍경들이 아주 끝내주네요...
여기서 뭔가 눈에 거슬리는게 있죠? 바로 하단에 스크롤바인데요
크게 어려울 것 없이 없앨 수 있습니다.
.slider { display: flex; overflow: auto; scroll-snap-type: x mandatory; } .slider::-webkit-scrollbar { display: none; } .img { flex: none; scroll-snap-align: start; width: 100%; } .img img { display: block; width: 100%; height: 100%; }슬라이더 컨테이너에 scrollbar를 display: none 처리해주면 간단하게 처리가 가능합니다.
최종적으로는??
.
.
.
위 이미지들처럼 멋진 슬라이더가 완성되게 됩니다.
'Front-end > CSS' 카테고리의 다른 글
[CSS Pattern] 탭(Tab) 패턴 (0) 2020.07.23 [CSS Pattern] 도트(Dot) 패턴 (0) 2020.07.23 CSS3 간단한 총정리 (2) 2020.06.30