[javascript] 터치 이벤트를 사용하여 터치한 위치에 따라 동적으로 CSS 속성을 변경하는 방법은?

12 Dec 2023

javascript

1. 터치 이벤트 등록하기

먼저, 터치 이벤트를 등록해야 합니다. 이를 위해 addEventListener 메서드를 사용하여 touchstart, touchmove, 또는 touchend 이벤트에 대한 핸들러를 등록합니다.

document.addEventListener('touchmove', handleTouchMove);

2. 터치 위치 확인하기

이제, 터치 이벤트 핸들러에서 터치한 위치를 확인해야 합니다. event.touches를 사용하여 터치 이벤트 정보를 가져올 수 있습니다.

function handleTouchMove(event) {
  // 첫 번째 터치 위치 가져오기
  const touchX = event.touches[0].clientX;
  const touchY = event.touches[0].clientY;

  // 터치한 위치를 기반으로 CSS 속성 변경하기
  updateElementStyle(touchX, touchY);
}

3. CSS 속성 변경하기

터치한 위치를 기반으로 CSS 속성을 동적으로 변경할 수 있습니다. 예를 들어, 터치한 위치에 따라 요소의 배경색이 변경되도록 설정할 수 있습니다.

function updateElementStyle(x, y) {
  const element = document.getElementById('targetElement');
  const hue = (x / window.innerWidth) * 360; // 터치한 x 위치에 따라 색상 변경
  const saturation = (y / window.innerHeight) * 100; // 터치한 y 위치에 따라 채도 변경

  element.style.backgroundColor = `hsl(${hue}, ${saturation}%, 50%)`;
}

이제, 터치한 위치에 따라 동적으로 CSS 속성을 변경할 수 있는 방법을 알아보았습니다. 터치 이벤트를 활용하여 인터랙티브한 웹 애플리케이션을 개발하는 데 활용할 수 있습니다.