> 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="/files/FrY3CnqDUZGnWyLNSzdM" 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="/files/j2pIj87iSgblzk9vsyXX" 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="/files/oRV0G2XnC9hozQ2uRAaU" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<figure><img src="/files/59lXp2rHEPMnxqQJQb4R" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

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