요약
Javascript 42 [Full-screen javascript slide] 풀스크린 슬라이드 구현하기 1편 - CSS로만 슬라이드 구현하기
하이라이트
자바스크립트를 사용하여 화면에 슬라이드를 구현하는 방법을 알려드립니다.
강조점
💻 자바스크립트를 사용하지 않고 CSS만으로 슬라이드를 구현하는 방법
📝 슬라이드 개수에 따라 인디케이터 생성 및 클릭으로 슬라이드 작동 구현
🖼️ HTML과 CSS로 슬라이드 구조를 만들고 이미지를 추가하는 방법
🔢 슬라이드 제목과 내용, 링크를 추가하여 각 슬라이드를 구성하는 방법
⚙️ 슬라이드 컨트롤을 위한 라벨과 인플을 사용하여 슬라이드를 제어하는 방법
🎨 CSS 변수를 사용하여 색깔을 지정하고 효율적으로 스타일을 관리하는 방법
Summary
이번 영상에서는 자바스크립트를 사용하여 풀스크린 슬라이드를 구현하는 방법을 알려줍니다. 슬라이드는 자동으로 다음으로 넘어가는 기능을 가지고 있으며, 이를 위해 setInterval 함수를 사용합니다.
Highlights
🔧 스크립트로 HTML을 생성하여 자동 슬라이드를 구현합니다.
⏰ 일정 시간마다 자동으로 다음 슬라이드로 이동합니다.
🖱️ 클릭하지 않아도 자동으로 슬라이드가 이동하는 기능을 구현합니다.
🔄 setInterval 함수를 사용하여 일정 시간마다 슬라이드를 변경합니다.
⏸️ setInterval을 멈추기 위해 clearInterval 함수를 사용합니다.
🔍 클래스명을 통해 슬라이드의 인덱스 번호를 확인합니다.
🧩 findIndex 함수를 사용하여 조건에 맞는 요소의 인덱스 번호를 찾습니다.
요약
이번 영상에서는 풀스크린 슬라이드의 스타일을 더 정교하게 구현하는 방법을 알려줍니다.
하이라이트
슬라이드 안의 요소들을 플렉스를 이용해서 정렬합니다.
미디어 쿼리를 이용하여 반응형 스타일을 적용합니다.
페이지 네이션에 스타일을 추가합니다.
제목과 링크의 스타일을 변경합니다.
동그라미를 추가하여 스타일링합니다.
투명성과 애니메이션을 활용하여 스타일을 더욱 개선합니다.
'Youtube 동영상 > javascript & jQuery' 카테고리의 다른 글
| 무한슬라이드 - javascript animate 함수 활용, easing 추가 (0) | 2024.02.24 |
|---|---|
| 구글 달력 API 활용 javascript 달력 구현하기 (0) | 2024.02.16 |
| Javascript 41 [드롭다운 서브메뉴] 순수 자바스크립트 3단계 업그레이드 (0) | 2024.02.15 |
| Javascript 40 [Gantt chart ] 순수 자바스크립트 반응형 일정표. css 변수, filter, foreach (0) | 2024.02.15 |
| Javascript 39 [ Menu Hover Animation ] 순수 자바스크립트 vanilar javascript 마우스를 올리면 따라다니는 메뉴바 애니메이션 (0) | 2024.02.14 |