본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

아코디언

아코디언은 한 페이지에서 관련 있는 여러 콘텐츠 섹션을 확인할 수 있도록 하는 컴포넌트로 콘텐츠 섹션의 헤더 목록이 수직으로 쌓여 있는 형태로 표현된다. 일반적으로 헤더 목록은 컨트롤 요소로 활용되며 사용자는 필요에 따라 헤더를 선택하여 하위 콘텐츠 섹션을 표시하거나 숨길 수 있다.

컴포넌트명

아코디언 (Accordion)

아코디언 구조 예시

  1. 1.헤더 - 제목 패널 섹션의 콘텐츠 제목
  2. 2.헤더 - 아이콘 패널의 펼침/접힘 상태를 나타냄
  3. 3.패널 헤더 하위에 속하는 콘텐츠 섹션
유형

Accordion_box

State사용자의 상호작용에 따라 변경된다.

Close

아코디언 내용 영역
아코디언 내용 영역
아코디언 내용 영역

Hover

아코디언 내용 영역
아코디언 내용 영역
아코디언 내용 영역

Open

아코디언 내용 영역
아코디언 내용 영역
아코디언 내용 영역
코드 보기
유형

Accordion_line

State사용자의 상호작용에 따라 변경된다.

Close

아코디언 내용 영역
아코디언 내용 영역
아코디언 내용 영역

Hover

아코디언 내용 영역
아코디언 내용 영역
아코디언 내용 영역

Open

아코디언 내용 영역
아코디언 내용 영역
아코디언 내용 영역
코드 보기
유형

Accordion_number

State사용자의 상호작용에 따라 변경된다.

Close

01
아코디언 내용 영역
아코디언 내용 영역
아코디언 내용 영역

Hover

01
아코디언 내용 영역
아코디언 내용 영역
아코디언 내용 영역

Open

01
아코디언 내용 영역
아코디언 내용 영역
아코디언 내용 영역
코드 보기

가이드

  • 헤더 전체를 클릭 가능하도록 만든다. 상호작용이 가능한 타깃 영역이 클수록 사용자가 더 쉽게 조작할 수 있다. 사용자가 패널을 펼치거나 접기 위해 헤더 전체를 클릭할 수 있도록 구현해야 한다. 만약, 패널 내부 콘텐츠에 링크, 버튼과 같은 인터페이스가 포함되어 있다면 헤더와 패널 사이에 충분한 공간을 확보하여 사용자가 실수로 헤더를 클릭하지 않도록 해야 한다.
  • 헤더와 패널은 서로 관련 있는 것으로 인지될 수 있게 표현한다. 헤더와 패널이 하나의 콘텐츠 섹션으로 인지될 수 있게 표현되어야 하며, 필요한 경우 여백, 색상, 그림자, 선을 사용할 수 있다.