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

# 헤더 디자인하기

## 헤더 구성 방법

### 1. 로고 추가하기

로고는 이미지 또는 텍스트 블록을 추가하여 사용할 수 있어요.

#### (1) 이미지 블록으로 로고 추가하기

① 왼쪽 추가 패널에서 `미디어(단축키 M)` > `이미지(단축키 I)`를 클릭하여 원하는 위치에 추가해 주세요.\
② 추가한 이미지 블록의 `상세설정`에서 `파일 선택` 또는 `이미지 라이브러리`를 클릭하여 로고 이미지를 적용해 주세요.

로고 이미지를 클릭하면 메인 홈으로 이동하도록 설정해 볼게요.

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

{% stepper %}
{% step %}
추가한 로고 이미지를 클릭하고, 오른쪽 속성패널에 있는 `고급`을 클릭해 주세요.
{% endstep %}

{% step %}
`클릭이벤트` > `내부 링크 연결` > 홈(메인) 페이지를 선택해 주세요.
{% endstep %}

{% step %}
`저장` 및 `게시하기`를 클릭해 주세요. 설정한 내용은 게시된 사이트에서 확인할 수 있어요.
{% endstep %}
{% endstepper %}

#### **(2) 텍스트 블록으로 로고 추가하기**

① 왼쪽 추가 패널에서 `텍스트(단축키 T)`를 클릭하여 적당한 크기의 텍스트 블록을 추가해 주세요.\
② 추가한 텍스트 블록을 더블 클릭하여 브랜드명을 입력해 주세요.

로고 텍스트를 클릭하면 메인 홈으로 이동하도록 설정해 볼게요.

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

{% stepper %}
{% step %}
드래그 또는 ctrl+a를 눌러 입력한 텍스트 전체를 선택해 주세요.
{% endstep %}

{% step %}
텍스트 에디터 박스에 있는 `링크 삽입` 아이콘을 클릭해 주세요.
{% endstep %}

{% step %}
사이트 URL(예: <https://domain.qshop.ai>) 또는 이동하려는 페이지 URL(예:/home)을 입력 후 `확인`을 클릭해 주세요.
{% endstep %}

{% step %}
`저장` 및 `게시하기`를 클릭해 주세요. 설정한 내용은 게시된 사이트에서 확인할 수 있어요.
{% endstep %}
{% endstepper %}

### 2. 페이지메뉴 추가하기

사이트를 구성하고 있는 페이지메뉴 리스트를 추가할 수 있어요. \
왼쪽 추가 패널에서 `메뉴(단축키 N)` > `페이지메뉴(단축키 P)` 클릭 후 드래그하여 원하는 곳에 위치시켜 주세요.

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

### 3. 공통메뉴 추가하기

쇼핑몰 사이트라면 반드시 필요한 로그인 및 장바구니 메뉴를 추가할 수 있어요.\
왼쪽 추가 패널에서 `메뉴(단축키 N)` > `공통메뉴(단축키 C)` 클릭 후 드래그하여 원하는 곳에 위치시켜 주세요.

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

### 4. 헤더 합치기 및 분리하기

헤더 섹션 클릭 후 합치기 아이콘을 클릭하면, 헤더 바로 아래 있는 섹션과 합쳐져요. \
동일한 아이콘을 한번 더 클릭하면 헤더는 다시 분리돼요.

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.qshop.ai/customer_support/guide/tip/header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.