scroll-snap-align

scroll-snap-align

scroll-snap-align 유틸리티는 스냅 컨테이너 안에서 스크롤할 때 요소가 어디에 스냅(snap)될지를 결정해 줘요. 시작점(start), 가운데(center), 끝(end) 중에서 고를 수 있어요.

출처: 문서

본문

클래스 스타일 (ClassStyles)

예시 (Examples)

가운데로 스냅하기 (Snapping to the center)

snap-center 유틸리티를 사용하면 스냅 컨테이너 안에서 스크롤될 때 요소가 그 가운데로 스냅돼요:

<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>

시작점으로 스냅하기 (Snapping to the start)

snap-start 유틸리티를 사용하면 스냅 컨테이너 안에서 스크롤될 때 요소가 그 시작점으로 스냅돼요:

<div class="snap-x ...">
  <div class="snap-start ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>

끝점으로 스냅하기 (Snapping to the end)

snap-end 유틸리티를 사용하면 스냅 컨테이너 안에서 스크롤될 때 요소가 그 끝점으로 스냅돼요:

<div class="snap-x ...">
  <div class="snap-end ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>

반응형 디자인 (Responsive design)

scroll-snap-align 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<div class="snap-center md:snap-start ...">
  <!-- ... -->
</div>

더 알아보기 (Learn more)

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.