> For the complete documentation index, see [llms.txt](https://didisam.gitbook.io/administrator-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://didisam.gitbook.io/administrator-guide/preparation-edu/homepage/decorating-homepage2.md).

# 홈페이지 꾸미기 2

홈페이지 꾸미기 1편에 이어 2편을 진행하겠습니다 ( 배너 / 슬라이드 배너 )

## 배너

#### **1️⃣ 새로운 섹션 추가하기**

마우스를 편집 영역 위에 올려두고 그때 위, 아래로 뜨는 '새로운 섹션 추가하기' 버튼을 눌러주세요.

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2F0SsSKZDhaA8ETNn6SPjb%2F%E1%84%87%E1%85%A2%E1%84%82%E1%85%A5%20%E1%84%8B%E1%85%A7%E1%86%BC%E1%84%8B%E1%85%A7%E1%86%A8%20%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%A8.png?alt=media&amp;token=aeaf134f-a9f4-4065-99fb-964a5dd29e95" alt=""><figcaption></figcaption></figure>

새로운 섹션 추가하기를 눌렀을 때 뜨는 화면입니다.\
배너를 선택하고 레이아웃 스타일 full / small / half 중에서 골라줍니다.

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FHgr4kdRZ2s3rwRw1oPjz%2FGroup%201000000839.png?alt=media&amp;token=924f24f1-c804-4e38-b6f3-15b10d1f458a" alt=""><figcaption></figcaption></figure>

#### **2️⃣ 배너 Layout Style**

1️⃣번에서 레이아웃을 선택한 후 확인을 누르면 좌측에 배너 설정화면이 뜹니다.\
설정했던 레이아웃 스타일은 이 화면에서 변경이 가능하니 걱정마세요 !

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FFDYPcTtZoREKL7ShNp0q%2F%E1%84%87%E1%85%A2%E1%84%82%E1%85%A5%20%E1%84%8B%E1%85%A7%E1%86%BC%E1%84%8B%E1%85%A7%E1%86%A8%20%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%A8.png?alt=media&amp;token=1bbedee3-ed46-4019-abc5-dede02775490" alt=""><figcaption></figcaption></figure>

#### **3️⃣ 배경색**

배경색은 화이트/블랙/그레이/직접선택 등 4가지 옵션에서 선택하실 수 있습니다.\
직접 선택 옵션 선택 시, 자유롭게 컬러를 지정하실 수 있습니다.

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FWqrfzakvPGAiugIN6y66%2F%E1%84%87%E1%85%A2%E1%84%82%E1%85%A5%20%E1%84%8B%E1%85%A7%E1%86%BC%E1%84%8B%E1%85%A7%E1%86%A8%20%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%A8.png?alt=media&amp;token=0efebedc-86b5-4605-91df-2f84f733bfe4" alt=""><figcaption></figcaption></figure>

<div align="left"><figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FAgBPtavFCJb3gipR1sfq%2Fdialog_dialog_default.png?alt=media&amp;token=09320570-dc98-48ad-a49a-707d17703b27" alt="" width="375"><figcaption></figcaption></figure></div>

#### **4️⃣ 이미지**

배너로 사용할 이미지를 파일찾기 버튼을 눌러 첨부해주세요.

이미지를 첨부했을 때 이미지 위아래가 잘리는 현상이 발생했을 시에 꿀팁을 알려드릴게요 !\
EX) 1920 X 500 크기의 이미지는 제목&내용을 사용으로 활성화시키고\
&#x20;       제목은 Enter 3번/ 내용은 Enter 2번 입력해주면 이미지의 상하 비율이 늘어 납니다.

{% hint style="success" %}
정해진 Enter의 수는 없어요!

이미지를 첨부했을 때 생각했던 비율이 아닌 것 같다면\
제목과 내용에 Enter를 쳐서 비율을 조절해보세요 😊
{% endhint %}

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2Fkcpi0RsoSTFBXr5aMPVg%2F%E1%84%87%E1%85%A2%E1%84%82%E1%85%A5%20%E1%84%8B%E1%85%A7%E1%86%BC%E1%84%8B%E1%85%A7%E1%86%A8%20%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%A8.png?alt=media&amp;token=122e4257-0e29-4d94-8ad5-e40e707f46da" alt=""><figcaption></figcaption></figure>

#### **5️⃣ 제목/내용/버튼 정렬**

배너의 제목/내용/버튼 위치를 좌측&중앙 정렬할 수 있으며,\
첨부한 이미지에 텍스트가 없는 경우 제목/내용을 사용으로 활성화하고 입력해주면 됩니다.

첨부한 이미지에 이미 텍스트가 포함된 경우 제목/내용을 넣을 필요가 없으므로 사용안함 으로 활성화해줍니다.

하지만 두 가지 경우 모두에서 이미지 비율이 마음에 들지 않는 경우\
4️⃣번에서 설명했던 Enter를 쳐서 이미지 비율 조절하는 것이 가능합니다.

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FM3w8nMJ28wiSkbENbQII%2F%E1%84%87%E1%85%A2%E1%84%82%E1%85%A5%20%E1%84%8B%E1%85%A7%E1%86%BC%E1%84%8B%E1%85%A7%E1%86%A8%20%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%A8.png?alt=media&amp;token=282ccae4-b2cc-44d8-9522-58250bce3254" alt=""><figcaption></figcaption></figure>

#### **6️⃣ 버튼**

배너에 버튼을 사용하여 다른 페이지, 클래스 페이지, 외부 URL 로 이동할 수 있습니다.

버튼 또한 사용/사용안함 활성화를 통해 설정가능하며, 버튼 명은 최대 8글자까지 입력가능합니다.\
버튼 컬러또한 자유롭게 바꿀 수 있어요 !

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FqxEaQBZvMqbIICJPHx3g%2F%E1%84%87%E1%85%A2%E1%84%82%E1%85%A5%20%E1%84%8B%E1%85%A7%E1%86%BC%E1%84%8B%E1%85%A7%E1%86%A8%20%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%A8.png?alt=media&amp;token=c34f4e43-a9c0-4d76-9b86-14dd953b071b" alt=""><figcaption></figcaption></figure>

## 슬라이드 배너

**1️⃣ 새로운 섹션 추가하기**

마우스를 편집 영역 위에 올려두고 그때 위, 아래로 뜨는 '새로운 섹션 추가하기' 버튼을 눌러주세요 !

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2F3vxUwokbXRz4pcPGS9Mu%2F%E1%84%87%E1%85%A2%E1%84%82%E1%85%A5%20%E1%84%8B%E1%85%A7%E1%86%BC%E1%84%8B%E1%85%A7%E1%86%A8%20%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%A8.png?alt=media&amp;token=094cc830-160e-4f94-a117-86ff8e14eccb" alt=""><figcaption></figcaption></figure>

새로운 섹션 추가하기를 눌렀을때 뜨는 화면입니다.\
슬라이드 배너를 선택하고 레이아웃 스타일 full / small / half 중에서 골라줍니다.

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FjmqhQjLo7uSaEFWXaYky%2FGroup%201000000840.png?alt=media&amp;token=a77eca4d-ffc4-4e22-934b-cbe7db7930c0" alt=""><figcaption></figcaption></figure>

**2️⃣ 슬라이드 시간 설정**

슬라이드 배너가 넘어가는 시간을 3초 / 5초 / 7초로 설정할 수 있습니다.\
없음은 슬라이드가 자동으로 넘어가지 않고 화살표 버튼을 눌러야 넘어가는 방식입니다.

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2Fix9XNaJf4i0FmWo9Npy1%2FGroup%201000000875.png?alt=media&amp;token=51bde9a0-f81b-4688-ac48-2f38f902dd82" alt=""><figcaption></figcaption></figure>

**3️⃣ 배너 설정**

슬라이드 배너는 최대 4개까지 설정가능 하며, 자유롭게 순서를 바꾸고 삭제,추가할 수 있습니다.\
일반 배너와 달리 배너설정에서 연필 버튼을 누르면 배너 설정화면이 떠요 !

<figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FZezcT4fjEuP2QTSATh0o%2F%E1%84%89%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3%20%E1%84%89%E1%85%B5%E1%84%80%E1%85%A1%E1%86%AB%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.png?alt=media&amp;token=54765892-f881-408d-86f6-63733b490dc3" alt=""><figcaption></figcaption></figure>

<div align="left"><figure><img src="https://188475346-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvUF4HkazUnP90Jswd5pe%2Fuploads%2FkVmvEgC9Fzi0Un13GB0x%2Fdialog_dialog_default.png?alt=media&amp;token=b37af5bb-4cd7-47c6-9b1e-4aee37f78616" alt="" width="422"><figcaption></figcaption></figure></div>

***