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

# 섹션 고정하기

섹션 고정에 대해 알아봅니다.

## 섹션 고정이란?

섹션 고정 기능은 스크롤 시 섹션이 고정 되어 지속적으로 따라오는 형태의 기능입니다.

설정 방법에 따라 상단, 중단, 하단의 위치에 고정이 가능하며, 이 기능을 활용하여 상단 고정 배너 , 하단 고정 입력폼 등 다양한 방식으로 구현이 가능합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FcHx1RTaMgc17yLgFILAC%2F2_%EC%84%B9%EC%85%98%20%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0_%EC%A0%84%EC%B2%B4.png?alt=media&amp;token=204bdf9b-0fc3-4303-be9b-d9cb4db586aa" alt=""><figcaption></figcaption></figure>

자세한 설정 방법은 아래 가이드를 참고 부탁드립니다.

1\. 큐샵 로그인 후 에디터에 접속합니다. ([에디터 접속하기](/customer_support/guide/design.md#undefined-1))

2\. 빈 섹션을 추가합니다. ([섹션 추가하기](/customer_support/guide/design/editor/contents.md#id-1))

{% hint style="danger" %}
슬라이더 섹션과 탭 섹션은 고정이 불가능합니다.
{% endhint %}

3\. 섹션 퀵 메뉴의 고정 버튼을 클릭하여 원하는 활용 방법에 따라 고정위치, 배치, 콘텐츠를 고정시킬 환경을 선택합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FC3SRr1qPXHD6sM1wRnho%2FFrame%201707481390.png?alt=media&amp;token=d3d09e2e-ad54-444a-b0bb-aa80c4ec6d5c" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="168">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>고정 위치</strong></td><td><p>섹션의 고정 위치를 상단, 중단, 하단 중 선택을 합니다.<br><br><strong>상단</strong><br>설정한 섹션이 브라우저 상단에 위치하게 될 경우 동작합니다.</p><hr><p><strong>중단</strong><br>설정한 섹션이 브라우저 중단에 위치하게 될 경우 동작합니다.</p><hr><p><strong>하단</strong><br>설정한 섹션이 브라우저 하단에 위치할 경우 동작이 중지 됩니다.</p></td></tr><tr><td><strong>배치</strong></td><td>섹션의 고정위치를 화면의 맨 앞 또는 맨 뒤 중 선택을 합니다.</td></tr><tr><td><strong>디바이스</strong></td><td>PC와 모바일 환경 중 고정을 할 환경을 선택합니다.</td></tr></tbody></table>

4\. 미리보기 또는 게시하기를 통해 고정 된 섹션을 확인합니다.

## 활용 예시

### 1. 상단 고정 배너 설정하기

상단 고정 설정을 활용하여, 스크롤 시 고정이 되는 배너를 등록 할 수 있습니다.

1-1. 섹션을 추가합니다. ([섹션 추가하기](/customer_support/guide/design/editor/contents.md#id-1))

1-2. 섹션의 위치를 헤더 바로 아래 위치하도록 이동합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FEKTRZmJLpXwHeaVkrDwl%2F4_%EC%84%B9%EC%85%98%20%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0_%EC%83%81%EB%8B%A8_%EC%B6%94%EA%B0%80.png?alt=media&amp;token=cf809d31-92b8-4611-ae0d-799a836691f8" alt=""><figcaption></figcaption></figure>

1-3. 이미지, 스크롤링 블록 등 다양한 블록을 활용하여 섹션 디자인을 합니다.&#x20;

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FPiSRniEFECbT5R55vKsC%2F5_%EC%84%B9%EC%85%98%20%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0_%EC%83%81%EB%8B%A8_%EB%94%94%EC%9E%90%EC%9D%B8.png?alt=media&amp;token=451041d6-cd4a-4a93-b1bd-7c985cd0bceb" alt=""><figcaption></figcaption></figure>

1-4. 퀵 메뉴의 **\[고정]** 아이 콘을 클릭합니다.&#x20;

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fsd82HMdYq9bC03N6J4IR%2F6_%EC%84%B9%EC%85%98%20%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0_%EC%83%81%EB%8B%A8_%EA%B3%A0%EC%A0%95.png?alt=media&amp;token=ed71860b-a6df-4d3e-84a2-2748502c762f" alt=""><figcaption></figcaption></figure>

1-5. 아래 이미지와 같이 고정 위치와 배치 순서를 설정합니다.

{% hint style="info" %}
디바이스 환경은 선택적으로 선택합니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fzr4iEBkt5HHAptwX66dm%2F7_%EC%84%B9%EC%85%98%20%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0_%EC%83%81%EB%8B%A8_%EC%84%A4%EC%A0%95.png?alt=media&amp;token=b0b0139a-83e9-4da1-824b-137ab1968f71" alt=""><figcaption></figcaption></figure>

1-6. 미리보기 또는 게시하기를 통해 고정 된 섹션을 확인합니다.&#x20;

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F97ccUgTStyYexaIa1N8n%2F8_%EC%84%B9%EC%85%98%20%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0_%EC%83%81%EB%8B%A8_%EC%A0%81%EC%9A%A9.png?alt=media&amp;token=5a44edce-1a3f-4ef7-8e15-f751bfdaf09b" alt=""><figcaption></figcaption></figure>

### 2. 하단 고정 배너 설정하기

하단 고정 설정을 활용하여, 스크롤 시 고정이 되는 배너를 등록 할 수 있습니다.

2-1. 섹션을 추가합니다. ([섹션 추가하기](/customer_support/guide/design/editor/contents.md#id-1))

2-2. 섹션의 위치를 푸터 바로 위 위치하도록 이동합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F9r9VdJOYRmrp16UjCuCO%2F9_%EC%84%B9%EC%85%98%20%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0_%ED%95%98%EB%8B%A8_%EC%B6%94%EA%B0%80.png?alt=media&amp;token=5a4e4067-618e-4429-9a61-4a72b720a581" alt=""><figcaption></figcaption></figure>

2-3. 이미지, 버튼 블록 등 다양한 블록을 활용하여 섹션 디자인을 합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F5spKqPGKkYlJGy1W4Q63%2F10_%EC%84%B9%EC%85%98%20%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0_%ED%95%98%EB%8B%A8_%EB%94%94%EC%9E%90%EC%9D%B8.png?alt=media&amp;token=05789832-d6b3-484e-9722-602b66449ba4" alt=""><figcaption></figcaption></figure>

2-4. 퀵 메뉴의 **\[고정]** 아이콘을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FLf6HWx40bCR1tx71GGC1%2F11_%EC%84%B9%EC%85%98%20%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0_%ED%95%98%EB%8B%A8_%EA%B3%A0%EC%A0%95.png?alt=media&amp;token=e8200e61-23e8-4f3e-8342-a4f23b064381" alt=""><figcaption></figcaption></figure>

2-5. 아래 이미지와 같이 고정 위치와 배치 순서를 설정합니다.

{% hint style="info" %}
디바이스 환경은 선택적으로 선택합니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FJvsjxnVjl0QBK2rz1Ljk%2F12_%EC%84%B9%EC%85%98%20%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0_%ED%95%98%EB%8B%A8_%EC%84%A4%EC%A0%95.png?alt=media&amp;token=4765fec4-366a-4f0b-8171-0de3434fa93c" alt=""><figcaption></figcaption></figure>

2-6. 미리보기 또는 게시하기를 통해 고정 된 섹션을 확인합니다.<br>

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FCRB6WXYqRx9yNkbFcUNx%2F13_%EC%84%B9%EC%85%98%20%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0_%ED%95%98%EB%8B%A8_%EC%A0%81%EC%9A%A9.png?alt=media&amp;token=d39f64d2-07c9-492e-906e-394be12c22c5" alt=""><figcaption></figcaption></figure>