# 헤더 디자인하기

## 헤더 구성 방법

### 1. 로고 추가하기

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

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

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

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FvHzh7dKfIal9vmRK8LmJ%2F01.png?alt=media&#x26;token=f90e7b23-3f34-4bd6-82e1-6a75f4455506" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FZav2thdixgCrcy9ko7eG%2F02.png?alt=media&#x26;token=acacda39-3fa8-42eb-ad29-2f99936e8b2b" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FCXLuxH5UUsEU6U50V2DM%2F03.png?alt=media&#x26;token=01559980-674b-4f1e-b436-726d22ddd0d7" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FP6YCD8og2oWiRDYzSfWB%2F04.png?alt=media&#x26;token=3f7094d1-f2d4-4053-9508-427368d6a5b5" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Flbur4Nf4CmEuSfdXk7OW%2F05.png?alt=media&#x26;token=15b0ced4-5060-4e79-95ce-8e1e16fb2fef" alt=""><figcaption></figcaption></figure>