scroll-snap-type

scroll-snap-type 유틸리티는 스냅 컨테이너에 스크롤 스냅(scroll snap)을 활성화하고, 그 엄격함(strictness)을 결정해 줘요.

출처: 문서

본문

클래스 스타일 (ClassStyles)

클래스	CSS
`snap-none`	`scroll-snap-type: none;`
`snap-x`	`scroll-snap-type: x var(--tw-scroll-snap-strictness);`
`snap-y`	`scroll-snap-type: y var(--tw-scroll-snap-strictness);`
`snap-both`	`scroll-snap-type: both var(--tw-scroll-snap-strictness);`
`snap-mandatory`	`--tw-scroll-snap-strictness: mandatory;`
`snap-proximity`	`--tw-scroll-snap-strictness: proximity;`

예시 (Examples)

가로 스크롤 스냅 (Horizontal scroll snapping)

snap-x 유틸리티를 사용하면 요소 안에서 가로 스크롤 스냅을 활성화할 수 있어요:

<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>

스크롤 스냅이 동작하려면 자식 요소에도 스크롤 스냅 정렬(scroll snap alignment)을 설정해야 해요.

엄격한 스크롤 스냅 (Mandatory scroll snapping)

snap-mandatory 유틸리티를 사용하면 스냅 컨테이너가 항상 스냅 지점에서 멈추도록 강제할 수 있어요:

<div class="snap-x snap-mandatory ...">
  <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>

가까운 스냅 지점에 멈추기 (Proximity scroll snapping)

snap-proximity 유틸리티를 사용하면 스냅 컨테이너가 가까이 있는 스냅 지점에서 멈추도록 만들 수 있어요:

<div class="snap-x snap-proximity ...">
  <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>

반응형 디자인 (Responsive design)

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

<div class="snap-none md:snap-x ...">
  <!-- ... -->
</div>

더 알아보기 (Learn more)

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