Accordion

.accordion, .accordion-item, .accordion-header, .accordion-content

접고 펼칠 수 있는 콘텐츠 섹션을 만들기 위한 아코디언 컴포넌트입니다.

Basic Accordion

기본 아코디언 컴포넌트입니다. 항목을 클릭하여 펼치거나 접을 수 있습니다.

디자인 시스템이란 무엇인가요?

디자인 시스템은 재사용 가능한 컴포넌트와 패턴의 모음으로, 일관된 사용자 경험을 제공하기 위해 사용됩니다. 색상, 타이포그래피, 간격 등의 디자인 토큰과 버튼, 폼, 카드 등의 UI 컴포넌트로 구성됩니다.

어떻게 설치하나요?

npm install 명령어를 사용하거나 CDN을 통해 직접 스크립트를 로드할 수 있습니다. 자세한 설치 방법은 설치 가이드 문서를 참조해주세요.

브라우저 호환성은 어떻게 되나요?

모든 최신 브라우저(Chrome, Firefox, Safari, Edge)를 지원합니다. IE11은 지원하지 않습니다.

Interactive FAQ

클릭하여 내용을 확인하세요. JavaScript로 동작합니다.

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header" aria-expanded="false">
            질문 텍스트
        </button>
        <div class="accordion-content">
            <div class="content-inner">
                답변 내용
            </div>
        </div>
    </div>
</div>

FAQ Example

자주 묻는 질문 페이지에 사용할 수 있는 아코디언 예제입니다.

API Key는 어디서 발급받나요?

설정 페이지의 'API 관리' 탭에서 새로운 키를 생성할 수 있습니다. 생성된 키는 다시 조회할 수 없으니 안전한 곳에 보관하세요.

요금제 변경은 어떻게 하나요?

구독 관리 페이지에서 언제든지 요금제를 업그레이드하거나 다운그레이드할 수 있습니다. 변경 사항은 다음 결제 주기부터 적용됩니다.

기술 지원이 제공되나요?

네, Enterprise 플랜 사용자는 24/7 전담 기술 지원을 받을 수 있습니다. 일반 사용자는 커뮤니티 포럼을 이용해주세요.

환불 정책은 어떻게 되나요?

첫 결제 후 14일 이내에 환불을 요청하시면 전액 환불해드립니다. 14일 이후에는 남은 기간에 대한 비례 환불이 적용됩니다.

데이터는 어디에 저장되나요?

모든 데이터는 AWS 서울 리전에 암호화되어 저장됩니다. GDPR 및 개인정보보호법을 준수합니다.

Accessibility

아코디언은 접근성을 위해 aria-expanded 속성을 사용합니다.

ARIA 속성: accordion-header 버튼에는 aria-expanded 속성이 있어 스크린 리더 사용자가 펼침 상태를 알 수 있습니다.

속성	값	설명
aria-expanded	boolean	아코디언 항목의 펼침 상태를 나타냅니다.
role	button	헤더가 클릭 가능한 버튼임을 나타냅니다.