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

# ledu STUDIO

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

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

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

<figure><img src="/files/oCflCbGARIfdIfq7ii8B" alt=""><figcaption><p>ledu STUDIO</p></figcaption></figure>

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

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

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

***

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

<figure><img src="/files/zVSC6t6XZJEVspJMd9CN" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/4u5ih6CM0c7Z5jNEbSDR" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/PRQTsRf2hcQtTdhFm98a" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/BmzLFzb6s5tNcjL38cjk" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

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

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

***

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

<figure><img src="/files/TkMclD3D7oK7XNr681tK" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/z69eLFxPJlEDP71MKp59" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/Kb46EEFn6XwdBItS4tY7" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/T085Q1JXcRTHmVoxoVIf" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/c7eOVsCImhtVWZY1x8HU" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/0r8eGhwo0C3KZuc8MW2f" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/IEHQFUT7C6wyq0XM80Tp" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/VS7WIL1LlQtXJwp49HgD" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/F87IhhPzRPfTAqtJJOTI" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/oKbiH9Opvl5w64etdTZq" 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="/files/1WSbtbizAcROZS8vs7rk" alt=""><figcaption><p>개별 아이콘 등록</p></figcaption></figure></div>

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

<figure><img src="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/SJIgeHbAnPG4OrbSaV26" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/lKqLGzmuf7QOiWZgaXG3" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

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

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

***

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

<figure><img src="/files/gFb91hOxMqYFL1cykfcr" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/g0drSMe7fwKa8q7ATcAP" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/BZPDLD2DON5PslvGJ6H5" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/jxcugY6H8pCVJRsViKrA" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/uMjoJqY8VWJMDULcx3Yj" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/OYr6rCq9V9fdzfhSsYrt" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/FYlhOAU9sqDrxCuQhY4M" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/HJIp0HSvzC0McOZRVauH" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/d0ngpMLywewi1rC1Sxb8" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/TPmSc2BrdTHzd77GOWAb" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/H0It1ba0zd9XQKXic2dK" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/KvQ99g3RLVdoNHtHY130" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/0aquy2aMlIty7cWn7CBj" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/v6NMLSxgd2AW8mcnjG8D" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/NiYXIQz3HGCTgFMRrR5H" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

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

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

***

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

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

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

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

<figure><img src="/files/DwXwIIJrg2vZScauYxtU" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/YmOSAeNSnriJbsWwz9Oe" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/R7oE8Zqr4zZc9Q4tCwJE" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/ri4z89b05MVHWRrlcOYt" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/ktFUmSjbrdjjzJuLe4rY" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/1OG1ZHsiDyTO7CKrAtQi" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/EdURpfi0q8DeL3Dfi2MR" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/afserKJQMTiwXEUzPASL" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/lIRR4L5FCNigqNDBomdb" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/6CSZREVZvLHncu0OKOt5" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/Z6g0wTD9pdck0X4TtxWh" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/dPEtlIBCAJ4Lew6t7o3W" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/hPrnwQVmU20HVbE3oRWb" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

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

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

***

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

<figure><img src="/files/6oztd89gpOv4P1hVBXTk" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/fALmutr1Xa5BhJPYoj02" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/Z2oh37ARcNgq1TvGW1ER" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/flL1OfeR3552tXwynI5U" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/3IQMfoR05vjBOUKaMcsd" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/s7YL89vGC4Z6oVjxFYnk" 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="/files/BhsPS4Yls6LHXblD4yaV" alt=""><figcaption></figcaption></figure>

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

***