터치 동작

터치 동작 (Touch Action)

터치스크린에서 요소가 어떻게 스크롤(팬)되고 확대(핀치 줌)될 수 있는지를 제어하는 유틸리티예요. 터치 제스처의 기본 동작을 세밀하게 조정할 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

touch-auto touch-action: auto;

touch-none touch-action: none;

touch-pan-x touch-action: pan-x;

touch-pan-left touch-action: pan-left;

touch-pan-right touch-action: pan-right;

touch-pan-y touch-action: pan-y;

touch-pan-up touch-action: pan-up;

touch-pan-down touch-action: pan-down;

touch-pinch-zoom touch-action: pinch-zoom;

touch-manipulation touch-action: manipulation;

예시 (Examples)

기본 예제 (Basic example)

touch-pan-y, touch-pinch-zoom 같은 유틸리티를 사용하면 터치스크린에서 요소가 어떻게 스크롤(팬)되고 확대(핀치 줌)될 수 있는지 제어할 수 있어요.

<div class="h-48 w-full touch-auto overflow-auto ...">
  <img class="h-auto w-[150%] max-w-none" src="..." />
</div><div class="h-48 w-full touch-none overflow-auto ...">
  <img class="h-auto w-[150%] max-w-none" src="..." />
</div><div class="h-48 w-full touch-pan-x overflow-auto ...">
  <img class="h-auto w-[150%] max-w-none" src="..." />
</div><div class="h-48 w-full touch-pan-y overflow-auto ...">
  <img class="h-auto w-[150%] max-w-none" src="..." />
</div>

반응형 디자인 (Responsive design)

touch-action 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<div class="touch-pan-x md:touch-auto ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.