Rock's Ezweb

 JavaScript의 animate 함수와 easing을 활용하여 무한 슬라이드를 구현하는 방법을 설명하고 있다. 슬라이드는 왼쪽으로 움직이며, 순환되어 다시 오른쪽에서 나타난다. 페이저를 클릭하면 해당 슬라이드가 움직이는 기능도 있다.

https://youtu.be/B98b6xXh7PY

Detailed Summary for [[subtitle] 무한슬라이드 - javascript animate 함수 활용, easing 추가]

(https://www.youtube.com/embed/B98b6xXh7PY?autoplay=1) 
      💫 요약

      이 동영상은 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을 더한다.
- 슬라이드의 개수로 나눈 나머지를 다음 인덱스로 선택한다.
          

https://youtu.be/kBpH-eL3sG0

개발자 등록하기

애플리케이션 등록하기

지도 샘플 구현하기

https://youtu.be/FOckJa_aEys

한페이지의 여러 지도 구현하기

https://youtu.be/fIUxbj1f7SE

fullcalendar 설치하기

구글 달력 API 신청 및 설정하기

fullcalendar와 구글 달력 API 연동하기를 학습할 수 있습니다.

https://youtu.be/wOYiZOXLV1k

요약

Javascript 42 [Full-screen javascript slide] 풀스크린 슬라이드 구현하기 1편 - CSS로만 슬라이드 구현하기

하이라이트
자바스크립트를 사용하여 화면에 슬라이드를 구현하는 방법을 알려드립니다.

강조점
💻 자바스크립트를 사용하지 않고 CSS만으로 슬라이드를 구현하는 방법
📝 슬라이드 개수에 따라 인디케이터 생성 및 클릭으로 슬라이드 작동 구현
🖼️ HTML과 CSS로 슬라이드 구조를 만들고 이미지를 추가하는 방법
🔢 슬라이드 제목과 내용, 링크를 추가하여 각 슬라이드를 구성하는 방법
⚙️ 슬라이드 컨트롤을 위한 라벨과 인플을 사용하여 슬라이드를 제어하는 방법
🎨 CSS 변수를 사용하여 색깔을 지정하고 효율적으로 스타일을 관리하는 방법

https://youtu.be/LXGXdF4u2uY

Summary

이번 영상에서는 자바스크립트를 사용하여 풀스크린 슬라이드를 구현하는 방법을 알려줍니다. 슬라이드는 자동으로 다음으로 넘어가는 기능을 가지고 있으며, 이를 위해 setInterval 함수를 사용합니다.

Highlights
🔧 스크립트로 HTML을 생성하여 자동 슬라이드를 구현합니다.
⏰ 일정 시간마다 자동으로 다음 슬라이드로 이동합니다.
🖱️ 클릭하지 않아도 자동으로 슬라이드가 이동하는 기능을 구현합니다.
🔄 setInterval 함수를 사용하여 일정 시간마다 슬라이드를 변경합니다.
⏸️ setInterval을 멈추기 위해 clearInterval 함수를 사용합니다.
🔍 클래스명을 통해 슬라이드의 인덱스 번호를 확인합니다.
🧩 findIndex 함수를 사용하여 조건에 맞는 요소의 인덱스 번호를 찾습니다.

https://youtu.be/6ELUS860FBk

요약
이번 영상에서는 풀스크린 슬라이드의 스타일을 더 정교하게 구현하는 방법을 알려줍니다.

하이라이트
슬라이드 안의 요소들을 플렉스를 이용해서 정렬합니다.
미디어 쿼리를 이용하여 반응형 스타일을 적용합니다.
페이지 네이션에 스타일을 추가합니다.
제목과 링크의 스타일을 변경합니다.
동그라미를 추가하여 스타일링합니다.
투명성과 애니메이션을 활용하여 스타일을 더욱 개선합니다.

https://youtu.be/nrd9xjHbIjE

Summary
자바스크립트를 사용하여 드롭다운 서브메뉴를 업그레이드하는 방법을 배웠습니다.

Highlights
💡 서브메뉴를 구현할 때 클래스명을 활용하는 기술을 사용할 수 있습니다.
💡 배경색을 마우스 오버시에 변경하는 효과를 구현할 수 있습니다.
💡 서브메뉴의 높이를 조절하여 자연스러운 구조를 만들 수 있습니다.
💡 부모 요소를 기준으로 위치를 잡는 절대 위치 설정을 사용할 수 있습니다.
💡 마진을 활용하여 메뉴 간격을 조정할 수 있습니다.
💡 서브메뉴의 길이에 따라 자동으로 공간을 조절할 수 있습니다.
💡 CSS를 사용하여 메뉴를 숨기고 보이게 할 수 있습니다.

https://youtu.be/W31PPZ4wEMo

Summary

자바스크립트로 반응형 일정표를 만들기 위해 순수 자바스크립트로 구현할 예정입니다. CSS 변수를 사용하여 스타일을 지정하고, Gantt 차트를 애니메이션으로 표현할 수 있습니다.

Highlights
💻 자바스크립트로 반응형 일정표 구현
🎨 CSS 변수를 사용하여 스타일 지정
📊 Gantt 차트를 애니메이션으로 표현

Bullet Points
📅 시작 날짜와 끝 날짜를 데이터로 지정하여 일정표 구성
🎨 배경색을 데이터로 표현하여 각 태스크에 적용
💻 순수 자바스크립트로 구현하여 CSS에서 스타일을 조작하지 않음
📏 반응형으로 동작하여 다양한 화면 크기에서 사용 가능
💡 Gantt 차트의 밸류 스타일을 가로 배열로 구성
🎯 세로선을 사용하여 각 태스크의 위치를 정확하게 지정
📊 Gantt 차트를 애니메이션으로 표현하여 시각적인 효과 부여

https://youtu.be/6-bGYmRSnYI

Summary

이번 자바스크립트 강의에서는 순수 자바스크립트를 사용하여 메뉴바에 마우스를 올리면 따라다니는 애니메이션을 만들었습니다.

Highlights
🎥 마우스를 올리면 메뉴바가 움직이는 애니메이션을 구현했습니다.

Bullet Points
🖱️ 메뉴바가 마우스를 따라다니는 애니메이션을 보여줍니다.
⬇️ 마우스를 올리면 메뉴바가 밝아지고 흐려지는 애니메이션을 추가했습니다.
💻 순수 자바스크립트를 사용하여 애니메이션을 구현했습니다.
🎨 CSS를 사용하여 메뉴바의 디자인을 설정했습니다.
🧩 HTML 구조를 살펴보고 CSS와 JavaScript를 적용했습니다.
✨ 메뉴바의 위치를 화면 기준으로 설정하여 움직이도록 했습니다.
⚙️ 스크립트를 작성하여 메뉴바의 움직임을 제어했습니다.

https://youtu.be/pwV40r8IGWQ

요약

이 자바스크립트 튜토리얼에서는, 숫자가 올라가는 애니메이션을 순수 자바스크립트로 구현하는 방법을 알려줍니다.

하이라이트
💡 숫자가 프로르 캐서 올라가는 애니메이션을 자바스크립트로 구현해 보세요.
강조점
💡 자바스크립트를 이용하여 애니메이션을 구현합니다.
💡 HTML 요소에 숫자를 바꾸는 함수를 적용합니다.
💡 setInterval 함수를 사용하여 일정 시간마다 숫자를 증가시킵니다.
💡 숫자가 일정 값에 도달하면 애니메이션을 멈춥니다.
💡 숫자가 바뀌는 원리를 이해하면 쉽게 구현할 수 있습니다.

https://youtu.be/UG1dBRYu0t4

Summary

이번 강의에서는 자바스크립트로 쉽게 아코디언을 구현하는 방법을 배웠습니다.

Highlights
🎉 아코디언 구현: 자바스크립트로 아코디언을 구현해 보았습니다.
📚 HTML 구조: 아코디언을 구현하기 위해 HTML 구조를 만들었습니다.
💻 CSS 스타일링: CSS를 사용하여 패널의 바디를 숨기는 스타일링을 했습니다.
⚙️ 스크립트 기능: 클릭 이벤트를 사용하여 액티브한 패널만 보이도록 구현했습니다.
🖱️ 클릭 이벤트: 클릭한 패널의 액티브 클래스를 추가하고 다른 패널의 액티브 클래스를 제거하는 기능을 구현했습니다.
🧩 배열 요소 처리: 배열로 들어오는 패널 요소를 처리하여 클릭 이벤트를 적용했습니다.

https://youtu.be/xKr8OVOqs00

요약

자바스크립트를 사용하여 순수 자바스크립트로 라이트박스 모달을 구현하는 방법에 대해 알려드립니다.

하이라이트
🖼️ 라이트박스 효과는 이미지를 강조하는 효과를 만들어줍니다.

강조 포인트
🌟 라이트박스는 이미지를 검게 처리하고 원하는 이미지만 강조합니다.
🌟 라이트박스는 포트폴리오, 로그인 및 회원가입 페이지 등 다양한 곳에서 활용할 수 있습니다.
🌟 사용자가 클릭한 이미지를 크게 보여주는 효과를 구현할 수 있습니다.
🌟 라이트박스 오버레이에 이미지를 추가하여 원하는 위치에 큰 이미지를 보여줄 수 있습니다.
🌟 CSS를 사용하여 라이트박스 오버레이의 스타일을 설정할 수 있습니다.
🌟 라이트박스 오버레이에 링크 이벤트를 추가하여 이미지 클릭 시 다른 페이지로 이동할 수 있습니다.
🌟 라이트박스 모달을 구현하기 위해 순수 자바스크립트를 사용합니다.