HTML, CSS, JavaScript를 활용한 아코디언 메뉴 구현하기

HTML, CSS, JavaScript는 웹 개발에서 핵심적인 역할을 합니다. 이번에는 HTML, CSS, JavaScript를 활용하여 아코디언 메뉴를 구현하는 방법을 알아보겠습니다.

HTML

HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 아코디언 메뉴를 구현하기 위해서는 <ul>과 <li> 요소를 사용합니다. 이번 예제에서는 각 아코디언 메뉴 항목의 제목과 내용을 각각 <div class="title">과 <div class="desc">로 나누어 구성하였습니다. 또한, JavaScript에서 이벤트를 처리하기 위해 각 제목 요소에 click 이벤트를 추가해야 합니다.

<section>
  <div class="accordion">
    <ul>
      <li class="on">
        <div class="title"><span>제목1</span> <i>화살표</i></div>
        <div class="desc">내용1</div>
      </li>
      <li>
        <div class="title"><span>제목2</span> <i>화살표</i></div>
        <div class="desc">내용2</div>
      </li>
      <li>
        <div class="title"><span>제목3</span> <i>화살표</i></div>
        <div class="desc">내용3</div>
      </li>
    </ul>
  </div>
</section>

CSS

CSS는 HTML 문서의 디자인과 스타일을 정의하는 스타일 시트 언어입니다. 이번 예제에서는 아코디언 메뉴의 제목과 내용을 스타일링하였습니다. 또한, 각 항목의 높이를 조정하여 아코디언 메뉴의 동작을 구현할 수 있도록 하였습니다.

 

.accordion {
  background-color: #99999930;
}

.accordion ul > li {
  overflow: hidden;
  max-height: 40px;
  transition: 0.3s;
}
.accordion ul > li.on {
  max-height: 600px;
}
.accordion ul > li .title {
  background-color: antiquewhite;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
}
.accordion ul > li .desc {
  padding: 0.5rem;
}

JavaScript

JavaScript는 HTML과 CSS를 조작하거나, 이벤트를 처리하기 위한 프로그래밍 언어입니다. 이번 예제에서는 각 제목 요소에 click 이벤트를 추가하고, 클릭된 항목과 나머지 항목의 클래스를 조작하여 아코디언 메뉴의 동작을 구현하는 JavaScript 코드를 간단히 설명하겠습니다.

먼저, 아코디언 메뉴를 담고 있는 div 요소를 찾아 변수에 할당합니다.

 

const accordion = document.querySelector(".accordion");

다음으로, toggleAccordion 함수를 작성합니다. 이 함수는 클릭된 항목과 나머지 항목의 클래스를 조작하여 아코디언 메뉴의 동작을 구현합니다. 클릭된 항목에는 "on" 클래스를 추가하고, 나머지 항목에서는 "on" 클래스를 제거합니다.

 

function toggleAccordion() {
  const clickedItem = this.parentNode;
  const items = accordion.querySelectorAll("li");

  items.forEach((item) => {
    if (clickedItem === item) {
      item.classList.toggle("on");
    } else {
      item.classList.remove("on");
    }
  });
}

마지막으로, 모든 제목 요소에 click 이벤트를 추가합니다. 이때, forEach 메서드를 사용하여 각 요소에 이벤트를 등록합니다.

 

const titles = accordion.querySelectorAll(".title");
titles.forEach((title) => {
  title.addEventListener("click", toggleAccordion);
});

위 코드는 JavaScript를 사용하여 아코디언 메뉴를 구현하는 간단한 예제입니다. 이와 같이 JavaScript를 사용하여 HTML과 CSS를 동적으로 조작하거나 이벤트를 처리할 수 있습니다.