deg, clientX, clientY

      if(e.clientX >= left && e.clientX <=right){
     
      const x = e.clientX - left;

      $handle.style.transform = `translate3d(${x}px,0, 0)`;
      $fill.style.width = `${(100/width) * x}%`;

      const deg = `${(360/width)*x}`

      $gradient.style.backgroundImage = `linear-gradient(${deg}deg, #f1a829, #f14429)`;
      $gradientAngle.textContent = Math.floor(deg)

x변수에 이벤트발생한친구의 clinetX에서, 좌측요소만큼 빼서 할당,

clinentX란? 메소드였네 브라우저 기준좌표

핸들이란 친구의 트랜스폼 스타일을 , translate3d = (css 함수, '이동'시킴, x,y,z) 여기선

좌우 이동만하기때문에 x값만 대입 

 

게이지는 최대 100%

fill에는 width속성이있는데, 애는 게이지바를 100를, %로 나눠서 ,현위치를 곱해서, %화 시킨다 

100/뷰포트 위치 * 고정상수값 ex, 시작점 360, 40만큼이동

100/360 * 40 = xx.xxxxx%

deg 회전각은 최대 360도,

나머지는 속성값인데, 소수점이 나와서 버림 Math.floor메소드 사