반응형 폴딩 아코디언 만들기 | HTML, CSS, JavaScript

소개

이 프로젝트에서는 HTML, CSS, 그리고 JavaScript 를 사용하여 간단한 폴딩 아코디언을 만드는 방법을 배우게 됩니다. 폴딩 아코디언은 사용자가 콘텐츠 섹션을 확장하고 축소할 수 있도록 하는 일반적인 UI 요소로, 정보를 간결하고 체계적으로 표시하는 데 유용한 기능입니다.

👀 미리보기

Accordion demo animation

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

폴딩 아코디언의 HTML 구조 설정 방법
CSS 를 사용하여 아코디언 스타일 지정 방법
JavaScript 를 사용하여 아코디언에 상호 작용 추가 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

반응형 (responsive) 하고 시각적으로 매력적인 아코디언 인터페이스 생성
JavaScript 를 사용하여 웹 요소에 상호 작용 및 동적 동작 추가
HTML, CSS 및 JavaScript 를 통합하여 기능적이고 사용자 친화적인 웹 컴포넌트 구축

프로젝트 구조 설정

이 단계에서는 제공된 파일을 편집기에서 열어 프로젝트를 설정합니다.

편집기를 열면 index.html, style.css, index.js, 그리고 jquery-3.6.0.min.js 파일이 표시됩니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
VM 상단에서 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다. 축소된 페이지에서 이미지를 클릭해도 확장되지 않습니다. 다음과 같이 표시됩니다:

unfinished project screenshot

jQuery 를 사용하여 상호 작용 추가

이 단계에서는 jQuery 를 사용하여 아코디언에 상호 작용을 추가합니다.

편집기에서 index.js 파일을 엽니다.
다음 코드를 추가합니다:

$(".option").click(function () {
  $(".option").removeClass("active");
  $(this).addClass("active");
});

이 코드는 각 .option 요소에 클릭 이벤트 리스너를 추가합니다. .option을 클릭하면 코드는 모든 .option 요소에서 active 클래스를 제거하고 클릭된 .option 요소에 active 클래스를 추가합니다. 이렇게 하면 필요에 따라 아코디언이 축소되거나 확장됩니다.