> 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/section.md).

# 섹션

섹션은 디자인 작업의 가장 밑 바탕이 되는 영역으로, 섹션 위 다양한 블록을 추가, 배치하여 페이지 디자인을 하게 됩니다.

하나의 페이지에는 여러개의 섹션을 사용하여 디자인을 할 수 있으며 다양한 형태의 섹션을 바탕으로 페이지 주제에 맞는 디자인을 해나갈 수 있습니다.

## 1. 섹션 빠른 추가

페이지 디자인은 섹션에 블록을 직접 추가하고 레이아웃을 구성하여 페이지 디자인을 해나가게 됩니다.

섹션 빠른 추가에는 빈섹션, 상품목록 섹션, 슬라이더 섹션, 탭 섹션이 존재합니다.\
섹션 위 블록을 추가하여 디자인을 하는 과정을 동일하며, 디자인의 방향에 따라 섹션을 다양하게 활용 할 수 있습니다.

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

모든 섹션의 배경색, 이미지 등 기본 설정은 오른쪽 속성패널을 통해 설정하실 수 있습니다.

{% hint style="info" %}
섹션 설정의 자세한 내용은 \[[속성패널 가이드](/customer_support/guide/design/editor/rnb.md)]를 참고 부탁드립니다.
{% endhint %}

### 1-1. 빈 섹션

가장 기본이 되는 섹션으로 빈 바탕에 원하는 블록을 사용하여 디자인을 할 수 있습니다.

{% hint style="info" %}
블록 추가, 배치에 대한 자세한 내용은 \[[블록 가이드](/customer_support/guide/design/editor/contents.md#undefined-2)]를 참고 부탁드립니다.
{% endhint %}

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

### 1-2. 게시판 섹션

{% hint style="warning" %}
게시판 섹션은 다른 블록 추가 및 게시판 블록의 크기 설정이 불가능합니다.
{% endhint %}

게시판 섹션은 섹션 내 블록을 추가하여, 디자인을 하는 것이 아닌 섹션 자체에 게시판 블록이 적용 되어있는 형태로 구성 되어있습니다.

섹션을 추가한 후 사이트의 기본 레이아웃 및 게시글 표시 개수, 레이아웃 테마에 따라 블록과 섹션의 크기가 결정 됩니다.

빈 섹션에 게시판 블록을 직접 추가하여 사용을 하실 수도 있으며, 게시판 블록 사용 방법 및 설정 방법은\
\[[게시판 블록](/customer_support/guide/design/editor/contents/advanced/board.md)] 가이드를 참고 부탁드립니다.

{% hint style="info" %}
게시판 및 게시글 관리는 \[[게시판 관리](/customer_support/guide/admin/contents/board.md)] 가이드를 참고 부탁드립니다.
{% endhint %}

### 1-3. 상품 목록 섹션

{% hint style="warning" %}
상품 목록 섹션은 다른 블록 추가 및 상품 목록 블록의 크기 설정이 불가능합니다.
{% endhint %}

상품 목록 섹션은 색션 내 블록을 추가하여, 디자인을 하는 것이 아닌 섹션 자체에 상품 블록이 적용이 되어있는 형태로 구성이 되어있습니다.

섹션을 추가한 후 상품 목록 설정의 상품 노출 개수 및 간격에 따라 블록과 섹션의 크기가 결정이 됩니다.

빈 섹션을 사용하여 상품 목록 블록을 직접 추가하여 사용을 할 수도 있지만, 상품 목록 섹션을 활용하여 보다 쉽게 상품 노출을 위한 페이지 디자인을 할 수 있습니다.

{% hint style="info" %}
상품 목록의 자세한 설정 방법은 \[[상품 목록 가이드](/customer_support/guide/design/editor/contents/product.md#id-1)]를 참고 부탁드립니다.
{% endhint %}

### 1-4. 슬라이더 섹션

슬라이더 섹션은 여러개의 섹션이 슬라이드가 되는 형태로 구성이 되어있습니다.

기본적인 디자인 방법 및 공통 설정 방법은 빈 섹션과 동일하며, 서로 다른 디자인의 섹션을 한 위치에서 슬라이드 시킬 수 있다는 큰 장점을 가지고 있습니다.

각각의 슬라이드 섹션을 개별적으로 디자인이 가능하기때문에 홈페이지에 사이트의 중요 정보, 이벤트 정보 등을 알리는 형태로 활용이 가능합니다.

슬라이드 섹션의 설정 방법은 퀵 메뉴를 통해 설정창을 확인할 수 있다.

{% tabs %}
{% tab title="기본" %}

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

| 항목 설명                                                                                                                                                                                                                                                                                      |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><strong>전환 효과</strong><br>다른 섹션으로 전환이 될 때 적용되는 전환 효과를 선택합니다.</p><ul><li>기본, 페이드, 플립 중 선택 가능</li></ul>                                                                                                                                                                                   |
| <p><strong>좌우화살표</strong><br>슬라이더 좌우에 이전,다음 페이지로 이동을 위한 버튼 노출 여부를 설정합니다.</p><hr><p><strong>색상</strong><br>좌우 화살표 버튼의 색상 및 투명도를 설정합니다.</p><hr><p><strong>크기</strong><br>좌우 화살표의 크기를 설정합니다.</p><hr><p><strong>위치</strong><br>좌우 화살표의 위치를 설정합니다.</p><ul><li>px값이 클 수록 중앙으로 모이게 됩니다.</li></ul> |
| <p><strong>페이지네이션</strong><br>슬라이더 가운데 아래 표시가 될 페이지네이션 버튼 노출 여부를 설정합니다.</p><hr><p><strong>색상</strong><br>페이지네이션 버튼의 색상 및 투명도를 설정합니다.</p><hr><p><strong>위치</strong><br>페이지네이션 버튼의 위치를 설정합니다.</p><ul><li>PC값이 작을 수록 섹션 아래에 위치합니다.</li></ul>                                                  |
| <p><strong>자동 넘김</strong><br>페이지의 자동 넘김 여부를 설정합니다.</p><hr><p><strong>재생 간격</strong><br>슬라이드가 넘어가는 속도를 설정합니다.</p><hr><p><strong>마우스 올릴 시 일지 정지</strong><br>마우스를 슬라이드 위에 올리면 동작이 일시 정지 됩니다.</p>                                                                                              |
| {% endtab %}                                                                                                                                                                                                                                                                               |

{% tab title="구성" %}

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

| 항목 설명                                                                  |
| ---------------------------------------------------------------------- |
| <p><strong>+ 섹션 추가</strong><br>슬라이드가 될 섹션을 추가합니다.</p>                  |
| <p><strong>- 섹션 삭제</strong><br>추가 된 섹션을 삭제합니다.</p>                     |
| <p><strong>이름 변경</strong><br>섹션의 이름을 클릭하여, 각각의 섹션의 이름을 수정할 수 있습니다.</p> |
| {% endtab %}                                                           |
| {% endtabs %}                                                          |

### 1-5. 탭 섹션

탭 섹션은 여러개의 섹션을 탭을 통해 전환이 되는 형태로 구성이 되어있습니다.

기본적인 디자인 방법 및 공통 설정 방법은 빈 섹션과 동일하며, 한 위치에서 여러개의 섹션을 만들고 탭을 통해 각 탭의 주제에 맞는 콘텐츠를 보여주는 방법으로 활용이 가능합니다.

{% tabs %}
{% tab title="기본" %}

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

| 항목 설명                                                                                                                                                                                                                                                                                                                                                       |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>테마</strong><br>탭 메뉴의 활성 테마를 선택합니다</p>                                                                                                                                                                                                                                                                                                            |
| <p><strong>정렬</strong><br>탭 메뉴의 정렬 위치를 선택합니다.</p><ul><li>왼쪽 가운데 오른쪽 중 선택 가능</li></ul>                                                                                                                                                                                                                                                                       |
| <p><strong>글자</strong><br>탭 메뉴의 서체의 종류, 크기, 두께를 선택합니다.</p>                                                                                                                                                                                                                                                                                                  |
| <p><strong>색상</strong><br><strong>텍스트</strong><br>탭 메뉴의 텍스트 색상 및 투명도를 설정합니다.</p><hr><p><strong>활성 텍스트</strong><br>활성 된 탭 메뉴의 텍스트 색상 및 투명도를 설정합니다.</p><hr><p><strong>활성 테마</strong><br>활성 된 탭 메뉴의 테마 색상 및 투명도를 설정합니다.</p><hr><p><strong>배경</strong><br>탭 메뉴의 배경 색상 및 투명도를 설정합니다.</p><hr><p><strong>밑줄</strong><br>탭 메뉴와 탭 영역을 구분 짓는 밑줄의 색상 및 투명도를 설정합니다.</p> |
| {% endtab %}                                                                                                                                                                                                                                                                                                                                                |

{% tab title="구성" %}

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

| 항목 설명                                                                  |
| ---------------------------------------------------------------------- |
| <p><strong>+ 섹션 추가</strong><br>슬라이드가 될 섹션을 추가합니다.</p>                  |
| <p><strong>- 섹션 삭제</strong><br>추가 된 섹션을 삭제합니다.</p>                     |
| <p><strong>이름 변경</strong><br>섹션의 이름을 클릭하여, 각각의 섹션의 이름을 수정할 수 있습니다.</p> |
| {% endtab %}                                                           |
| {% endtabs %}                                                          |

## 2. 섹션형 템플릿

섹션형 템플릿은 디자인 구성이 되어있는 형태의 템플릿 입니다.

주제에 맞는 다양한 템플릿을 선택하여, 템플릿 내 이미지, 텍스트 등을 수정하는 방법으로 보다 쉽고 빠르게 페이지 디자인을 해나갈 수 있습니다.

{% hint style="info" %}
공통 설정 및 섹션의 기본 사용방법은 빈 섹션과 동일합니다.
{% endhint %}

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


---

# 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/section.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.