스크롤할때 다음 이미지에 자동으로 딱 멈춰주는 효과를 구현해보자! : scroll-snap-type 사용

스크롤시 다음 요소에 딱! 멈춰주는 듯한 효과를 CSS로 줘보자!

저번에 올렸던 prefers-color-scheme 을 통해 간단하게 다크모드를 구현했던것처럼 이번에도 간단한 방법이 있길래 올려봤어요!
홈페이지를 둘러보면 스크롤을 할때 무언가 탁탁 걸린듯한 원하는 item에 스크롤이 멈추는 효과가 적용되어있는 홈페이지가 있지 않나요?
이번에는 그 효과를 CSS를 통해서 간단한 문구 추가로 구현이 가능하기에 적어보았습니다 ^----^

---

HTML 코드 : 간단한 예제용

저는 간단한 예제를 본문에 첨부하기위해 하단과 같이 사용했어요!
클래스는 좀 더 직관적이게 [ slider_view / slider_move / item ] 라고 편하게 적었습니다~
* 사실 이래야 제가 보기 편했어요....

<div class="slider_view">  <!--이미지를 보여줄 영역-->
    <div class="slider_move"> <!--이미지가 담긴 틀을 움직여줄 영역-->
        <img class="item" src="../../../site/site1/assets/img/bg01_01.jpg" alt=""> <!--움직여질 n번 이미지-->
        <img class="item" src="../../../site/site1/assets/img/bg01_02.jpg" alt=""> <!--움직여질 n번 이미지-->
        <img class="item" src="../../../site/site1/assets/img/card_bg01_01.jpg" alt=""> <!--움직여질 n번 이미지-->
        <img class="item" src="../../../site/site1/assets/img/card_bg01_02.jpg" alt=""> <!--움직여질 n번 이미지-->
        <img class="item" src="../../../site/site1/assets/img/card_bg01_03.jpg" alt=""> <!--움직여질 n번 이미지-->
        <img class="item" src="../../../site/site1/assets/img/slider_bg01.jpg" alt=""> <!--움직여질 n번 이미지-->
        <img class="item" src="../../../site/site1/assets/img/slider_bg02.jpg" alt=""> <!--움직여질 n번 이미지-->
        <img class="item" src="../../../site/site1/assets/img/slider_bg03.jpg" alt=""> <!--움직여질 n번 이미지-->
    </div>
</div>

---

CSS 코드 : 간단한 예제용

1. 부모요소에 "scroll-snap-type" 을 정하셔야 아이템 요소에 적용이 가능해요.
2. 부모요소에 적용한 속성은 "x(가로) 또는 y(세로)" + mandatory 로 설정해 사용하세요!
3. 각 이미지에 "scroll-snap-align" 을 "start"로 설정해주세요! * 저는 예시에 사용한 이미지의 크기(높이/너비)가 각각 달라서 item에 추가적으로 아래와 같은 설정을 하였습니다. * object-fit: cover = 요소에 정해놓은 크기에 가능한 맞게끔 조정되고 정 비율로 확대시켜 줍니다.

.slider_view{
    overflow: hidden;
    width: 400px;
    height: 274px;
}
.slider_move{
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}
.slider_move_vertical{
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
}
.item{
    width: 400px;
    object-fit: cover;
    scroll-snap-align: start;
}

완성!

저번 다크모드에 이어 이번것도 이게 전부라서 글을 올려봤어요...🙄💦
그래도 간단한 방법을 통해 js 없이 고급스러운 방식을 구현 할 수 있다는것에 초점을 맞춰보면
나중에 필요하실때 사용하시면 좋을거 같아요 😚

scroll-snap-type : x mandatory

가로 스크롤(X축) 입니다.

* PC버전에서 스크롤시 SHIFT을 누른 상태에서 스크롤을 하셔야합니다.

scroll-snap-type : y mandatory

세로 스크롤(Y축) 입니다.

* 마우스로 그냥 스크롤 하시면 됩니다.