Rock's Ezweb

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 차트를 애니메이션으로 표현하여 시각적인 효과 부여