> For the complete documentation index, see [llms.txt](https://help.makeshop.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.makeshop.co.kr/manual/undefined-1/builder/undefined-1.md).

# 상단 편집

## 헤더 페이지

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

### 편집 진입 및 종료

<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)에서 '기본 섹션'을 드래그하여 헤더의 위쪽이나 아래쪽 끝으로 가져다 놓으세요.
   * **요소 추가**: 추가한 섹션 안에 텍스트나 버튼을 배치하여 텍스트,   이미지, 버튼 등을 자유롭게 구성해요.