> 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FPvqturkdrwDTctcoDcSh%2F1_%EC%84%B9%EC%85%98%20%EB%B9%A0%EB%A5%B8%20%EC%B6%94%EA%B0%80.png?alt=media&amp;token=c3961d3d-0375-4176-9005-367098708e99" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FeR1VyGbBcD4UmAeEZaSi%2F%EC%84%B9%EC%85%98%20%EC%B6%94%EA%B0%80.gif?alt=media&amp;token=1e3299e4-942b-4b4c-a0c4-58aa9f89a918" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FeyDeih4gBKy6yn75XBDE%2F2_%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94%20%EC%84%B9%EC%85%98_%EA%B8%B0%EB%B3%B8.png?alt=media&amp;token=9d9a4a91-a4a6-4f4e-9949-783e02cc92b4" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FvHCSqGaerRni6jw4ev4S%2F3_%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94%20%EC%84%B9%EC%85%98_%EA%B5%AC%EC%84%B1.png?alt=media&amp;token=0312d8be-58ea-44d4-ba15-2bf6001d82dc" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FRQnL8x9sxgP7fz3DMJn7%2F4_%ED%83%AD%20%EC%84%B9%EC%85%98_%EA%B8%B0%EB%B3%B8.png?alt=media&amp;token=69292c74-e193-49c3-8422-c17e354f08c2" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fm3Fpi8TGddfN0dornkbW%2F5_%ED%83%AD%20%EC%84%B9%EC%85%98_%EA%B5%AC%EC%84%B1.png?alt=media&amp;token=0139d76e-a000-4848-a2df-3f2d0709446e" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FgWaZYz9HiHIK7j8GfzUs%2F6_%EC%84%B9%EC%85%98%20%ED%85%9C%ED%94%8C%EB%A6%BF.png?alt=media&amp;token=38210fea-a259-45a8-929e-069bb1a6df50" alt=""><figcaption></figcaption></figure>