> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/design/editor/contents/advanced/accordion.md).

# 아코디언 블록

## 아코디언 블록이란?

아코디언 형식은 세로로 쌓여있는 리스트를 펼치고 숨기는 리스트이며 펼치고 숨기는 형태의 기능입니다. 아코디언 블록을 사용하여, 간결하고 핵심적인 내용만 모아 볼 수 있습니다.

자주 묻는 질문(FAQ)을 만들어 정보를 제공하는 용도로 활용이 가능합니다.

## 설정 방법

아코디언 블록의 설정은 제목/내용 등의 서체 크기 색상 등의 기본 설정 항목과 입력 필드 관리 및 게시글 작성을 위한 구성 항목으로 나뉘어져 있습니다.

각 항목의 자세한 설정 방법은 아래 내용을 참고 부탁드립니다.

#### 아코디언 블록\_설정 방법

{% tabs %}
{% tab title="기본\_제목" %}

<figure><img src="/files/1cNLuxIaCQuVlMR8lr70" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                |
| ---------------------------------------------------- |
| <p><strong>서체</strong><br>타이틀에 표시되는 서체를 선택합니다.</p>   |
| <p><strong>두께</strong><br>글자 두께를 설정합니다.</p>          |
| <p><strong>크기</strong><br>글자의 크기를 선택합니다.</p>         |
| <p><strong>글자 색상</strong><br>글자 색상 및 투명도를 설정합니다.</p> |
| {% endtab %}                                         |

{% tab title="기본\_아이콘" %}

<figure><img src="/files/GQe8S4tB7WzT6Be2Cszj" alt=""><figcaption></figcaption></figure>

| 설정 항목                                             |
| ------------------------------------------------- |
| <p><strong>색상</strong><br>글자 색상 및 투명도를 설정합니다.</p> |
| <p><strong>모양</strong><br>아이콘의 모양을 선택합니다.</p>     |
| <p><strong>위치</strong><br>아이콘의 위치를 선택합니다.</p>     |
| {% endtab %}                                      |

{% tab title="기본\_내용" %}

<figure><img src="/files/itucsqepJbL9MDNRj0Jp" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                           |
| ----------------------------------------------------------------------------------------------- |
| <p><strong>서체</strong><br>타이틀에 표시되는 서체를 선택합니다.</p>                                              |
| <p><strong>두께</strong><br>글자 두께를 설정합니다.</p>                                                     |
| <p><strong>크기</strong><br>글자의 크기를 선택합니다.</p>                                                    |
| <p><strong>배경</strong><br>배경 색상 및 투명도를 설정합니다.</p>                                               |
| <p><strong>글자 색상</strong><br>글자 색상 및 투명도를 설정합니다.</p>                                            |
| <p><strong>콘텐츠 정렬</strong><br>아코디언 내 콘텐츠의 정렬 방식을 설정합니다. </p><ul><li>왼쪽 오른쪽 중앙 중 선택 가능</li></ul> |
| <p><strong>이미지 비율</strong>                                                                      |
| <br>아코디언 내 적용이 되는 이미지의 비율을 선택합니다.</p><ul><li>원본, 1:1, 4:3, 16:9 중 선택 가능</li></ul>               |
| <p><strong>이미지 크기</strong>                                                                      |
| <br>아코디언 내 적용이 되는 이미지의 크기를 선택합니다.</p><ul><li>25%, 50%, 75%, 100% 중 선택 가능</li></ul>              |
| <p><strong>이미지 위치</strong>                                                                      |
| <br>아코디언 내 적용이 되는 이미지의 위치를 선택합니다.</p><ul><li>글 위, 글 아래 중 선택 가능</li></ul>                        |
| {% endtab %}                                                                                    |
| {% endtabs %}                                                                                   |

#### 구성

<figure><img src="/files/VejXZp1Ojzm1jyK4jMGM" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                                                        |
| ---------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>+ 입력 필드 추가</strong><br>아코디언의 입력 필드를 생성합니다.</p>                                                                    |
| <p><strong>콘텐츠 설정</strong><br>아코디언을 통해 보여지게 될 제목과 내용을 입력합니다.</p>                                                             |
| <p><strong>이미지</strong>                                                                                                      |
| <br>이미지 사용 선택 시 파일 업로드 또는 이미지 라이브러리를 통해 이미지 등록을 할 수 있습니다.</p><ul><li>이미지 라이브러리는 이미지,갤러리,슬라이더 블록과 연동이 되어 사용이 가능합니다.</li></ul> |
| <p><strong>삭제</strong><br>아코디언 필드를 삭제합니다.</p><ul><li>삭제 된 필드 복구 불가</li></ul>                                                 |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.qshop.ai/customer_support/guide/design/editor/contents/advanced/accordion.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.