> For the complete documentation index, see [llms.txt](https://docs.storyhub.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.storyhub.co.kr/functions/contents/banner.md).

# 배너

## 🚀 기능 소개

홈페이지에 노출되는 배너를 직접 등록, 수정, 삭제가 가능한 기능입니다.

![](/files/-Mgo4id2PO7AUYk_Wt3U)

## 🧱 화면 구성

![](/files/-MdQ3up9hxVJ7yrrVCJN)

### 1. 카테고리

배너 그룹 목록이 나타납니다.\
각 그룹을 클릭하면 해당 배너그룹의 배너만 필터링하여 확인할 수 있습니다.

### 2. 배너 목록

현재 그룹에 해당하는 전체 배너입니다.\
배너 노출 순으로 상단 부터 정렬되어 있으며, 배너 노출기간이 만료된 경우 하단에 배치되어 있습니다.

해당 배너의 적정 사이즈가 표기되어 있으므로 꼭 확인해주세요.

### 3. 필터 검색

현재 그룹에 해당하는 배너의 이름으로 검색하여 필터링이 가능합니다.

### 4. 액션 영역

새로운 배너를 등록할 수 있습니다.

### 5. 컨트롤 영역

현재 배너의 정보를 수정하거나 그룹을 변경하고 삭제할 수 있으며\
노출 순서를 변경할 수 있습니다.

## 🙋‍♀️ 이용 안내

### 1. 등록

![](/files/-MdQ4xa0XmSllxy4rAoQ)

우측 상단의 액션 영역에 배너 등록 버튼을 클릭해주세요.

<div align="center"><img src="/files/-MdQPeTynKK104D-Jllo" alt=""></div>

위의 항목을 입력해주세요. \
기간 설정시 기간제한 없이 노출 체크를 해제하신 뒤 기간을 입력해주세요.\
우선 순위의 경우 숫자가 낮을수록 상위 노출 됩니다.

연결링크의 경우 \
홈페이지 내부 링크 (게시물)은 새로운 창에서 열기 체크 해제를,\
홈페이지 외부 링크는 새로운 창에서 열기 체크를 권장합니다.

{% hint style="warning" %}
주의사항\
이미지 업로드시 권장사이즈와 다른 경우 배너가 잘못 노출되는 경우가 발생합니다.\
사이즈를 꼭 확인하여 업로드해주세요.
{% endhint %}

###

### 2. 수정

![](/files/-MdQRGy2CB7DjBrB5rca)

수정을 희망하는 배너 컨트롤 영역에서 수정 버튼을 클릭해주세요.

![](/files/-MdQR_RpZaA0Y72rWM6z)

수정할 내용을 입력후 저장 버튼을 클릭해주세요.

### 3. 삭제

<div align="left"><img src="/files/-MdQSI0wmUCKQpv3tsKf" alt=""></div>

삭제를 희망하시는 배너 컨트롤 영역의 우측에 있는 X버튼을 클릭해주세요.

<div align="center"><img src="/files/-MdQSZ8rKCRjEgQsLEAz" alt=""></div>

확인창에서 확인 버튼을 클릭해주세요.

{% hint style="danger" %}
주의사항\
삭제된 내용은 복구 하실 수 없습니다.
{% endhint %}

### 4. 그룹이동

<div align="left"><img src="/files/-MdQT-DBYeDiGFIjVRo1" alt=""></div>

그룹 이동을 희망하는 배너 컨트롤 영역에서 퍼즐 모양의 아이콘을 클릭해주세요.

![](/files/-MdQT5R1hANqeJG5J-6H)

변경할 그룹을 선택하고 저장 버튼을 클릭해주세요.

### 5. 순서 변경

<div align="left"><img src="/files/-MdQTR5S4SZbwCctrOBe" alt=""></div>

순서 변경을 위해서는 먼저 카테고리의 그룹을 선택해주세요.

![](/files/-MdQThyclDzD7Gcawfxt)

배너의 컨트롤 영역에서 화살표 모양을 마우스로 클릭한 상태로 드래그하여 조정할 수 있습니다.
