Studio 에디터: 아코디언 추가 및 사용자 지정하기 | 도움말 센터

Studio 에디터: 아코디언 추가 및 사용자 지정하기

5 분 분량

아코디언 요소를 사용해 작은 공간에 많은 양의 콘텐츠를 표시하세요. 방문자가 아이템을 확대 및 축소할 수 있으므로, 긴 목록을 스크롤할 필요 없이 필요한 정보를 쉽게 찾을 수 있습니다.

다음 지침을 참고하세요.

원하는 아코디언 디자인을 선택해 시작하세요. 아코디언의 각 아이템을 개인화해 클라이언트의 콘텐츠를 표시할 수 있습니다. 필요한 요소를 추가하고 컨테이너 내부에 원하는 대로 구성하세요.

아코디언 요소에 표시되는 아이템을 관리하세요. 클라이언트의 콘텐츠에 대한 아이템을 추가하고 제목을 지정, 또는 표시 순서를 변경할 수 있습니다.

도움말:

방문자가 페이지 로딩 시 아코디언이 표시되는 모양을 결정하세요. 정보에 쉽게 액세스할 수 있도록 모든 아이템을 열어두거나, 미니멀한 디자인을 위해 닫아둘 수 있습니다. 방문자가 동시에 여러 아이템을 열 수 있는지 여부 또한 선택할 수 있습니다.

아코디언 요소를 선택합니다.
설정 아이콘을 클릭합니다.
기본 상태 선택 아래에서 옵션을 선택합니다.
- 전체 아이템 닫기: 방문자는 먼저 닫힌 아코디언 아이템을 보며, 자세히 보기 위해 확장할 아이템을 선택합니다.
- 첫 번째 아이템 열기: 방문자는 다른 아이템이 닫힌 상태에서 상위 아이템의 콘텐츠만을 볼 수 있습니다.
- 전체 아이템 열기: 페이지가 로딩되면 방문자에게 모든 아이템의 콘텐츠가 표시됩니다.
복수 아이템 실행 허용 버튼을 클릭합니다.
- 활성: 방문자는 아코디언에서 원하는 아이템을 모두 열어둘 수 있습니다.
- 비활성: 방문자는 한 번에 하나의 아이템만 열어둘 수 있습니다.
(선택사항) 방문자가 아이템을 클릭해 열 때 표시되는 전환 효과를 적용합니다.

참고:

전체 아이템 열기를 기본 상태로 선택한 경우, 아코디언에서 여러 아이템을 열 수 있도록 허용하는 옵션을 사용할 수 없습니다.

페이지의 다른 부분과 어울리도록 아코디언의 모든 부분을 디자인할 수 있습니다. 아이템 제목, 각 아이템의 콘텐츠를 표시하는 컨테이너 또는 아이템의 전체 공간(제목 및 컨테이너 포함)을 사용자 지정하세요.

드롭다운에서 디자인할 아이템을 선택합니다.
- 제목: 아이템 제목입니다. 방문자가 제목 위에 마우스오버 시 제목이 다르게 보이도록 디자인할 수 있습니다.
- 컨테이너: 각 아이템의 콘텐츠를 표시하는 컨테이너입니다.
- 아코디언 아이템: 아코디언 아이템의 전체 공간을 제어합니다(제목 및 컨테이너 포함).
사용 가능한 옵션을 사용해 다양한 배경, 글꼴, 모서리, 테두리 등을 선택하세요.

필요에 따라 아코디언 요소의 레이아웃을 조정하세요. 아이템 제목의 정렬, 여백, 위치 및 각 제목 옆 표시되는 아이콘을 선택할 수 있습니다.

도움말:

모든 개별 아이템에 CSS 그리드를 적용해 완벽한 픽셀 레이아웃을 완성할 수 있습니다.

아코디언 요소를 선택합니다.
레이아웃 아이콘을 클릭합니다.
아코디언 요소의 레이아웃을 조정합니다.
- 아이콘 선택: 화살표 또는 더하기 중 아이템 제목 옆에 표시될 아이콘을 선택합니다.
- 아이콘 위치: 아이콘을 제목의 왼쪽 또는 오른쪽에 표시할지 여부를 결정합니다.
- 제목 여백: 슬라이더를 끌어 아이템 제목 주위에 가로 및 세로 여백을 추가합니다.

페이지 메뉴