Summary
이번 강의에서는 자바스크립트로 쉽게 아코디언을 구현하는 방법을 배웠습니다.
Highlights
🎉 아코디언 구현: 자바스크립트로 아코디언을 구현해 보았습니다.
📚 HTML 구조: 아코디언을 구현하기 위해 HTML 구조를 만들었습니다.
💻 CSS 스타일링: CSS를 사용하여 패널의 바디를 숨기는 스타일링을 했습니다.
⚙️ 스크립트 기능: 클릭 이벤트를 사용하여 액티브한 패널만 보이도록 구현했습니다.
🖱️ 클릭 이벤트: 클릭한 패널의 액티브 클래스를 추가하고 다른 패널의 액티브 클래스를 제거하는 기능을 구현했습니다.
🧩 배열 요소 처리: 배열로 들어오는 패널 요소를 처리하여 클릭 이벤트를 적용했습니다.
요약
자바스크립트를 사용하여 순수 자바스크립트로 라이트박스 모달을 구현하는 방법에 대해 알려드립니다.
하이라이트
🖼️ 라이트박스 효과는 이미지를 강조하는 효과를 만들어줍니다.
강조 포인트
🌟 라이트박스는 이미지를 검게 처리하고 원하는 이미지만 강조합니다.
🌟 라이트박스는 포트폴리오, 로그인 및 회원가입 페이지 등 다양한 곳에서 활용할 수 있습니다.
🌟 사용자가 클릭한 이미지를 크게 보여주는 효과를 구현할 수 있습니다.
🌟 라이트박스 오버레이에 이미지를 추가하여 원하는 위치에 큰 이미지를 보여줄 수 있습니다.
🌟 CSS를 사용하여 라이트박스 오버레이의 스타일을 설정할 수 있습니다.
🌟 라이트박스 오버레이에 링크 이벤트를 추가하여 이미지 클릭 시 다른 페이지로 이동할 수 있습니다.
🌟 라이트박스 모달을 구현하기 위해 순수 자바스크립트를 사용합니다.
자바스크립트 핵심 리뷰 #2에서는 CSS 변경, 이벤트 연결, DOM 조작 등에 대해 다루었습니다.
Highlights
🎨 CSS 변경: 메뉴 안의 li 요소들의 색상을 파란색으로 변경하는 방법을 배웠습니다.
🖱️ 이벤트 연결: 선택한 요소에 이벤트를 연결하여 원하는 동작을 수행할 수 있습니다.
🧱 DOM 조작: DOM 요소를 선택하고 조작하여 화면을 동적으로 변경할 수 있습니다.
Bullet Points
🔍 선택자와 반복문을 이용하여 메뉴 안의 li 요소들의 색상을 파란색으로 변경할 수 있습니다.
📝 객체의 속성을 활용하여 선택한 요소의 색상을 변경할 수 있습니다.
🚀 반복문을 활용하여 여러 개의 요소에 동일한 작업을 반복적으로 수행할 수 있습니다.
🕹️ 이벤트를 연결하여 요소에 클릭, 마우스 오버 등의 동작을 추가할 수 있습니다.
⚡ 코드를 최적화하여 사이트의 속도를 높일 수 있습니다.
🌈 배열과 객체를 효율적으로 활용하여 코드를 작성할 수 있습니다.
💡 메뉴를 동적으로 변경하거나 화면을 업데이트할 때 DOM 조작을 활용할 수 있습니다.