touch-action
터치 제스처의 브라우저 기본 동작을 제어합니다. tan으로 모든 터치 동작을 비활성화하거나, tapx/tapy로 특정 방향의 스크롤만 허용할 수 있습니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
taa | touch-action: auto | 기본값. 모든 터치 제스처 허용 |
tan | touch-action: none | 모든 터치 제스처 비활성화 |
tapx | touch-action: pan-x | 수평 스크롤만 허용 |
tapy | touch-action: pan-y | 수직 스크롤만 허용 |
클래스별 상세
taatouch-action: auto
브라우저 기본값입니다. 모든 터치 제스처(스크롤, 줌, 패닝 등)가 정상적으로 동작합니다.
<!-- 기본 터치 동작 -->
<div class="taa">
모든 터치 제스처가 정상 동작합니다.
</div>tantouch-action: none
모든 터치 제스처의 브라우저 기본 동작을 비활성화합니다. 커스텀 제스처 핸들링(드래그, 스와이프, 핀치 줌 등)을 직접 구현할 때 사용합니다. 캔버스, 지도, 드래그 앤 드롭 영역 등에 적합합니다.
<!-- 캔버스: 커스텀 제스처 처리 -->
<canvas class="tan w100p h40rem bg18181B br8px">
<!-- JS로 터치 이벤트를 직접 처리 -->
</canvas>
<!-- 드래그 앤 드롭 영역 -->
<div class="tan p2rem bg0F0F17 br8px cp">
<p>이 영역은 드래그로 동작합니다</p>
</div>
<!-- 지도 컨테이너 -->
<div class="tan w100p h30rem br8px oh">
<div class="map-container">커스텀 지도 인터랙션</div>
</div>접근성 주의
tan은 모든 터치 동작을 차단합니다. 필요한 영역에만 최소한으로 적용하고, 반드시 JavaScript로 대체 인터랙션을 제공하세요.
tapxtouch-action: pan-x
수평(좌우) 스크롤만 허용합니다. 수직 스크롤과 핀치 줌은 차단됩니다. 가로 스와이프 캐러셀이나 슬라이더에서 세로 스크롤 간섭을 방지할 때 유용합니다.
<!-- 가로 스와이프 캐러셀 -->
<div class="tapx oxa df gap16px p16px">
<div class="fs0 w28rem h20rem bg6366F1 br8px df jcc aic cFFFFFF">Slide 1</div>
<div class="fs0 w28rem h20rem bg6366F1 br8px df jcc aic cFFFFFF">Slide 2</div>
<div class="fs0 w28rem h20rem bg6366F1 br8px df jcc aic cFFFFFF">Slide 3</div>
</div>tapytouch-action: pan-y
수직(상하) 스크롤만 허용합니다. 수평 스크롤과 핀치 줌은 차단됩니다. 세로로만 스크롤해야 하는 영역에서 좌우 스와이프 제스처를 직접 처리할 때 사용합니다.
<!-- 세로 스크롤만 허용 (좌우 스와이프는 JS 처리) -->
<div class="tapy oya h40rem p2rem bg0F0F17 br8px">
<p>위아래로만 스크롤됩니다.</p>
<p>좌우 스와이프는 JS로 페이지 전환 등을 처리합니다.</p>
</div>자주 쓰는 패턴
| 상황 | 추천 | 이유 |
|---|---|---|
| 캔버스 / 드로잉 | tan | 모든 터치를 JS로 직접 처리 |
| 지도 / 인터랙티브 뷰어 | tan | 핀치 줌, 드래그를 커스텀 처리 |
| 가로 캐러셀 | tapx | 가로 스와이프 허용, 세로 스크롤 차단 |
| 세로 리스트 + 스와이프 삭제 | tapy | 세로 스크롤 허용, 가로 스와이프를 JS로 처리 |
| 드래그 앤 드롭 | tan | 드래그 중 스크롤 방지 |
팁 & 주의사항
300ms 딜레이 제거
tan을 적용하면 브라우저의 더블탭 줌 감지를 위한 300ms 터치 딜레이가 제거됩니다. 빠른 터치 반응이 필요한 UI에 유용합니다.
데스크탑에서는 무시됨
touch-action은 터치 디바이스에서만 동작합니다. 마우스 이벤트에는 영향을 주지 않으므로, 데스크탑에서 별도의 처리가 필요하지 않습니다.
최소 범위 적용
tan은 강력하지만, 페이지 전체에 적용하면 스크롤이 불가능해집니다. 반드시 필요한 요소에만 적용하세요.