아코디언 메뉴 구현 방법 총정리: CSS height vs jQuery slideDown 비교
CSS 25.10.01 조회 26아코디언 메뉴 구현 방법 총정리 | CSS height vs jQuery slideDown 비교
웹에서 FAQ, 메뉴, 콘텐츠 영역 등을 효율적으로 보여주기 위해 많이 사용하는 UI 패턴 중 하나가 아코디언 메뉴입니다.
아코디언 메뉴는 클릭 또는 터치 시 하위 내용을 펼치거나 접는 방식으로,
화면 공간을 절약하고 사용자가 필요한 정보만 선택적으로 확인할 수 있다는 장점이 있습니다.
이번 글에서는 CSS height 기반 방법과 jQuery slideDown/slideUp 방법을 비교하고, 구현 팁까지 함께 소개합니다.
➰➰➰
✅ 아코디언 메뉴란?
✔ 클릭 시 콘텐츠가 펼쳐지고 접히는 UI 구성 요소
✔ FAQ, 내비게이션, 목록형 콘텐츠 등에서 활용도 높음
✅ 아코디언 메뉴의 장점은 무엇인가요?
✔ 공간 절약 및 UX 향상
✔ 사용자가 필요한 정보만 선택적으로 확인 가능
✏️ HTML 구조는 이렇게 생겼어요
✔ 펼쳐지는 콘텐츠에는 class 토글(스크립트 활용)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <ul class="accordion"> <li> <button>메뉴 1</button> <div class="content"> <p>메뉴 1의 내용입니다. 내용 길이에 따라 높이가 자동으로 조절됩니다.</p> </div> </li> <li> <button>메뉴 2</button> <div class="content"> <p>메뉴 2의 내용입니다. 여러 줄의 텍스트도 자연스럽게 펼쳐집니다.</p> </div> </li> <li> <button>메뉴 3</button> <div class="content"> <p>메뉴 3의 내용입니다. 필요하면 이미지나 다른 요소도 포함할 수 있습니다.</p> </div> </li> </ul> <script> document.querySelectorAll('.accordion button').forEach(btn => { btn.addEventListener('click', () => { const li = btn.parentElement; li.classList.toggle('open'); }); }); </script> | cs |
✏️ CSS height 기반 아코디언 메뉴 구현 방법
✔ 동작 원리: 높이를 0 → max-content로 변경하며 transition 적용
✔ 장점: 반응형, 가벼운 코드, 최근 트렌드에 적합
1 2 3 4 5 6 7 8 | body{font-family: Arial, sans-serif;padding: 40px;background:#f5f5f5} ul, li, ol{list-style:none} .accordion{padding: 0;margin: 0;max-width: 400px;} .accordion li{border: 1px solid #ccc;margin-bottom: 10px;border-radius: 5px;overflow: hidden} .accordion button {width: 100%;padding: 15px;text-align: left;background: #f5f5f5;border: none;cursor: pointer;font-size: 16px;outline: none;} .accordion button:hover {background: #e0e0e0;} .accordion .content {height: 0;overflow: hidden;padding: 0 15px;background: #fff;transition: height 0.3s ease, padding 0.3s ease;} .accordion li.open .content {height: max-content;padding: 15px;} | cs |
✏️ jQuery slideDown/slideUp 기반 아코디언 메뉴 구현 방법
✔ 동작 원리: jQuery가 높이를 자동 계산해 애니메이션 처리
✔ css로 콘텐츠 영역을 display:none 초기상태 지정해야 닫힌 상태에서 애니메이션 시작
✔ 장점: 동적 콘텐츠 대응, 레거시 프로젝트에 유용
See the Pen jquery 아코디언 메뉴 구현 by designkits (@designkits) on CodePen.
➰➰➰
CSS height + transition 아코디언 메뉴는 내용 길이에 유동적으로 대응하며 반응형 구현도 자연스럽습니다.
필요에 따라 jQuery slideDown/slideUp을 활용하면 레거시 프로젝트나 빠른 프로토타입에서도 효율적으로 구현할 수 있습니다.
아코디언 메뉴는 FAQ, 내비게이션 등에서 활용되며, 저희 디자인 키트에서 다양한 템플릿으로 확인하실 수 있습니다.
