> 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FZWCP9p30SGIf6LiI7gqo%2F1_%ED%97%A4%EB%8D%94%20%EA%B3%A0%EC%A0%95.png?alt=media&amp;token=0ed330e1-9f69-4d82-81e4-41dcfd460afb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fjc8NQTJ3mu7lUQdfZV10%2F2_%ED%97%A4%EB%8D%94%20%EA%B3%A0%EC%A0%95_%EC%8A%A4%ED%81%AC%EB%A1%A4.gif?alt=media&amp;token=b3775863-ad51-4094-b335-eaae02dd3b72" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FUkl0kQzoSIrlRZPBfe96%2F3_%ED%97%A4%EB%8D%94%20%EA%B3%A0%EC%A0%95_%EC%83%89%EC%83%81%20%EC%84%A4%EC%A0%95.png?alt=media&amp;token=4b5e7995-4038-4de0-be51-e3f2b7feec56" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FcVhKC4nrzEef0Tzix79c%2F%ED%97%A4%EB%8D%94%EA%B3%A0%EC%A0%95_%EC%83%89%EC%83%81%EC%84%A4%EC%A0%95.gif?alt=media&amp;token=94379f84-4a66-4c51-98ff-8639edec9e4b" alt=""><figcaption></figcaption></figure>