아코디언 컴포넌트 구현 가이드

이번 글에서는 JavaScript 없이 HTML과 CSS만으로 아코디언(Accordion) 컴포넌트를 만드는 과정을 자세히 설명합니다. VS Code 멀티 커서, Heroicons SVG 활용, Flexbox의 gap 등을 적용해 깔끔하고 확장 가능한 구조를 설계합니다.

---

1. 프로젝트 초기 설정

• 스타일링 방식
  • 컴포넌트별 외부 파일 대신 <style> 태그로 자체 포함

---

2. HTML 마크업 구조

<div class="accordion">
  <div class="item">
    <p class="number">01</p>
    <p class="text">상품 반품 기한은 어떻게 되나요?</p>
    <svg class="icon">…</svg>
    <div class="hidden-box">
      <p>반품 요청 후 30일 이내에 상품을 보내주시면 됩니다.</p>
      <ul>
        <li>주문일로부터 30일</li>
        <li>포장 훼손 시 반품 불가</li>
      </ul>
    </div>
  </div>
  <!-- 동일 구조의 아이템 반복 -->
</div>

• .accordion : 전체 컨테이너
• .item : 개별 아코디언 섹션
• .number, .text, .icon : 헤더 부분(번호·질문·아이콘)
• .hidden-box : 확장 시 보이는 본문 및 리스트

---

3. 공통 리셋 및 기본 스타일 복사

이전 섹션의 CSS(리셋, 색상 변수, Inter 폰트) 중 필요한 부분만 가져와 <style>에 배치하여 중복 코딩을 최소화합니다.

---

4. 시각적 스타일링

.accordion {
  width: 700px;
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.number, .text {
  font-size: 24px;
  font-weight: bold;
  color: var(--green-500);
}

.icon {
  width: 24px;
  height: 24px;
  stroke: var(--green-500);
}

.hidden-box p {
  line-height: 1.6;
  margin-bottom: 24px;
}

.hidden-box {
  color: var(--gray-400);
}

.hidden-box ul {
  margin-left: 16px;
}

• .accordion에 Flexbox와 flex-direction: column, gap 적용
• 번호·질문 텍스트를 24px, bold로 강조
• Heroicons SVG는 24px 크기, stroke로 색상 지정
• 확장 영역 본문은 line-height: 1.6·margin-bottom: 24px 적용

---

5. Flexbox gap 활용하기

• Flex 컨테이너의 flex-direction을 column으로 전환하면
  • 주 축이 수평 → 수직 전환
  • gap이 수직 간격(margin-bottom)처럼 동작
• 이를 통해 개별 요소에 일일이 마진 조정 없이 간격을 균일하게 설정할 수 있습니다.

---

다음 단계

다음 글에서는 닫힌 상태 스타일과 레이아웃 배치를 추가해 최종 완성본을 구현합니다.