HTML
<!-- 스와이프 슬라이드메뉴 -->
<div class="swiper-wrapper">
<div class="swiper-container">
<div class="swiper-slide"><img src="img/swiper-1.jpg" /></div>
<div class="swiper-slide"><img src="img/swiper-2.jpg" /></div>
<div class="swiper-slide"><img src="img/swiper-3.jpg" /></div>
<div class="swiper-slide"><img src="img/swiper-4.jpg" /></div>
<div class="swiper-slide"><img src="img/swiper-5.jpg" /></div>
<div class="swiper-slide"><img src="img/swiper-6.jpg" /></div>
<div class="swiper-slide"><img src="img/swiper-7.jpg" /></div>
<div class="swiper-slide"><img src="img/swiper-8.jpg" /></div>
<div class="swiper-slide"><img src="img/swiper-9.jpg" /></div>
<div class="swiper-slide"><img src="img/swiper-10.jpg" /></div>
</div>
</div>
수정전 CSS
// 많은 상품 스와이프
.swiper-wrapper {
// flex-wrap: wrap; 이걸 사용하면 아이템들이 컨테이너의 너비를 초과할 경우 다음 줄로 넘어가게 됨
overflow: hidden;
.swiper-container {
display: flex;
width: 100vw;
justify-content: space-around;
}
.swiper-slide {
// flex: 0 0 auto;
img {
width: 20vw;
height: 20vw;
}
}
}
e.clientX 의 사용
마우스의 좌표 알고 싶을 때 - e.clientX
= 현재 마우스의 좌표 출력
$(".swiper-slide")
.eq(0)
.on("mousemove", function (e) {
console.log(e.clientX); //마우스의 좌표 알려줌.
});
왼쪽으로 갈 수록 0 에 가까워짐
오른쪽으로 갈 수록 숫자가 커짐.
mousemove 리스너에 달아 놨기 때문에
마우스 움직일 때마다 마우스 좌표 잘 알려줌.
= 유저가 얼마나 사진을 드래그 했는지 그런 것도 알 수 있다.
e.clientX 의 사용 목적과 콜백함수 안에 들은 e 파라미터 의 의미.
e 파라미터의 의미
e는 이벤트 객체(event object)입니다.
마우스 이벤트(예: mousedown, mousemove, mouseup)가 발생할 때
브라우저가 자동으로 이 객체를 생성하고 이벤트 핸들러 함수에 전달합니다.
이 객체에는 이벤트와 관련된 다양한 정보가 포함되어 있습니다.
이벤트 객체(e)란?
웹 페이지에서 어떤 일이 발생할 때(예: 클릭, 마우스 이동, 키보드 입력 등)
브라우저는 이를 감지하고 처리해야 합니다. 이러한 일을 "이벤트"라고 합니다.
이벤트가 발생할 때마다 브라우저는 해당 이벤트에 대한 정보를 담은 객체를 생성합니다.
이 객체를 "이벤트 객체"라고 부릅니다.
e 파라미터
e는 이벤트 객체를 가리키는 변수 이름입니다.
이벤트 핸들러 함수가 호출될 때 이 객체가 함수의 인자로 전달됩니다.
이벤트 객체에는 다양한 정보와 속성이 포함되어 있어서, 이벤트가 어떻게 발생했는지,
어떤 요소에서 발생했는지, 마우스의 위치는 어디인지 등의 세부 정보를 알 수 있습니다.
이벤트 객체가 왜 중요한가?
이벤트 객체는 이벤트 핸들러 함수가 이벤트에 대한 세부 정보를 얻고,
이를 바탕으로 적절한 처리를 할 수 있도록 도와줍니다.
예를 들어, 클릭된 위치, 키보드 입력 값, 마우스의 현재 위치 등을 알 수 있습니다.
e.clientX의 의미
e.clientX는 마우스 이벤트가 발생한 시점의 마우스 포인터의 X 좌표를 나타냅니다.
이 값은 브라우저의 클라이언트 영역(즉, 페이지의 좌측 상단 모서리)을 기준으로 합니다.
사용 목적
e.clientX를 사용하면 마우스 포인터의 위치를 정확히 알 수 있습니다.
이를 통해 드래그 앤 드롭 기능이나 마우스를 이용한 다른 인터랙션을 구현할 때 유용합니다.
mouse 이벤트
mousedown (어떤 요소에 마우스버튼 눌렀을 때)
mouseup (어떤 요소에 마우스버튼 뗐을 때)
mousemove (어떤 요소위에서 마우스 이동할 때)
mousedown 이벤트
- 발생 시점: 사용자가 마우스 버튼을 눌렀을 때 발생합니다.
- 주요 용도: 드래그 동작을 시작하거나 클릭 이벤트를 처리할 때 주로 사용됩니다.
예를 들어, 드래그 앤 드롭 기능을 구현할 때, 사용자가 마우스 버튼을 누르는 순간(mousedown)
드래그 동작을 시작한다고 알릴 수 있습니다.
mousemove 이벤트
- 발생 시점: 마우스 포인터가 움직일 때마다 지속적으로 발생합니다.
- 주요 용도: 마우스 포인터의 움직임을 추적하거나 드래그 동작 중 마우스의 위치를 업데이트할 때 사용됩니다.
드래그 앤 드롭 기능을 계속해서 업데이트하려면,
사용자가 마우스 버튼을 누른 상태에서 마우스를 움직일 때(mousemove)
마우스 위치를 지속적으로 추적하여 UI 요소를 이동시킬 수 있습니다.
마우스 드래그 이동 거리 파악하기
변수에 저장해서 빼보기.
함수 (시작좌표를) 전역변수로 빼서
* 전역변수 = 모든함수에서 갖다 쓸 수 있게 바깥에 만들어 놓는 것.
var 시작좌표 = e.clientX
// 많은 상품 스와이프
var 시작좌표 = 0;
$(".swiper-slide")
.eq(0)
.on("mousedown", function (e) {
시작좌표 = e.clientX;
});
$(".swiper-slide")
.eq(0)
.on("mousemove", function (e) {
console.log(시작좌표 - e.clientX);
});
mousedown 하고 mousemove를 사용한 이유
// 많은 상품 스와이프
var 시작좌표 = 0;
$(".swiper-slide")
.eq(0)
.on("mousedown", function (e) {
console.log((시작좌표 = e.clientX));
});
// $(".swiper-slide")
// .eq(0)
// .on("mousemove", function (e) {
// console.log(시작좌표 - e.clientX);
// });
사용자가 첫 번째 슬라이드를 클릭한 후
마우스를 움직일 때 슬라이드의 움직임을 추적하기 위해서.
mousedown 이벤트
- 발생 시점: 사용자가 마우스 버튼을 눌렀을 때.
- 이벤트 처리 목적:
- 시작 좌표 설정: 드래그 동작을 시작하는 시점에서 마우스의 X 좌표를 저장합니다. 이를 통해 드래그 시작 위치를 기준으로 마우스가 얼마나 이동했는지를 계산할 수 있습니다.
mousemove 이벤트
- 발생 시점: 마우스 포인터가 움직일 때마다.
- 이벤트 처리 목적:
- 이동 거리 계산: mousedown 이벤트에서 저장한 시작 좌표와 현재 마우스의 X 좌표를 비교하여 마우스가 얼마나 이동했는지를 계산합니다.
- 드래그 동작 추적: 마우스가 움직이는 동안 이동한 거리를 콘솔에 출력하여, 나중에 이 값을 사용해 슬라이드를 실제로 움직일 수 있습니다.
코드 설명
- mousedown 이벤트:
- 사용자가 첫 번째 슬라이드를 클릭하면 mousedown 이벤트가 발생합니다.
- 이 시점에서 드래그 시작 좌표(시작좌표)를 e.clientX 값으로 저장합니다.
- e.clientX는 마우스 포인터의 X 좌표를 나타냅니다.
- mousemove 이벤트:
- 사용자가 마우스를 움직이면 mousemove 이벤트가 발생합니다.
- mousedown 이벤트에서 저장한 시작 좌표와 현재 마우스의 X 좌표(e.clientX)를 비교하여 마우스의 이동 거리를 계산합니다.
- 이 이동 거리(시작좌표 - e.clientX)를 콘솔에 출력합니다.
전역변수에 대해서
<script>
var 시작좌표 = 0;
$('.slide-box').eq(0).on('mousedown', function(e){
시작좌표 = e.clientX;
});
$('.slide-box').eq(0).on('mousemove', function(e){
console.log(e.clientX - 시작좌표)
});
</script>
전역변수의 의미와 사용
( 지역변수와 차이 )
- 전역 변수 (Global Variable):
- 전역 변수는 코드 전체에서 접근할 수 있는 변수입니다.
- 자바스크립트에서는 함수 밖에서 선언된 변수는 모두 전역 변수로 간주됩니다.
- 전역 변수는 웹 페이지의 모든 스크립트에서 접근할 수 있기 때문에 실수로 값을 변경하거나 덮어쓰는 일이 발생할 수 있습니다.
- 지역 변수 (Local Variable):
- 지역 변수는 특정 코드 블록(주로 함수) 안에서만 접근할 수 있는 변수입니다.
- 지역 변수는 함수가 실행될 때 생성되고, 함수가 끝나면 사라집니다.
- 이런 변수는 함수 내부에서만 접근할 수 있기 때문에 함수 밖에서는 사용할 수 없습니다.
- mousedown 이벤트 핸들러에서 시작좌표에 값을 저장합니다.
- mousemove 이벤트 핸들러에서 시작좌표를 사용하여 현재 마우스 위치와의 차이를 계산합니다.
mousemove 이벤트에서 시작좌표가 의미하는 것.
= 의문) 시작좌표가 0인데 0을 빼는 건가?
<script>
var 시작좌표 = 0;
$('.slide-box').eq(0).on('mousedown', function(e){
시작좌표 = e.clientX;
});
$('.slide-box').eq(0).on('mousemove', function(e){
console.log(e.clientX - 시작좌표);
});
</script>
여기서 var 시작좌표 = 0;는 초기 값을 0으로 설정하는 것입니다.
즉, 처음에는 시작좌표가 0을 가집니다. 하지만 이것은 변수가 선언될 때의 초기 값일 뿐이고,
나중에 이 변수의 값을 변경할 수 있습니다.
$('.slide-box').eq(0).on('mousedown', function(e){
시작좌표 = e.clientX;
});
이 부분은 사용자가 .slide-box 요소를 마우스로 누를 때 실행됩니다.
mousedown 이벤트가 발생할 때, e.clientX는 마우스를 누른 지점의 X 좌표를 의미합니다.
이 좌표 값을 시작좌표 변수에 저장합니다.
즉, 마우스를 눌렀을 때의 X 좌표가 시작좌표가 되는 것입니다.
$('.slide-box').eq(0).on('mousemove', function(e){
console.log(e.clientX - 시작좌표);
});
이 부분은 사용자가 마우스를 움직일 때 실행됩니다.
e.clientX는 마우스를 움직이는 현재 지점의 X 좌표를 의미합니다.
여기서 e.clientX - 시작좌표는 마우스를 누른 지점(시작좌표)과
현재 마우스 위치(e.clientX)( 드래그하면서 이동한 현재 마우스 위치 ) 사이의 거리를 계산하는 것입니다.
- 처음에 var 시작좌표 = 0;라고 선언합니다. 초기값은 0이지만, 이것은 이후에 변경될 수 있습니다.
- 사용자가 .slide-box를 클릭하여 mousedown 이벤트가 발생하면,
- 시작좌표는 e.clientX 값으로 변경됩니다. 예를 들어, 사용자가 X 좌표 100에서 클릭했다면 시작좌표는 100이 됩니다.
- 사용자가 마우스를 움직이면 mousemove 이벤트가 발생합니다.
- 이 때 e.clientX는 현재 마우스의 X 좌표입니다.
- 예를 들어, 현재 X 좌표가 150이라면, e.clientX - 시작좌표는 150 - 100이 되어 50이 됩니다.
- 이는 사용자가 클릭한 위치에서 50만큼 오른쪽으로 움직였음을 의미합니다.
전체 흐름 다시 보기
- 초기 상태: var 시작좌표 = 0;
- 시작좌표의 값은 0입니다.
- 사용자가 .slide-box를 클릭: mousedown 이벤트 발생
- 예를 들어, 사용자가 X 좌표 200에서 클릭했다고 가정합니다.
- 시작좌표 = e.clientX이 실행되고, 시작좌표의 값은 200이 됩니다.
- 사용자가 마우스를 움직임: mousemove 이벤트 발생
- 예를 들어, 현재 마우스 위치가 X 좌표 250이라고 가정합니다.
- e.clientX - 시작좌표는 250 - 200이 되어, 결과는 50입니다.
- 이 값이 console.log에 의해 출력됩니다.
중요한 점
- 전역 변수 시작좌표는 한 번 값이 설정되면, 그 값은 프로그램 전체에서 접근 가능하고 유지됩니다.
- mousedown 이벤트 핸들러에서 시작좌표의 값을 변경하면,
- 이 변경된 값은 다른 이벤트 핸들러 (mousemove 등)에서도 접근할 수 있습니다.
- 따라서, mousedown 이벤트 핸들러에서 설정된 시작좌표의 값은
- mousemove 이벤트 핸들러에서 사용할 수 있습니다.
이런 식으로 전역 변수의 값이 한 번 변경되면,
그 변경된 값은 프로그램의 다른 부분에서도 접근하고 사용할 수 있기 때문에,
두 번째 함수에서도 변경된 값이 영향을 미치는 것입니다.
'> 포트폴리오 > wiggle wiggle' 카테고리의 다른 글
[JS/CSS] 드래그와 터치되는 캐러셀 만들기 (2) (0) | 2024.07.06 |
---|---|
[SCSS] 지나가는 전광판 만들기 (0) | 2024.07.02 |
[SCSS] 검색창 만들기 ( search ) (0) | 2024.07.01 |
[SASS] aside 메뉴 만들기 ( position 사용 ) (0) | 2024.06.23 |
[SASS] 로고와 메뉴바 위치 지정하기 (display:flex) (0) | 2024.06.21 |