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

# 헤더 고정하기

## 헤더 고정이란?

헤더 영역은 페이지 이동을 위한 메뉴, 로그인/가입, 로고 등의 콘텐츠를 사용하는 영역입니다.

헤더 고정을 하게 되면, 스크롤 시 헤더 영역이 따라 내려오며 사용자는 어느 위치에서든 헤더 영역의 콘텐츠를 활용하여 페이지 이동 및 로그인 등을 할 수 있습니다.

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

## 1. 헤더 고정하기

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

1-2. 섹션 퀵 메뉴의 고정 버튼을 클릭합니다.

1-3. 헤더 고정 토글을 활성화 합니다.

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

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

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

## 2. 스크롤 시 색상 변경하기

**\[1. 헤더 고정하기]**&#xB97C; 통해 스크롤 시 헤더가 따라 내려오도록 설정을 할 수 있습니다.

이때, 스크롤 시 헤더의 색상을 다르게하여 다양한 형태의 디자인을 할 수 있으며 배경에 투명도를 적용하여 스크롤 시 본문의 내용이 보여지도록 구현을 할 수 도 있습니다.

2-1. **\[1. 헤더 고정하기]**&#xC758; 내용을 참고하여, 헤더 고정을 합니다.

2-2. 스크롤 시 색상 변경 토글 활성화하여, 스크롤 시 보여지는 헤더 영역의 색상 설정합니다.

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

<table><thead><tr><th width="120">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>섹션 배경</strong></td><td>헤더 섹션의 배경 색상을 설정합니다.</td></tr><tr><td><strong>텍스트</strong></td><td><p>헤더 섹션에 적용 된 텍스트 색상을 설정합니다.</p><ul><li>텍스트 블록을 통해 작성이 된 텍스트의 색상만 변경이 됩니다.</li></ul></td></tr><tr><td><strong>메뉴</strong></td><td>헤더 영역에 적용 된 페이지 메뉴 블록의 색상을 설정합니다.</td></tr><tr><td><strong>버튼</strong></td><td>헤더 영역에 적용 된 버튼 블록의 색상을 설정합니다.</td></tr></tbody></table>

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

<figure><img src="/files/30v2wwBCPTbpzlKrr0nV" alt=""><figcaption></figcaption></figure>