# 상단 편집

## 헤더 페이지

메인 페이지와는 분리된 헤더 전용 편집 모드예요. 사이트의 첫인상을 결정하는 로고, 메뉴, 아이콘 등을 독립적으로 디자인하고 관리할 수 있어요.

### 편집 진입 및 종료

<div align="left"><figure><img src="/files/E5qfCznB9OhEfkV7qbwl" alt=""><figcaption></figcaption></figure></div>

1. **진입**: 메인 편집 화면 상단의 헤더 영역에 마우스를 올리고, \[헤더 설정] 버튼을 클릭하면 편집 모드가 시작돼요.

<div align="left"><figure><img src="/files/aiEieQ9QqHTBHS0bjHR6" alt=""><figcaption></figcaption></figure></div>

1. **종료**: 편집을 마치면 좌측 상단의 \['메인 디자인설정으로 돌아가기'] 버튼을 클릭하여 메인 편집 화면으로 복귀해요.
2. **디자인 설정**: '헤더페이지'에 공통으로 적용될 디자인을 설정해요. 배경, 텍스트, 문단 스타일 등을 정의할수 있어요.
   * **배경**: 사이트 전체의 기본 배경색이나 배경 이미지를 설정해요.
   * **텍스트**: 사이트에서 사용할 기본 글꼴, 크기, 색상을 지정해요.
   * **문단**: 줄 간격이나 문단 간격 등 텍스트의 배치 스타일을 미리 정의해요.

***

## 기본 헤더

<figure><img src="/files/2RlgaAg2YKrAVbvnIoZ1" alt=""><figcaption></figcaption></figure>

1. **기본 헤더**는: <mark style="color:$primary;">**요소 삭제나 변경이 불가능한 필수 고정 헤더**</mark>에요. 전문가가 디자인한 레이아웃 틀은 유지되지만, 헤더 영역이나 각 요소를 클릭하면 우측 속성 패널이 열려 배경, 테두리 및 스타일을 수정할 수 있어요.
2. **배경**: 배경색을 지정하거나 이미지를 등록해요.
3. **테두리**: 테두리(방향, 종류, 굵기, 색상)를 설정해요.

### 구성 요소

<div align="left"><figure><img src="/files/08pS2vWZHXIcSBT0mhkQ" alt=""><figcaption></figcaption></figure></div>

1. **상단 배너**: "디자인> 쇼핑몰 배너 관리 > 상단 배너 관리"  `메이크샵` > `디자인` > `쇼핑몰 배너관리` > `상단 배너 관리` 메뉴에서 등록된 배너가 노출 되요
   * 스타일 : 배너 영역의 테두리 스타일(굵기,색상 등)설정 할 수 있어요
2. **로고**: **텍스트 로고** 또는 **이미지 로고** 중 하나를 선택해 표시할 수 있어요.
   * **이미지**
     * \[이미지 관리]에서 이미지를 업로드한 후 선택한 이미지가 표시돼요. (PC/모바일 각각 등록 가능)
     * PC 또는 모바일만 등록한 경우, 등록한 디바이스에만 로고가 노출돼요.&#x20;
   * **텍스트**
     * 우측패널에서 입력한 텍스트 로고가 표시돼요.&#x20;
     * **텍스트가 비어 있으면** 기본 로고 텍스트("Default Logo")가 노출돼요.&#x20;
3. **카테고리**: 쇼핑몰의 '상품 카테고리'가 자동 연동되어 표시돼요.
   * **기본 상태**: 평소 노출되는 텍스트의 글꼴, 크기, 색상 등을 설정해요.
   * **마우스 오버**: 마우스를 올렸을 때 변경될 스타일(색상, 굵기)을 설정해요.
4. **공통 메뉴**: 우측 상단의 기능 아이콘(로그인, 장바구니 등) 영역이에요.
   * **노출 설정**: 필요한 아이콘만 선택하여 켜거나 끌 수 있어요.
   * **스타일**: 아이콘의 색상, 크기, 정렬을 설정해요.

## 추가 헤더

<div align="left"><figure><img src="/files/SCu9f0MD15VeHsL3I6Z5" alt=""><figcaption></figcaption></figure></div>

1. **추가헤더:** 기본 헤더만으로 부족할 경우, 위/아래에 기본 섹션을 추가하여 자유롭게 디자인 할 수 있어요.
   * **섹션 추가**: 좌측 패널(LNB)에서 '기본 섹션'을 드래그하여 헤더의 위쪽이나 아래쪽 끝으로 가져다 놓으세요.
   * **요소 추가**: 추가한 섹션 안에 텍스트나 버튼을 배치하여 텍스트,   이미지, 버튼 등을 자유롭게 구성해요.


---

# Agent Instructions: 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:

```
GET https://help.makeshop.co.kr/manual/undefined-1/builder/undefined-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.