강조점 💻 자바스크립트를 사용하지 않고 CSS만으로 슬라이드를 구현하는 방법 📝 슬라이드 개수에 따라 인디케이터 생성 및 클릭으로 슬라이드 작동 구현 🖼️ HTML과 CSS로 슬라이드 구조를 만들고 이미지를 추가하는 방법 🔢 슬라이드 제목과 내용, 링크를 추가하여 각 슬라이드를 구성하는 방법 ⚙️ 슬라이드 컨트롤을 위한 라벨과 인플을 사용하여 슬라이드를 제어하는 방법 🎨 CSS 변수를 사용하여 색깔을 지정하고 효율적으로 스타일을 관리하는 방법
이번 영상에서는 자바스크립트를 사용하여 풀스크린 슬라이드를 구현하는 방법을 알려줍니다. 슬라이드는 자동으로 다음으로 넘어가는 기능을 가지고 있으며, 이를 위해 setInterval 함수를 사용합니다.
Highlights 🔧 스크립트로 HTML을 생성하여 자동 슬라이드를 구현합니다. ⏰ 일정 시간마다 자동으로 다음 슬라이드로 이동합니다. 🖱️ 클릭하지 않아도 자동으로 슬라이드가 이동하는 기능을 구현합니다. 🔄 setInterval 함수를 사용하여 일정 시간마다 슬라이드를 변경합니다. ⏸️ setInterval을 멈추기 위해 clearInterval 함수를 사용합니다. 🔍 클래스명을 통해 슬라이드의 인덱스 번호를 확인합니다. 🧩 findIndex 함수를 사용하여 조건에 맞는 요소의 인덱스 번호를 찾습니다.
요약 이번 영상에서는 풀스크린 슬라이드의 스타일을 더 정교하게 구현하는 방법을 알려줍니다.
하이라이트 슬라이드 안의 요소들을 플렉스를 이용해서 정렬합니다. 미디어 쿼리를 이용하여 반응형 스타일을 적용합니다. 페이지 네이션에 스타일을 추가합니다. 제목과 링크의 스타일을 변경합니다. 동그라미를 추가하여 스타일링합니다. 투명성과 애니메이션을 활용하여 스타일을 더욱 개선합니다.
Summary 자바스크립트를 사용하여 드롭다운 서브메뉴를 업그레이드하는 방법을 배웠습니다.
Highlights 💡 서브메뉴를 구현할 때 클래스명을 활용하는 기술을 사용할 수 있습니다. 💡 배경색을 마우스 오버시에 변경하는 효과를 구현할 수 있습니다. 💡 서브메뉴의 높이를 조절하여 자연스러운 구조를 만들 수 있습니다. 💡 부모 요소를 기준으로 위치를 잡는 절대 위치 설정을 사용할 수 있습니다. 💡 마진을 활용하여 메뉴 간격을 조정할 수 있습니다. 💡 서브메뉴의 길이에 따라 자동으로 공간을 조절할 수 있습니다. 💡 CSS를 사용하여 메뉴를 숨기고 보이게 할 수 있습니다.