00:00 시작 00:10 완성본예시 01:06 HTML, CSS 구조 확인 02:20 aspect-ratio 02:53 cursor 이미지로 변경하기 04:17 cursor HTML 추가 05:02 cursor CSS 09:07 mousemove 이벤트 11:58 cursor에 확대 효과 추가
기본 커서는 숨기고, 커서의 움직임에 따라 같이 이동할 요소를 생성하고 구현합니다. javascript를 통해 구현하는 방법을 학습해보세요.
이 동영상은 JavaScript의 animate 함수와 easing을 활용하여 무한 슬라이드를 구현하는 방법을 설명하고 있다. 슬라이드는 왼쪽으로 움직이며, 순환되어 다시 오른쪽에서 나타난다. 페이저를 클릭하면 해당 슬라이드가 움직이는 기능도 있다.
✨ 하이라이트
[00:10](https://www.youtube.com/watch?v=B98b6xXh7PY&t=10) 이 섹션에서는 무한 슬라이드를 구현하는 방법에 대해 설명합니다.- 완성된 버전을 보여주고, 슬라이드가 왼쪽으로 움직이는 것을 보여줍니다. - 슬라이드를 클릭할 때마다 해당 슬라이드가 오른쪽에서 들어옵니다. - 슬라이드 컨테이너에는 가로로 정렬된 슬라이드들이 있으며, 오른쪽으로 넘어가는 슬라이드는 가려진 상태입니다. - 자바스크립트의 Animate 함수를 사용하여 슬라이드를 움직입니다.
[04:17](https://www.youtube.com/watch?v=B98b6xXh7PY&t=257) 슬라이드 컨테이너를 기준으로 모든 슬라이드가 절대값으로 한 곳에 모이게 하고, 현재 활성화된 슬라이드는 검은색으로 처리됩니다.- 페이저는 슬라이드의 개수에 따라 4개의 A 태그를 가지고 있으며, 현재 활성화된 슬라이드는 검은색으로 표시됩니다. - 슬라이드에는 절대 위치를 주어야 하며, 이때 위치는 슬라이드 래퍼를 기준으로 결정됩니다. - 슬라이드의 높이도 모든 요소와 동일하게 설정되어야 하며, 부모 요소의 높이를 기준으로 설정됩니다. - 페이저는 중앙에 위치하며, 내부 요소를 가운데 정렬합니다.
[08:34](https://www.youtube.com/watch?v=B98b6xXh7PY&t=514) JavaScript로 변수와 산술 연산을 결합하여 문장을 만들 때, 백틱과 % 기호를 사용해야 한다.- idx 변수 이름을 100으로 곱하여 0일 때는 0, 1일 때는 100, 2일 때는 200이 되도록 한다. - 화면을 확인하면 1이 나타나고, 오른쪽에 숫자 2가 있으며, 오른쪽에 숫자 3이 있다. - pager를 생성하기 위해 번호에 따라 pager를 생성해야 한다. - 반복문이 실행될 때마다 A 태그가 생성되고, 최종적으로 pager라는 요소에 HTML로 추가된다.
[12:52](https://www.youtube.com/watch?v=B98b6xXh7PY&t=772) addEventListener를 사용하여 클릭 이벤트를 처리하는 방법에 대해 설명합니다.- 클릭 이벤트가 발생한 객체는 'E'라는 매개변수로 전달됩니다. - preventDefault를 사용하여 기본 동작을 막을 수 있습니다. - MoveSlide 함수는 인덱스 번호에 따라 슬라이드를 이동시킵니다. - 현재 인덱스 번호와 전달된 번호를 비교하여 동작을 결정합니다.
[17:08](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1028) animate 함수의 옵션에는 지연, 시작 시간, 방향, 기간, 이징 등이 포함될 수 있다.- 옵션에는 지연, 시작 시간, 방향, 기간, 이징 등이 포함될 수 있다. - 이징에는 cubicBezier의 속도 모델을 추가할 수 있다. - 애니메이션의 fill-mode는 기본적으로 back이다.
[21:23](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1283) 이 섹션에서는 일반적으로 사용되는 easing을 추가하는 방법을 설명합니다.- easings.net에서 일반적으로 사용되는 easing을 확인합니다. - cubic-bezier 값을 복사하여 사용합니다. - 현재 슬라이드와 다음 슬라이드에 left 값 변경을 적용합니다. - 애니메이션의 fill mode를 forwards로 설정하여 정지합니다.
[25:42](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1542) 자동 슬라이드를 구현하기 위해 setInterval 함수를 사용하여 일정 시간마다 다음 슬라이드를 보여주는 함수를 생성한다.- setInterval 함수를 사용하여 일정 시간마다 작업을 수행한다. - 다음 인덱스를 생성하여 현재 인덱스에 1을 더한다. - 슬라이드의 개수로 나눈 나머지를 다음 인덱스로 선택한다.