반응형 아코디언 인터페이스 구축

소개

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

👀 미리보기

🎯 과제

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

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

🏆 성과

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

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

프로젝트 구조 설정

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

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

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

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

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

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

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

3. index.js 파일을 저장합니다.
4. 브라우저를 새로 고쳐 완료된 결과를 확인합니다.
5. 다양한 아코디언 옵션을 클릭하여 확장 및 축소되는 것을 확인합니다.

효과는 다음과 같습니다:

축하합니다! 폴딩 아코디언 프로젝트를 완료했습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.