# ledu STUDIO

{% hint style="info" %}
**ledu STUDIO란?**

사이트 관리자에게 사이트를 자유롭게 설정할 수 있도록 도와주는 기능입니다.

만들고 싶은 랜딩 페이지 및 클래스를 자유롭게 만들 수 있습니다.
{% endhint %}

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FaeoZfg2WkCZVATzyFgrE%2Fstudio_preview.png?alt=media&#x26;token=e5cf814a-6833-4944-a0fc-ac6a541caa5a" alt=""><figcaption><p>ledu STUDIO</p></figcaption></figure>

## **여백 컴포넌트 종류**

{% hint style="info" %}
**여백 컴포넌트란?**

페이지 내 구분감을 주기 위해 사용되는 컴포넌트입니다.
{% endhint %}

***

### **여백 컴포넌트**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F7hXG35XSNqZ7oXlfuGdX%2Fimage.png?alt=media&#x26;token=471a2b88-67a9-495e-b0aa-cc8ab7f41e3b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
페이지 내 여백을 추가하여 공간의 구분감을 줄 수 있습니다.
{% endhint %}

**여백 컴포넌트 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FHLOU5zBffoJd96I60e0B%2Fimage.png?alt=media&#x26;token=0cd6e28f-683c-4271-920a-6e0138444a82" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="79">순번</th><th width="117">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>여백의 크기</td><td>페이지 내 여백의 공간 크기 만큼 입력해주세요.<br>(픽셀 단위로 입력해주세요.)</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **구분자 컴포넌트**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F9qbCgapyp0iZA9yi3EBY%2Fimage.png?alt=media&#x26;token=3348375d-adf2-43ff-94f5-9c7f686ede26" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
페이지 내 구분자를 넣어 구분감을 줄 수 있습니다.
{% endhint %}

**구분자 컴포넌트 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F5LsnMcivn5Zf51OBwI2S%2Fimage.png?alt=media&#x26;token=580c8b3d-10a4-49d1-b508-adb37f83af52" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="88">순번</th><th width="133">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>구분선 길이</td><td>페이지 내 구분선 길이 만큼 입력해주세요.</td></tr><tr><td>2</td><td>구분선 타입</td><td> </td></tr><tr><td>(2-1)</td><td>대쉬형</td><td>선의 모양 - - - - - - - - -</td></tr><tr><td>(2-2)</td><td>솔리드형</td><td>선의 모양 ───────────</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

## **텍스트 컴포넌트 종류**

{% hint style="info" %}
**텍스트 컴포넌트란?**

페이지 내 텍스트를 입력 및 글자 강조를 위해 사용되는 컴포넌트입니다.
{% endhint %}

***

### **1 그리드 컴포넌트**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F34HgW457lUfjJphWtWTZ%2Fimage.png?alt=media&#x26;token=5f90d3c8-894a-4a34-9428-be56c5b71173" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
제목 및 내용을 1개를 하나의 형태로 보여주는 컴포넌트입니다.
{% endhint %}

**1 그리드 컴포넌트 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F3agaUfd6SdWVdmRYPlkh%2Fimage.png?alt=media&#x26;token=f9df25e9-184a-4c5b-b031-43bb3739229b" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="85">순번</th><th width="123"> 필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>강조 텍스트</td><td>메인 텍스트를 입력해주세요.</td></tr><tr><td>2</td><td>보조 텍스트</td><td>보조 텍스트를 입력해주세요.</td></tr><tr><td>3</td><td>정렬</td><td> </td></tr><tr><td>(3-1)</td><td>좌측 정렬</td><td>모든 텍스트를 좌측 정렬로 변경합니다.</td></tr><tr><td>(3-2)</td><td>중앙 정렬</td><td>모든 텍스트를 중앙 정렬로 변경합니다.</td></tr><tr><td>(3-3)</td><td>우측 정렬</td><td>모든 텍스트를 우측 정렬로 변경합니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **2 그리드 컴포넌트**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FwHzHT2fFp0PBHbhEbbN2%2Fimage.png?alt=media&#x26;token=0d0cf647-1995-4cf6-a1d1-7ec09d583cc2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
제목과 내용이 분리되어 구분감 있는 컴포넌트입니다.
{% endhint %}

**2 그리드 컴포넌트 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FH41XCgkGXabmthWgQ332%2Fimage.png?alt=media&#x26;token=6dd9a0c5-b140-490c-9c4d-71f699af4c72" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="98">순번</th><th width="122">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>강조 텍스트</td><td>메인 텍스트를 입력해주세요.</td></tr><tr><td>2</td><td>보조 텍스트</td><td>보조 텍스트를 입력해주세요.</td></tr><tr><td>3</td><td>정렬</td><td> </td></tr><tr><td>(3-1)</td><td>좌측 정렬</td><td>모든 텍스트를 좌측 정렬로 변경합니다.</td></tr><tr><td>(3-2)</td><td>우측 정렬</td><td>모든 텍스트를 우측 정렬로 변경합니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **3 그리드 컴포넌트**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FRMFy2GlDNWAkSdGGThwT%2Fimage.png?alt=media&#x26;token=7f19c397-20dc-4865-a969-752207f179c7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
제목과 내용이 3가지로 분류되어 나타내는 컴포넌트입니다.
{% endhint %}

&#x20;**3 그리드 컴포넌트 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F446TjIvDXYVivQ3wCNZT%2Fimage.png?alt=media&#x26;token=ed9a18e1-0d02-4a4b-a7be-c10ed7e529af" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="88">순번</th><th width="137">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>강조 텍스트</td><td>1번 메인 텍스트를 입력해주세요.</td></tr><tr><td>2</td><td>보조 텍스트</td><td>1번 보조 텍스트를 입력해주세요.</td></tr><tr><td>3</td><td>강조 텍스트</td><td>2번 메인 텍스트를 입력해주세요.</td></tr><tr><td>4</td><td>보조 텍스트</td><td>2번 보조 텍스트를 입력해주세요.</td></tr><tr><td>5</td><td>강조 텍스트</td><td>3번 메인 텍스트를 입력해주세요.</td></tr><tr><td>6</td><td>보조 텍스트</td><td>3번 보조 텍스트를 입력해주세요.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **강조형 컴포넌트**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FfpzTSyOnaJjsSeHxJqhz%2Fimage.png?alt=media&#x26;token=c2c8f8d0-3f00-49bf-8415-5c47f834df4e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
배경색을 추가하여 더욱 강조 된 제목과 내용을 보여주는 컨포넌트입니다.
{% endhint %}

&#x20;**강조형 컴포넌트 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FbZvcQ22XdtKgVC5ul80X%2Fimage.png?alt=media&#x26;token=cc1c8be1-e28a-46b2-80f5-809da72f5ce7" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="84">순번</th><th width="136">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>강조 텍스트</td><td>메인 텍스트를 입력해주세요.</td></tr><tr><td>2</td><td>보조 텍스트</td><td>보조 텍스트를 입력해주세요.</td></tr><tr><td>3</td><td>정렬</td><td> </td></tr><tr><td>(3-1)</td><td>좌측 정렬</td><td>모든 텍스트를 좌측 정렬로 변경합니다.</td></tr><tr><td>(3-2)</td><td>중앙 정렬</td><td>모든 텍스트를 중앙 정렬로 변경합니다.</td></tr><tr><td>(3-3)</td><td>우측 정렬</td><td>모든 텍스트를 우측 정렬로 변경합니다.</td></tr><tr><td>4</td><td>배경색</td><td>원하시는 색상을 골라 체크 해주세요.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **앵커 컴포넌트**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FF6EWobXA0Slj7fQFLkEU%2Fimage.png?alt=media&#x26;token=04fea8e5-0ed4-4cfc-b088-8d9cd4133b13" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
아이콘을 이용한 강조 된 텍스트 입력이 가능한 컴포넌트입니다.
{% endhint %}

&#x20;**앵커 컴포넌트 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fz94TV8dvOPVDCrkP8TrC%2Fimage.png?alt=media&#x26;token=b922d6da-4fa0-468a-ba2b-cdc3f9bfcde8" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="79">순번</th><th width="119">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>아이콘 선택</td><td>텍스트 앞 이용 할 아이콘을 체크해주세요.</td></tr><tr><td>2</td><td>텍스트</td><td>강조할 텍스트를 입력해주세요.</td></tr><tr><td>3</td><td>컬러 선택</td><td>원하시는 색상을 골라 체크해주세요.</td></tr><tr><td>4</td><td>id 입력</td><td>사이트 내 페이지 단락 id를 입력해주세요.<br>(ex. 랜딩페이지(#1) -> #1 입력)</td></tr></tbody></table>

{% hint style="success" %}
**앵커 ID란?**

사이트 내 이동을 원하는 id를 입력해주시면 클릭 시 이동됩니다. (추후 수정)
{% endhint %}

<div align="left"><figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FNiiRrS8WdzdFH3LwZtBX%2Fimage.png?alt=media&#x26;token=35064e2c-9bb2-4fbc-8246-06a891d2bb27" alt=""><figcaption><p>개별 아이콘 등록</p></figcaption></figure></div>

{% hint style="success" %}
개별 아이콘 등록을 눌러 자신만의 아이콘을 생성 할 수 도 있습니다.
{% endhint %}

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **제목 컴포넌트**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FoenywCTjQAGZBYOESLI2%2Fimage.png?alt=media&#x26;token=aa9317dd-cb8a-42e0-9bb8-6774a1b2667a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
영역 내 간단하게 제목을 삽입할 수 있는 컴포넌트입니다.
{% endhint %}

&#x20;**제목 컴포넌트 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FWVLof68vLeE7PpQXXdai%2Fimage.png?alt=media&#x26;token=5721bcb1-5437-4fc8-8a37-5af557da1551" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="94">순번</th><th width="121">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>제목</td><td>제목을 입력해주세요.</td></tr><tr><td>2</td><td>글씨 크기</td><td> </td></tr><tr><td>(2-1)</td><td>sm</td><td>small – 작은 글씨</td></tr><tr><td>(2-2)</td><td>md</td><td>medium – 중간 글씨</td></tr><tr><td>(2-3)</td><td>lg</td><td>large – 큰 글씨</td></tr><tr><td>(2-4)</td><td>xlg</td><td>xlarge – 매우 큰 글씨</td></tr><tr><td>3</td><td>타이틀정렬</td><td> </td></tr><tr><td>(3-1)</td><td>좌측 정렬</td><td>제목을 좌측 정렬로 변경합니다.</td></tr><tr><td>(3-2)</td><td>중앙 정렬</td><td>제목을 중앙 정렬로 변경합니다.</td></tr><tr><td>(3-3)</td><td>우측 정렬</td><td>제목을 우측 정렬로 변경합니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

## **배너형 컴포넌트 종류**

{% hint style="info" %}
**배너형 컴포넌트란?**

페이지 내 이미지를 이용하여 이용자가 간편하게 이용할 수 있게 사용되는 컴포넌트입니다.
{% endhint %}

***

### **단일 이미지 배너**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FP9fC8vObLS7xSRJ85qRS%2Fimage.png?alt=media&#x26;token=324dd324-c7b1-41b0-b18b-2807d240b852" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
단일로 이미지에 링크 삽입 할 수 있는 배너입니다.
{% endhint %}

**단일 이미지 배너 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FvxuOe1mk66Uv53owqlN4%2Fimage.png?alt=media&#x26;token=4e539846-290d-472b-89f8-ecf9dcc25820" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="84">순번</th><th width="192">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>PC 이미지 업로드</td><td>PC 화면에서 보여질 이미지를 업로드해주세요.</td></tr><tr><td>2</td><td>모바일 이미지 업로드</td><td>모바일 화면에서 보여질 이미지를 업로드해주세요.</td></tr><tr><td>3</td><td>링크</td><td>배너에 삽입할 링크를 넣어주세요.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **단일 슬라이드 배너**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FbdRFZUmECrGkwA2Pr1cH%2Fimage.png?alt=media&#x26;token=66fc40ac-9398-453f-9ad3-540a609f48f5" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
영역 내 풀 사이즈 배너를 넣어 슬라이드 형식으로 사용할 수 있는 배너입니다.
{% endhint %}

**단일 슬라이드 배너 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FByRQUp6nzTYx3DiSnPIs%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C.png?alt=media&#x26;token=ab36b6ec-8d2c-4c40-a2e5-2fdd095e7250" alt="" width="431"><figcaption></figcaption></figure>

{% hint style="warning" %}
슬라이드 배너는 최소 3개의 배너를 등록해야만 이용 가능합니다.
{% endhint %}

<table><thead><tr><th width="85">순번</th><th width="191">필드 명 </th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>자동 슬라이드 여부</td><td> </td></tr><tr><td>(1-1)</td><td>활성화</td><td>슬라이드가 자동으로 3초 간격으로 변경됩니다.</td></tr><tr><td>(1-2)</td><td>비활성화</td><td>슬라이드를 수동으로 움직여줘야합니다.</td></tr><tr><td>2</td><td>무한 슬라이드 여부</td><td> </td></tr><tr><td>(2-1)</td><td>활성화</td><td>슬라이드를 반복적으로 넘길 수 있습니다.</td></tr><tr><td>(2-2)</td><td>비활성화</td><td>슬라이드를 반복적으로 넘길 수 없습니다.</td></tr><tr><td>3</td><td>PC 이미지 업로드</td><td>PC 환경에서 보여질 이미지를 업로드 해주세요.</td></tr><tr><td>4</td><td>모바일 이미지 업로드</td><td>모바일 환경에서 보여질 이미지를 업로드 해주세요.</td></tr><tr><td>5</td><td>노출기간 설정</td><td>노출 기간 설정 시 기간 내에만 노출됩니다.</td></tr><tr><td>6</td><td>링크</td><td>배너에 삽입할 링크를 넣어주세요.</td></tr><tr><td>7</td><td>추가하기</td><td>슬라이드 배너를 추가로 만들 수 있습니다.</td></tr><tr><td>8</td><td>좌,우 네비게이션 여부</td><td> </td></tr><tr><td>(8-1)</td><td>선택안함</td><td>배너를 드래그하여 변경할 수 있습니다.</td></tr><tr><td>(8-2)</td><td>선택</td><td>배너의 네비게이션을 클릭하여 변경할 수 있습니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **메인 슬라이드 배너**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FAvsrdwMrwo8zCskPdPTZ%2Fimage.png?alt=media&#x26;token=eda6b1e3-54ae-4d69-9ade-2f55af2678b4" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
영역 내 단일 또는 다중의 배너를 노출이 가능한 슬라이드 배너입니다.
{% endhint %}

**메인 슬라이드 배너 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FaCj2ytlCm0fjCiAebVxX%2F%EB%A9%94%EC%9D%B8%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C.png?alt=media&#x26;token=7f96ea77-e70b-409b-92a8-c301b9c9b63e" alt="" width="425"><figcaption></figcaption></figure>

<table><thead><tr><th width="87">순번</th><th width="186">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>화면 별 컬럼 수</td><td> </td></tr><tr><td>(1-1)</td><td>1</td><td>영역 내 1개의 컬럼만 노출합니다.</td></tr><tr><td>(1-2)</td><td>2</td><td>영역 내 2개의 컬럼만 노출합니다.</td></tr><tr><td>(1-3)</td><td>3</td><td>영역 내 3개의 컬럼만 노출합니다.</td></tr><tr><td>2</td><td>자동 슬라이드 여부</td><td> </td></tr><tr><td>(2-1)</td><td>활성화</td><td>슬라이드가 자동으로 3초 간격으로 변경됩니다.</td></tr><tr><td>(2-2)</td><td>비활성화</td><td>슬라이드를 수동으로 움직여줘야합니다.</td></tr><tr><td>3</td><td>무한 슬라이드 여부</td><td> </td></tr><tr><td>(3-1)</td><td>활성화</td><td>슬라이드를 반복적으로 넘길 수 있습니다.</td></tr><tr><td>(3-2)</td><td>비활성화</td><td>슬라이드를 반복적으로 넘길 수 없습니다.</td></tr><tr><td>4</td><td>페이지 도트 표시</td><td> </td></tr><tr><td>(4-1)</td><td>활성화</td><td>문의</td></tr><tr><td>(4-2)</td><td>비활성화</td><td>문의</td></tr><tr><td>5</td><td>PC 이미지 업로드</td><td>PC 환경에서 보여질 이미지를 업로드 해주세요.</td></tr><tr><td>6</td><td>모바일 이미지 업로드</td><td>모바일 환경에서 보여질 이미지를 업로드 해주세요.</td></tr><tr><td>7</td><td>노출기간 설정</td><td>노출 기간 설정 시 기간 내에만 노출됩니다.</td></tr><tr><td>8</td><td>링크</td><td>배너에 삽입할 링크를 넣어주세요.</td></tr><tr><td>9</td><td>추가하기</td><td>슬라이드 배너를 추가로 만들 수 있습니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **슬라이드 블록 배너**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FTEfCfEs9OpgZ9ox2Auwo%2Fimage.png?alt=media&#x26;token=fe15023b-1847-4aea-a399-e53f3ad3b494" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
열과 행을 변경 할 수 있는 슬라이드 배너입니다.
{% endhint %}

**슬라이드 블록 배너 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **아이콘 네비게이션 배너**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F636DmpgKk7XaITAbcXGS%2Fimage.png?alt=media&#x26;token=e1992d5c-1a6b-4d42-b42d-8bbb7165eb0a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
아이콘을 사용하여 이용자가 간편하게 사이트를 이동할 수 있는 배너입니다.
{% endhint %}

**아이콘 네이게이션 배너 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fe32pzmEQLsFmi8BpkKQ7%2F%EC%95%84%EC%9D%B4%EC%BD%98%EB%B0%B0%EB%84%88.png?alt=media&#x26;token=5628b9ff-d392-48b6-8c2a-e38e1e2464bb" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
아이콘은 최소 3개 이상 설정해 사용해야 합니다.
{% endhint %}

<table><thead><tr><th width="79">순번</th><th width="149">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>공통 테마 선택</td><td>원하시는 색상을 골라 체크해주세요.</td></tr><tr><td>2</td><td>아이콘 선택</td><td>원하시는 아이콘을 골라 체크해주세요.</td></tr><tr><td>3</td><td>제목</td><td>아이콘 하단에 나타낼 아이콘 이름을 입력해주세요.</td></tr><tr><td>4</td><td>링크</td><td>원하시는 링크를 입력해주세요.</td></tr><tr><td>5</td><td>추가하기</td><td>아이콘을 추가로 만들 수 있습니다.<br>(최대 아이콘 10개 제한)</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **2 그리드 이미지 배너**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fl2JShlRvbNOZ5o0KDoU6%2Fimage.png?alt=media&#x26;token=d326f13f-9780-4d46-b0f5-a8e83cdf8ef6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
그림을 삽입하여 제목과 내용을 작성 할 수 있는 배너입니다.
{% endhint %}

**2 그리드 이미지 배너 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FZqmoqFYnXMqZL2ImHRR8%2Fimage.png?alt=media&#x26;token=c71530da-fd68-4116-8549-2e9079c2d577" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="86">순번</th><th width="228">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>PC 배너 이미지 업로드</td><td>PC 환경에서 보여질 이미지를 업로드 해주세요.</td></tr><tr><td>2</td><td>모바일 배너 이미지 업로드</td><td>모바일 환경에서 보여질 이미지를 업로드 해주세요.</td></tr><tr><td>3</td><td>강조 텍스트 입력</td><td>메인 텍스트를 입력해주세요.</td></tr><tr><td>4</td><td>보조 텍스트 입력</td><td>보조 텍스트를 입력해주세요.</td></tr><tr><td>5</td><td>정렬</td><td> </td></tr><tr><td>(5-1)</td><td>좌측 정렬</td><td>모든 텍스트를 좌측 정렬로 변경합니다.</td></tr><tr><td>(5-2)</td><td>우측 정렬</td><td>모든 텍스트를 우측 정렬로 변경합니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **3 그리드 블록 배너**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F6QDsJL0li9O3PlC6pQZY%2Fimage.png?alt=media&#x26;token=3d8c90a1-568a-437f-93f4-131134750981" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
3개의 블록 유형으로 간단한 설명이 노출 가능한 배너입니다.
{% endhint %}

**3 그리드 블록 배너 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fg0iucuYZwydfrUTz7HbX%2Fimage.png?alt=media&#x26;token=b13f898c-8db9-4a37-98cd-a3adb302d35d" alt="" width="425"><figcaption></figcaption></figure>

<table><thead><tr><th width="90">순번</th><th width="194">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>이미지 배너 업로드</td><td>배너에 보여질 이미지를 업로드 해주세요.</td></tr><tr><td>2</td><td>타이틀 입력</td><td>메인 텍스트를 입력해주세요.</td></tr><tr><td>3</td><td>디스크립션 입력</td><td>보조 텍스트를 입력해주세요.</td></tr><tr><td>4</td><td>버튼 명 입력</td><td>노출 될 버튼 이름을 입력해주세요<br>(버튼 명을 입력시에 5,6,7번이 활성화 됩니다.)</td></tr><tr><td>5</td><td>버튼 타입</td><td> </td></tr><tr><td>(5-1)</td><td>모서리 둥근 테두리형</td><td>모서리가 둥근 네모난 버튼 모양</td></tr><tr><td>(5-2)</td><td>원형</td><td>원형 버튼 모양</td></tr><tr><td>6</td><td>링크</td><td>버튼에 삽입할 링크를 입력해주세요.</td></tr><tr><td>7</td><td>버튼 색상</td><td>원하시는 색상을 체크해주세요.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **그리드 배너**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fhr89Hv7XMlaq4Tqdy5Bk%2Fimage.png?alt=media&#x26;token=f02b2b57-e8a7-40e6-842b-681d65039e16" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
2열구조 형식으로 다양한 이벤트를 노출이 가능하며 제한 없이 생성이 가능한 배너입니다.
{% endhint %}

**그리드 배너 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FT8poURKaCuO7ecb63klW%2F%EA%B7%B8%EB%A6%AC%EB%93%9C.png?alt=media&#x26;token=f624b315-8065-43ff-80c5-6f0ea2823dd9" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="82">순번</th><th width="147">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>제목</td><td>배너의 제목을 입력해주세요.</td></tr><tr><td>2</td><td>이미지 업로드</td><td>배너에 사용할 이미지를 업로드해주세요.<br>(최소 4개부터 사용 가능)</td></tr><tr><td>3</td><td>이미지 추가</td><td>배너를 제한없이 추가 생성 가능합니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

## **게시판형 컴포넌트 종류**

{% hint style="info" %}
**게시판형 컴포넌트란?**

페이지 내 게시글 또는 리뷰를 이용자가 간편하게 볼 수 있게 사용되는 컴포넌트입니다.
{% endhint %}

***

### **게시글 선택기**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FGZ1ORTWH18jolv0a5Qlf%2Fimage.png?alt=media&#x26;token=d2c54839-1f94-4389-b34f-2e4b5b29343a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
원하는 게시글 및 리뷰를 선택하여 노출 시킬 수 있는 컴포넌트입니다.
{% endhint %}

**게시글 선택기 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fu6bNre8BSE2elfCHxlXT%2Fimage.png?alt=media&#x26;token=5c0b57ad-0708-4952-8fa5-d52c67fc188a" alt="" width="437"><figcaption></figcaption></figure>

{% hint style="success" %}
게시글 선택은 최대 4개까지  가능합니다.
{% endhint %}

<table><thead><tr><th width="91">순번</th><th width="171">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>컴포넌트 제목</td><td>컴포넌트의 제목을 입력해주세요.</td></tr><tr><td>2</td><td>게시글 선택</td><td>노출하기 원하시는 게시글을 선택해주세요.</td></tr><tr><td>3</td><td>프로필 노출 여부</td><td> </td></tr><tr><td>(3-1)</td><td>활성화</td><td>게시글 작성자의 프로필을 노출합니다.</td></tr><tr><td>(3-2)</td><td>비활성화</td><td>게시글 작성자의 프로필을 노출하지 않습니다.</td></tr><tr><td>4</td><td>버튼 노출 여부</td><td> </td></tr><tr><td>(4-1)</td><td>활성화</td><td>게시글 바로가기 버튼 만들어집니다.</td></tr><tr><td>(4-2)</td><td>비활성화</td><td>게시글 바로가기 버튼 만들어지지 않습니다.</td></tr><tr><td>5</td><td>글 내용 노출 여부</td><td> </td></tr><tr><td>(5-1)</td><td>활성화</td><td>글 내용을 노출 시킵니다,</td></tr><tr><td>(5-2)</td><td>비활성화</td><td>글 내용을 노출시키지 않습니다.</td></tr><tr><td>6</td><td>글 내용 길이</td><td>문의</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **갤러리형 게시글 선택기**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FtspV3gDQ0NpQZq4xDYwh%2Fimage.png?alt=media&#x26;token=bef4945d-0e4e-4a64-8468-ce208abf9ebc" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
원하시는 게시글 이미지 갤러리 유형으로 노출 시킬 수 있는 컴포넌트입니다.
{% endhint %}

**갤러리형 게시글 선택기 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F56ghQWl2l6Cf7tTYbDBc%2Fimage.png?alt=media&#x26;token=8c1cf89d-69a9-4a3a-b0ce-a4c4664da091" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
갤러리형게시글 선택은 최대 4개까지  가능합니다.
{% endhint %}

<table><thead><tr><th width="88">순번</th><th width="168">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>컴포넌트 제목</td><td>컴포넌트의 제목을 입력해주세요.</td></tr><tr><td>2</td><td>게시글 선택</td><td>노출하기 원하시는 게시글을 선택해주세요.</td></tr><tr><td>3</td><td>프로필 노출 여부</td><td> </td></tr><tr><td>(3-1)</td><td>활성화</td><td>게시글 작성자의 프로필을 노출합니다.</td></tr><tr><td>(3-2)</td><td>비활성화</td><td>게시글 작성자의 프로필을 노출하지 않습니다.</td></tr><tr><td>4</td><td>버튼 노출 여부</td><td> </td></tr><tr><td>(4-1)</td><td>활성화</td><td>게시글 더보기 버튼을 생성합니다.</td></tr><tr><td>(4-2)</td><td>비활성화</td><td>게시글 더보기 버튼을 생성하지 않습니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **게시판 선택기**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FKtzJ3el3ZHF89pNIb1wR%2Fimage.png?alt=media&#x26;token=9beaecbc-4981-4bc4-94f4-d17a1dc4ce85" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
원하시는 게시판을 선택하여 노출 시킬 수 있는 컴포넌트입니다.
{% endhint %}

**게시판 선택기 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FG6cv6RGnmQcgRzEYkEyB%2Fimage.png?alt=media&#x26;token=ec8220bf-d9d7-448f-a8fd-e41804593115" alt="" width="442"><figcaption></figcaption></figure>

<table><thead><tr><th width="89">순번</th><th width="209">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>게시판 갯수</td><td>노출하고 싶은 게시판을 1~3개 중 선택해주세요.</td></tr><tr><td>2</td><td>게시판 제목 노출</td><td> </td></tr><tr><td>(2-1)</td><td>활성화</td><td>게시판의 제목이 노출됩니다.</td></tr><tr><td>(2-2)</td><td>비활성화</td><td>게시판의 제목이 노출 되지 않습니다,</td></tr><tr><td>3</td><td>게시판 선택</td><td>노출하기 원하시는 게시판을 선택해주세요.</td></tr><tr><td>4</td><td>정렬 기준</td><td> </td></tr><tr><td>(4-1)</td><td>최신순</td><td>최신순으로 정렬됩니다.</td></tr><tr><td>(4-2)</td><td>인기순</td><td>인기순으로 정렬됩니다.</td></tr><tr><td>5</td><td>게시글 더보기 버튼 노출</td><td> </td></tr><tr><td>(5-1)</td><td>활성화</td><td>게시글 더보기 버튼을 생성합니다.</td></tr><tr><td>(5-2)</td><td>비활성화</td><td>게시글 더보기 버튼을 생성하지 않습니다.</td></tr><tr><td>6</td><td>프로필 노출</td><td> </td></tr><tr><td>(6-1)</td><td>활성화</td><td>게시글 작성자의 프로필을 노출합니다.</td></tr><tr><td>(6-2)</td><td>비활성화</td><td>게시글 작성자의 프로필을 노출하지 않습니다.</td></tr><tr><td>7</td><td>글 내용 길이</td><td>문의</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **리뷰 게시글 선택기**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F7hdvLgjjEkHoedH4XeV7%2Fimage.png?alt=media&#x26;token=9b7ef483-a7d3-4ca7-a6ac-4d3ab8f1f346" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
원하시는 리뷰를 다중으로 노출 시킬 수 있는 컴포넌트입니다.
{% endhint %}

**리뷰 게시글 선택기 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fs7fLFKHygEavLyhS8uYj%2Fimage.png?alt=media&#x26;token=65722798-6ece-4d45-9b34-56ae97b5159d" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="88">순번</th><th width="165">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>컴포넌트 제목</td><td> 컴포넌트의 제목을 입력해주세요.</td></tr><tr><td>2</td><td>리뷰 선택</td><td> 노출하기 원하시는 리뷰를 선택해주세요.</td></tr><tr><td>3</td><td>프로필 노출 여부</td><td> </td></tr><tr><td>(3-1)</td><td>활성화</td><td>게시글 작성자의 프로필을 노출합니다.</td></tr><tr><td>(3-2)</td><td>비활성화</td><td>게시글 작성자의 프로필을 노출하지 않습니다.</td></tr><tr><td>4</td><td>평점 노출 여부</td><td> </td></tr><tr><td>(4-1)</td><td>활성화</td><td>리뷰 평점을 노출합니다.</td></tr><tr><td>(4-2)</td><td>비활성화</td><td>리뷰 평점을 노출하지 않습니다.</td></tr><tr><td>5</td><td>버튼 노출 여부</td><td> </td></tr><tr><td>(5-1)</td><td>활성화</td><td>게시글 더보기 버튼을 생성합니다.</td></tr><tr><td>(5-2)</td><td>비활성화</td><td>게시글 더보기 버튼을 생성하지 않습니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **슬라이드 리뷰**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FiIZ42wIsxztCHVv0nlGU%2Fimage.png?alt=media&#x26;token=f65d84ef-2536-454c-b44c-7ac33341f74b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
원하시는 리뷰를 슬라이드 유형으로 노출 시킬 수 있는 컴포넌트입니다.
{% endhint %}

**슬라이드 리뷰 선택기 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FKTOB1bzFOFrmf3OhPlpA%2Fimage.png?alt=media&#x26;token=07feb44d-e049-4405-a372-2e34be8612e7" alt="" width="440"><figcaption></figcaption></figure>

<table><thead><tr><th width="89">순번</th><th width="206">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>컴포넌트 제목</td><td>컴포넌트의 제목을 입력해주세요.</td></tr><tr><td>2</td><td>슬라이드당 리뷰 노출 수</td><td>슬라이드 당 리뷰를 노출 시킬 수를 선택해주세요.</td></tr><tr><td>3</td><td>리뷰 선택</td><td>노출하기 원하시는 리뷰를 선택해주세요.</td></tr><tr><td>4</td><td>랜덤 노출 여부</td><td> </td></tr><tr><td>(4-1)</td><td>활성화</td><td>리뷰를 무작위로 노출합니다.</td></tr><tr><td>(4-2)</td><td>비활성화</td><td>리뷰를 순서대로 노출합니다.</td></tr><tr><td>5</td><td>프로필 노출 여부</td><td> </td></tr><tr><td>(5-1)</td><td>활성화</td><td>리뷰 작성자의 프로필을 노출합니다.</td></tr><tr><td>(5-2)</td><td>비활성화</td><td>리뷰 작성자의 프로필을 노출하지 않습니다.</td></tr><tr><td>6</td><td>평점 노출 여부</td><td> </td></tr><tr><td>(6-1)</td><td>활성화</td><td>리뷰 평점을 노출합니다.</td></tr><tr><td>(6-2)</td><td>비활성화</td><td>리뷰 평점을 노출하지 않습니다.</td></tr><tr><td>7</td><td>자동 슬라이드 여부</td><td> </td></tr><tr><td>(7-1)</td><td>활성화</td><td>리뷰를 자동으로 변경하게 합니다.</td></tr><tr><td>(7-2)</td><td>비활성화</td><td>리뷰를 수동으로 변경하게 합니다.</td></tr><tr><td>8</td><td>무한 슬라이드 여부</td><td> </td></tr><tr><td>(8-1)</td><td>활성화</td><td>선택한 리뷰가 반복적으로 노출됩니다.</td></tr><tr><td>(8-2)</td><td>비활성화</td><td>선택한 리뷰가 단일적 노출이 됩니다.</td></tr><tr><td>9</td><td>네비게이션 여부</td><td> </td></tr><tr><td>(9-1)</td><td>활성화</td><td>리뷰 이동이 편의한 버튼을 생성합니다.</td></tr><tr><td>(9-2)</td><td>비활성화</td><td>리뷰 이동을 사용자가 직접 드래그합니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **슬라이드 게시글**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FftnpgMK7Euns2iJEFZ8w%2Fimage.png?alt=media&#x26;token=dbc9b4ab-4ea9-4da7-99d8-f31eb7b02cc8" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
원하시는 게시글을 슬라이드 유형으로 노출 시킬 수 있는 컴포넌트입니다.
{% endhint %}

**슬라이드 게시글 선택기 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fqpn4X07CxgOJrTfKMTA2%2Fimage.png?alt=media&#x26;token=f6967bb3-73ea-4522-9540-4d672fb102a3" alt="" width="443"><figcaption></figcaption></figure>

<table><thead><tr><th width="90">순번</th><th width="227">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>타이틀 입력</td><td>메인 타이틀 제목을 입력해주세요.</td></tr><tr><td>2</td><td>보조 텍스트 입력</td><td>보조 타이틀을 입력해주세요.</td></tr><tr><td>3</td><td>슬라이드 당 게시글 노출 수</td><td>보여지는 슬라이드의 개수를 선택해주세요.</td></tr><tr><td>4</td><td>자동 슬라이드 여부</td><td> </td></tr><tr><td>(4-1)</td><td>활성화</td><td>게시글을 자동으로 변경하게 합니다.</td></tr><tr><td>(4-2)</td><td>비활성화</td><td>게시글을 수동으로 변경하게 합니다.</td></tr><tr><td>5</td><td>무한 슬라이드 여부</td><td> </td></tr><tr><td>(5-1)</td><td>활성화</td><td>선택한 게시글이 반복적으로 노출됩니다.</td></tr><tr><td>(5-2)</td><td>비활성화</td><td>선택한 게시글이 단일적 노출이 됩니다.</td></tr><tr><td>6</td><td>게시글 선택</td><td>노출을 원하는 게시글을 선택해주세요.</td></tr><tr><td>7</td><td>프로필 노출 여부</td><td> </td></tr><tr><td>(7-1)</td><td>활성화</td><td>게시글 작성자의 프로필을 노출합니다.</td></tr><tr><td>(7-2)</td><td>비활성화</td><td>게시글 작성자의 프로필을 노출하지 않습니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **슬라이드 갤러리형 게시글**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FgrOoJ9zFAAtgEGWd6lno%2Fimage.png?alt=media&#x26;token=3d578959-e014-4548-a69e-9625385b9d3b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
원하시는 게시글 이미지를 슬라이드 유형으로 노출 시킬 수 있는 컴포넌트입니다.
{% endhint %}

**슬라이드 갤러리형 선택기 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FdsDIXIjePG0YS1GmsuQC%2Fimage.png?alt=media&#x26;token=5f7130a1-a8fb-4043-ac01-3f9aaec5d8cc" alt="" width="439"><figcaption></figcaption></figure>

<table><thead><tr><th width="85">순번</th><th width="232">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>타이틀 입력</td><td>메인 타이틀 제목을 입력해주세요.</td></tr><tr><td>2</td><td>프로필 노출 여부</td><td> </td></tr><tr><td>(2-1)</td><td>활성화</td><td>게시글 작성자의 프로필을 노출합니다.</td></tr><tr><td>(2-2)</td><td>비활성화</td><td>게시글 작성자의 프로필을 노출하지 않습니다.</td></tr><tr><td>3</td><td>슬라이드 당 게시글 노출 수</td><td>보여지는 슬라이드의 개수를 선택해주세요.</td></tr><tr><td>4</td><td>자동 슬라이드 여부</td><td> </td></tr><tr><td>(4-1)</td><td>활성화</td><td>게시글을 자동으로 변경하게 합니다.</td></tr><tr><td>(4-2)</td><td>비활성화</td><td>게시글을 수동으로 변경하게 합니다.</td></tr><tr><td>5</td><td>무한 슬라이드 여부</td><td> </td></tr><tr><td>(5-1)</td><td>활성화</td><td>선택한 게시글이 반복적으로 노출됩니다.</td></tr><tr><td>(5-2)</td><td>비활성화</td><td>선택한 게시글이 단일적 노출이 됩니다.</td></tr><tr><td>6</td><td>네비게이션 여부</td><td> </td></tr><tr><td>(6-1)</td><td>활성화</td><td>게시글 이동 시 편의한 버튼을 생성합니다.</td></tr><tr><td>(6-2)</td><td>비활성화</td><td>게시글 이동을 사용자가 직접 드래그합니다.</td></tr><tr><td>7</td><td>게시글 선택</td><td>노출을 원하는 게시글을 선택해주세요.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

## **클래스형 컴포넌트 종류**

{% hint style="info" %}
**클래스형 컴포넌트란?**

페이지 내 클래스를 이용자가 간편하게 볼 수있게 사용되는 컴포넌트입니다.
{% endhint %}

***

### **단일 클래스**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fkca6c9NcpqmW1QDBx4fv%2Fimage.png?alt=media&#x26;token=a007e05a-0665-4fa0-91a2-028be60ccb21" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
하나의 클래스를 노출 할 수 있는 컴포넌트입니다.
{% endhint %}

**단일 클래스 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FAzjCDFxlkGMwq4DyhDgo%2Fimage.png?alt=media&#x26;token=9c2572dd-f618-4149-8a77-11c8a60b6f6e" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="95">순번</th><th width="180">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>컴포넌트 제목</td><td>메인 텍스트를 입력해주세요.</td></tr><tr><td>2</td><td>클래스 선택</td><td>노출하고 싶은 클래스를 선택해주세요.</td></tr><tr><td>3</td><td>리뷰 표기 여부</td><td> </td></tr><tr><td>(3-1)</td><td>활성화</td><td>클래스 리뷰를 노출합니다.</td></tr><tr><td>(3-2)</td><td>비활성화</td><td>클래스 리뷰를 노출하지 않습니다.</td></tr><tr><td>4</td><td>가격 표기 여부</td><td> </td></tr><tr><td>(4-1)</td><td>활성화</td><td>클래스 가격을 노출합니다.</td></tr><tr><td>(4-2)</td><td>비활성화</td><td>클래스 가격을 노출하지 않습니다.</td></tr><tr><td>5</td><td>수강생 수 표기 여부</td><td> </td></tr><tr><td>(5-1)</td><td>활성화</td><td>클래스의 수강생 수를 노출합니다.</td></tr><tr><td>(5-2)</td><td>비활성화</td><td>클래스의 수강생 수를 노출하지 않습니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **다중 클래스**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FNLaxMEH6qxjallBn5htg%2Fimage.png?alt=media&#x26;token=39ac1e3a-aa4b-4b8a-b3f5-a61319bce686" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
다중의 클래스를 노출 할 수 있는 컴포넌트입니다.
{% endhint %}

**다중 클래스 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FJvoB03OHmzHBFLLRObkl%2Fimage.png?alt=media&#x26;token=8c4ebfd0-25a4-4463-ae01-8b4cd441a969" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="86">순번</th><th width="210">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>컴포넌트 제목</td><td>메인 텍스트를 입력해주세요.</td></tr><tr><td>2</td><td>클래스 선택</td><td>노출하고 싶은 클래스를 선택해주세요.</td></tr><tr><td>3</td><td>강사 사진 표기 여부</td><td> </td></tr><tr><td>(3-1)</td><td>활성화</td><td>클래스 강사 사진을 노출합니다.</td></tr><tr><td>(3-2)</td><td>비활성화</td><td>클래스 강사 사진을 노출합니다.</td></tr><tr><td>4</td><td>리뷰 표기 여부</td><td> </td></tr><tr><td>(4-1)</td><td>활성화</td><td>클래스 리뷰를 노출합니다.</td></tr><tr><td>(4-2)</td><td>비활성화</td><td>클래스 리뷰를 노출하지 않습니다.</td></tr><tr><td>5</td><td>가격 표기 여부</td><td> </td></tr><tr><td>(5-1)</td><td>활성화</td><td>클래스 가격을 노출합니다.</td></tr><tr><td>(5-2)</td><td>비활성화</td><td>클래스 가격을 노출하지 않습니다.</td></tr><tr><td>6</td><td>수강생 수 표기 여부</td><td> </td></tr><tr><td>(6-1)</td><td>활성화</td><td>클래스의 수강생 수를 노출합니다.</td></tr><tr><td>(6-2)</td><td>비활성화</td><td>클래스의 수강생 수를 노출하지 않습니다.</td></tr><tr><td>7</td><td>페이지 당 클래스 노출 수</td><td>한번에 노출 할 클래스 수를 선택해주세요.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***

### **슬라이드형 클래스**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FY0vXy7laCIekzGzaQCn0%2Fimage.png?alt=media&#x26;token=4edccc8d-1daa-4672-b67d-a1bc06b01028" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
다중의 클래스를 슬라이드 유형으로 노출 시킬 수 있는 컴포넌트입니다.
{% endhint %}

**슬라이드형 클래스 설정 방법**

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F3twCke4CWGFgCFCBCdJC%2Fimage.png?alt=media&#x26;token=06e5602a-fbad-4ebf-8059-dd5b58ce737c" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="88">순번</th><th width="211">필드 명</th><th>설명</th></tr></thead><tbody><tr><td>1</td><td>컴포넌트 제목</td><td>메인 텍스트를 입력해주세요.</td></tr><tr><td>2</td><td>페이지 당 클래스 노출 수</td><td>한번에 노출 할 클래스 수를 선택해주세요.</td></tr><tr><td>3</td><td>클래스 선택</td><td>노출하고 싶은 클래스를 선택해주세요.</td></tr><tr><td>4</td><td>리뷰 표기 여부</td><td> </td></tr><tr><td>(4-1)</td><td>활성화</td><td>클래스 리뷰를 노출합니다.</td></tr><tr><td>(4-2)</td><td>비활성화</td><td>클래스 리뷰를 노출하지 않습니다.</td></tr><tr><td>5</td><td>가격 표기 여부</td><td> </td></tr><tr><td>(5-1)</td><td>활성화</td><td>클래스 가격을 노출합니다.</td></tr><tr><td>(5-2)</td><td>비활성화</td><td>클래스 가격을 노출하지 않습니다.</td></tr><tr><td>6</td><td>수강생 수 표기 여부</td><td> </td></tr><tr><td>(6-1)</td><td>활성화</td><td>클래스의 수강생 수를 노출합니다.</td></tr><tr><td>(6-2)</td><td>비활성화</td><td>클래스의 수강생 수를 노출하지 않습니다.</td></tr></tbody></table>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fcq11X9U2lsPudaW0f420%2Fimage.png?alt=media&#x26;token=9576c4c6-17e3-41b0-b47e-42d3696058a3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 설정을 마친 후에는 '**저장하고 생성하기**' 버튼을 눌러주세요.
{% endhint %}

***