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

# 메뉴

메뉴의 블록 종류와 설정 방법을 알아봅니다.

## 메뉴란?

사이트 헤더 영역에 노출이 되는 페이지 메뉴, 로그인 장바구니 등의 블록을 사용 할 수 있습니다.

주로 헤더 영역에 적용하여 사용하지만, 바디 푸터 영역에도 적용이 가능합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F3oBFtDRVKScYFXAu07tB%2F%EB%B8%94%EB%A1%9D_%EB%A9%94%EB%89%B4%20%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0.png?alt=media&amp;token=76fc77c8-d00d-4a80-a0c1-6f9490aa26d5" alt=""><figcaption></figcaption></figure>

### 블록 설정 방법

1. 사용하려는 블록을 추가합니다.
2. 퀵 메뉴의 상세설정을 클릭합니다.
3. 아래 상세 설정을 참고하여, 설정을 변경합니다.

{% hint style="info" %}
블록을 더블 클릭하여 상세 설정창을 열 수 있습니다.
{% endhint %}

## 1. 공통 메뉴

헤더 섹션에 사용이 되는 로그인/회원가입, 장바구니의 요소를 추가합니다. \
회원가입 및 쇼핑 기능이 필요한 경우 사용합니다.

#### 공통 메뉴 블록\_설정 항목

{% tabs %}
{% tab title="기본 설정" %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FZ3YfneXW1ncYR4IlrzKZ%2F%EA%B3%B5%ED%86%B5%EB%A9%94%EB%89%B4-%EA%B8%B0%EB%B3%B8.png?alt=media&amp;token=a68160d1-8698-499d-a31a-c9307eb1cf27" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                                                                                                                                                              |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>리스트</strong><br><strong>유형</strong> : 공통 메뉴의 표시 형태를 선택합니다<br><strong>간격</strong> : 공통 메뉴 사이의 간격을 설정합니다.</p>                                                                                                             |
| <p><strong>활성화 메뉴</strong><br><strong>검색</strong> : 쇼핑 검색 기능을 활성화 합니다.<br><strong>로그인/회원가입</strong> : 로그인/회원가입 기능을 활성화 합니다.</p><ul><li>로그인 시, 마이페이지/로그아웃으로 바꿔 표시됩니다.</li></ul><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%2F4bzx3VQ0Yhe9C4nNfqBw%2F%EA%B3%B5%ED%86%B5%EB%A9%94%EB%89%B4-%EC%8A%A4%ED%83%80%EC%9D%BC.png?alt=media&amp;token=92f785b2-10f5-418a-a51f-41a779ee02ae" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                           |
| --------------------------------------------------------------- |
| <p><strong>내용</strong><br>공통 메뉴의 서체, 크기, 색상, 두께를 설정합니다.<br></p> |
| {% endtab %}                                                    |
| {% endtabs %}                                                   |

## 2. 페이지메뉴

구조패널을 통해 생성한 메뉴를 노출하기 위해 사용합니다.\
메뉴에 마우스를 올릴 시 하위메뉴가 드롭다운 되어 나타나게 됩니다.

#### 페이지 메뉴 블록\_설정 항목

{% tabs %}
{% tab title="기본 설정" %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FiVsIyOTRYSImijeNNZ8E%2F%EB%B8%94%EB%A1%9D_%ED%8E%98%EC%9D%B4%EC%A7%80%20%EB%A9%94%EB%89%B4_%EA%B8%B0%EB%B3%B8.png?alt=media&amp;token=8e1138ef-a6c0-40c5-8841-ed74883fabc4" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                                                                                                                                                                                                         |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>유형<br>페이지 메뉴의 표시 형태를 텍스 또는 아이콘으로 선택합니다.</p>                                                                                                                                                                                                                                |
| <p><strong>텍스트</strong><br><br><strong>넘칠 시 표시</strong><br>콘텐츠의 너보다 메뉴의 수가 넘어갈 경우 표시 방식을 선택합니다.</p><ul><li><strong>기본</strong><br>메뉴 전체가 그대로 표시</li><li><strong>줄바꿈</strong><br>콘텐츠 너비에 맞춰 다음줄로 줄바꿈이 되어 표시</li><li><strong>슬라이드</strong><br>실제 사이트 화면에서 좌우 스크롤하여 이동</li></ul> |
| <p><strong>아이콘</strong><br><br><strong>색상</strong><br>아이콘의 색상 및 투명도를 설정합니다.<br><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%2FtPIULMybGbC3TDWRCJtu%2F%EB%B8%94%EB%A1%9D_%ED%8E%98%EC%9D%B4%EC%A7%80%20%EB%A9%94%EB%89%B4_%EC%8A%A4%ED%83%80%EC%9D%BC.png?alt=media&amp;token=c10f21ca-44fb-44a5-88da-e7f537141b31" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                                                                                                                                                                                                                                                                                        |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><strong>내용</strong><br>메인 메뉴와 서브메뉴를 개별 설정할 수 있습니다.</p><ul><li><strong>서체</strong><br>메뉴의 서체를 선택합니다.</li><li><strong>크기</strong><br>서체의 크기를 선택합니다.</li><li><strong>간격</strong><br>페이지 메뉴 사이의 간격을 설정합니다.</li><li><p><strong>배경</strong><br>배경 색상 및 투명도를 설정합니다.</p><ul><li>텍스트 유형 선택 시 서브 메뉴 배경 설정 가능</li><li>아이콘 유형 선택 시 메인 메뉴 배경 설정 가능</li></ul></li></ul> |
| <p><strong>활성화 상태</strong><br>활성화 상태 설정은 메인 / 서브 에 공통 적용이 됩니다.</p><ul><li><strong>표시</strong><br>모두 / 메인 / 서브 중 활성화 적용이 될 위치를 선택합니다.</li><li><strong>유형</strong><br>활성화 상태의 표시 형식을 선택합니다.</li><li><strong>색상</strong><br>활성 메뉴의 색상 및 투명도를 설정합니다.</li></ul>                                                                                                   |
| {% endtab %}                                                                                                                                                                                                                                                                                                                                                 |
| {% endtabs %}                                                                                                                                                                                                                                                                                                                                                |