> For the complete documentation index, see [llms.txt](https://guide.roundhr.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.roundhr.com/homepage_builder_guide/design_edit/block_setting.md).

# 블록 추가 및 설정

채용 홈페이지에서 사용할 수 있는 블록의 종류와 설정 방법을 안내합니다. 기본 블록, 미디어 블록, 고급 블록으로 나뉘며 레이아웃 단 수에 따라 사용 가능한 블록이 달라집니다.

## 개요

채용 홈페이지를 구성하는 블록의 종류와 각 블록의 상세 설정 방법을 안내합니다.

### 핵심 이점

* 텍스트, 버튼, 이미지 등 다양한 블록을 조합하여 원하는 페이지를 구성할 수 있습니다.
* 공고 리스트, 채용 단계 등 고급 블록으로 채용에 특화된 콘텐츠를 쉽게 만들 수 있습니다.
* 레이아웃 단 수에 따라 사용 가능한 블록을 확인하여 효율적으로 설계할 수 있습니다.

***

## 사전 준비

* **권한**: 관리자 권한이 필요합니다. 매니저는 별도 권한 부여 시 편집할 수 있습니다.

***

## 1. 블록 종류 <a href="#block-types" id="block-types"></a>

### 기본 블록

{% tabs %}
{% tab title="텍스트" %}

#### 텍스트 설정

> 글꼴 서식 및 여백 등 다양한 텍스트 설정을 할 수 있습니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-41a0d03cb03cd5f0b104813deb1a49c3b84dc22d%2Fhpb_design_block_setting_s1_01.png?alt=media" alt="텍스트 블록 설정 화면"><figcaption></figcaption></figure>

#### 글꼴 서식 설정

* 텍스트 스타일 : 제목 1, 2, 3 / 본문 1, 2
* 글꼴 : 프리텐다드, 카페24 써라운드, 노토산스, 조선신명조, 강원교육모두체, 지마켓 산스, 여기어때 잘난체, 페이퍼로지, 리디바탕, 원티드산스 (일부 엔터프라이즈 조직은 커스텀 폰트가 추가로 노출됩니다)
* 폰트 사이즈 : 13 \~ 56px (13\~16px은 1px 단위, 16px부터는 2px 단위로 설정 가능)
* 정렬 : 왼쪽, 가운데, 오른쪽
* 텍스트 링크 설정
* 굵게, 기울임꼴, 밑줄, 취소선, 글자색, 배경색
* 글머리 기호 설정
* 번호 매기기 목록

#### 여백 및 배경 설정

* 여백 및 배경 설정 가능
  {% endtab %}

{% tab title="버튼" %}

#### 버튼 기본 설정

> CTA 버튼을 다양하게 설정할 수 있습니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-a77226dcf87d1a71e996ce33a0cc03d088288e18%2Fhpb_design_block_setting_s1_03.png?alt=media" alt="버튼 블록 기본 설정 화면"><figcaption></figcaption></figure>

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-fe415f65b9f44db8eff38099976ebbc27c63ade4%2Fhpb_design_block_setting_s1_05.png?alt=media" alt="버튼 블록 상세 옵션 화면"><figcaption></figcaption></figure>

* 버튼 색 : 컬러 피커 및 코드로 선택
* 버튼 크기 : 작게 / 보통 / 크게
* 버튼 링크
* 텍스트 컬러 : 컬러 피커 및 코드로 선택
* 버튼 위치 : 좌측 / 중앙 / 우측 정렬
* 버튼 사이즈 : 기본 / 풀 사이즈
  {% endtab %}

{% tab title="구분선" %}

#### 구분선 설정

> 구분선을 넣어 영역별 구분감을 줄 수 있습니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-0f58fe2bff75d65efa330d09e01ccbce2aae2682%2Fhpb_design_block_setting_s1_07.png?alt=media" alt="구분선 블록 설정 화면"><figcaption></figcaption></figure>

* 선 두께 : 얇게 / 보통 / 굵게
* 선 색깔
* 선 높이 : 낮게 / 보통 / 높게 / 커스텀
  {% endtab %}

{% tab title="여백" %}

#### 여백 설정

> 세로로 나열된 디자인 요소들 사이에 여백을 추가합니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-da8a583e9bf137c345baef68137f0fa2b62c67bb%2Fhpb_design_block_setting_s1_09.png?alt=media" alt="여백 블록 설정 화면"><figcaption></figcaption></figure>

* 여백 높이 설정 : 낮게 / 보통 / 높게 / 커스텀
  * 커스텀 : 최대 64px 까지 설정 가능
    {% endtab %}

{% tab title="토글" %}

#### 토글 설정

> 토글 블록을 사용하여 FAQ와 같은 내용을 추가할 수 있습니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-b77b8557d4fd502cfcfbf22140fc6b291a9506d7%2Fhpb_design_block_setting_s1_11.png?alt=media" alt="토글 블록 설정 화면"><figcaption></figcaption></figure>

* 컨텐츠 : 토글 항목 수를 추가할 수 있습니다.
  {% endtab %}
  {% endtabs %}

***

### 미디어 블록

{% tabs %}
{% tab title="이미지" %}

#### 이미지 설정

> 이미지를 추가 및 다양한 설정을 할 수 있습니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-028b205fd8178aafc78b68a3a33d6bdc95f66b32%2Fhpb_design_block_setting_s1_13.png?alt=media" alt="이미지 블록 설정 화면" width="375"><figcaption></figcaption></figure>

* 이미지 정렬 : 왼쪽 / 가운데 / 오른쪽
* 이미지 크기 : 10 \~ 100%
* 이미지 외곽 둥글기
* 마스킹 : 1:1(원형) / 1:1(사각형) / 3:2 / 2:1
* 이미지 편집 : 원하는 부분만 자르기 가능
* 이미지 링크 설정 : 채용 홈페이지 내 페이지 또는 외부 링크 설정

***

#### 마우스 오버(호버) 효과 설정

> 이미지에 마우스를 올렸을 때 나타나는 인터랙션 효과를 설정합니다.

이미지 블록을 선택한 뒤 우측 **레이어 설정 패널** > **마우스 오버** 섹션에서 설정합니다.

**\[마우스 오버]** 토글을 활성화하면 다음 효과를 설정할 수 있습니다:

**이미지 확대**

* 활성화 시 이미지에 마우스를 올리면 이미지가 확대됩니다.
* 확대율 슬라이더로 크기를 조절합니다. (100% \~ 150%)
* 기본값: 105%

**그림자 효과**

* 활성화 시 이미지에 마우스를 올리면 그림자가 나타납니다.
* 그림자 확장 : 0 \~ 20px
* 흐림 효과 : 0 \~ 30px
* 불투명도 : 0 \~ 100%
* 기본값: 확장 10px / 흐림 10px / 불투명도 20%
* `[초기화]` 버튼으로 기본값으로 되돌릴 수 있습니다.

{% hint style="info" %}
마우스 오버 효과는 **PC(데스크탑) 환경에서만 작동**합니다.\
모바일 기기에서는 마우스 오버 이벤트가 없으므로 효과가 나타나지 않습니다.
{% endhint %}
{% endtab %}

{% tab title="동영상" %}

#### 동영상 설정

> 동영상을 추가 및 다양한 설정을 할 수 있습니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-e1ef4fc33d6ff5ed026200e8c04b77262c3bb76e%2Fhpb_design_block_setting_s1_15.png?alt=media" alt="동영상 블록 설정 화면"><figcaption></figcaption></figure>

* 링크 주소 : 영상 링크를 입력하여 동영상을 업로드합니다.
* 비디오 레이아웃 : 레이아웃에 맞추거나 여백 없이 꽉 찬 화면으로 설정합니다.
* 둥글기 : 영상 외곽 둥글기를 설정합니다.
* 자동 재생 : 영상의 자동 재생 여부를 설정합니다.
  {% endtab %}

{% tab title="배너" %}

#### 배너 설정

> 배너를 추가하여 다양한 설정을 할 수 있습니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-82d91cc024540835098ee599334293395edf4355%2Fhpb_design_block_setting_s1_17.png?alt=media" alt="배너 블록 설정 화면"><figcaption></figcaption></figure>

* 최대 5개의 이미지 설정 가능
* 콘텐츠 자동 전환 : 슬라이드 방식 / 페이드 방식
  {% endtab %}
  {% endtabs %}

***

### 고급 블록

{% tabs %}
{% tab title="채용 단계" %}

#### 채용 단계 블록 설정

> 채용 프로세스를 보여주는 디자인을 쉽게 생성 및 수정할 수 있습니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-d8862781a9d2b53ebc2c3c31214ac2327284eb4d%2Fhpb_design_block_setting_s1_19.png?alt=media" alt="채용 단계 블록 설정 화면"><figcaption></figcaption></figure>

* 단계 수 : 최대 6개의 단계까지 설정 가능합니다.
* 설명 추가 : 단계에 대한 간단 설명을 추가할 수 있습니다.
* 중앙정렬 : 단계명의 텍스트 정렬을 설정할 수 있습니다.
* 배경 : 채용 단계 블록의 배경색을 지정할 수 있습니다.
* 제목 색상 : 채용 단계명의 텍스트 컬러를 설정할 수 있습니다.
* 둥글기 : 채용 단계 블록의 외곽 둥글기를 설정할 수 있습니다.
  {% endtab %}

{% tab title="슬라이더" %}

#### 슬라이더 설정

> 사무실 사진, 복지 혜택 등의 시각적인 자료를 보여줄 수 있습니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-d2e76dcc669fdb7d717a6751f3ede46615cddb1d%2Fhpb_design_block_setting_s1_21.png?alt=media" alt="슬라이더 블록 설정 화면"><figcaption></figcaption></figure>

* 설명글 사용 : 이미지에 설명 캡션을 입력할 수 있습니다.
* 컨텐츠 : 슬라이드에 들어갈 이미지의 수를 설정할 수 있습니다.
  {% endtab %}

{% tab title="자동 슬라이드쇼" %}

#### 자동 슬라이드쇼

> 슬라이드 이미지를 자동으로 움직이게하여 채용 홈페이지에 동적인 요소를 추가할 수 있습니다.

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-55f12de44778606d85e902d84ffcf8980918ae24%2Fhpb_design_block_setting_s1_23.png?alt=media" alt="자동 슬라이드쇼 설정 화면"><figcaption></figcaption></figure>

* 애니메이션 방향 : 왼쪽 / 오른쪽
* 컨텐츠 : 자동 슬라이드에 들어갈 이미지의 수를 설정할 수 있습니다.
  {% endtab %}

{% tab title="공고 리스트" %}

#### 공고 리스트 설정

<figure><img src="https://3113620308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx3vbe9mozK3C5425TCxL%2Fuploads%2Fgit-blob-1d1ccae02e7bf9eba27ef132b62876e0c4731d68%2Fhpb_design_block_setting_s1_25.png?alt=media" alt="공고 리스트 블록 설정 화면"><figcaption></figcaption></figure>

* 공고 레이아웃 설정 : 기본형(상단 필터) / 사이드 필터형
* 필터 구성 : 직군 / 직무 / 경력 사항 / 고용 형태 / 진행 상태
* 공고 정렬
* 페이지당 공고 수

{% hint style="success" %}
\[공개]된 공고만 공고 리스트에 노출됩니다.
{% endhint %}
{% endtab %}
{% endtabs %}

***

## 2. 레이아웃 단 별 사용 가능한 블록 <a href="#block-by-layout" id="block-by-layout"></a>

> 레이아웃은 1\~4단으로 구성되며 단에 따라 사용할 수 있는 블록의 종류가 달라집니다.

* 1\~4단에서 모두에서 사용 가능한 블록 :
  * 텍스트, 버튼, 구분선, 여백, 이미지
* 1\~2단에서만 사용 가능한 블록 :
  * 토글, 동영상
* 1단에서만 사용 가능한 블록 :
  * 배너, 채용 단계, 슬라이더, 자동 슬라이드쇼, 공고 리스트

{% hint style="warning" %}
레이아웃 단 수를 변경하면 해당 단 수에서 사용할 수 없는 블록은 표시되지 않습니다. 블록 추가 전에 레이아웃 단 수를 먼저 확인하세요.
{% endhint %}

***

## 자주 묻는 질문

<details>

<summary>공고 리스트 블록에 모든 공고가 표시되지 않습니다.</summary>

공고 리스트에는 **\[공개]** 상태인 공고만 노출됩니다. 공고 관리에서 해당 공고의 공개 상태를 확인해 주세요.

</details>

<details>

<summary>이미지 블록의 마우스 오버 효과가 모바일에서 작동하지 않습니다.</summary>

마우스 오버(호버) 효과는 PC(데스크탑) 환경에서만 작동합니다. 모바일 기기에서는 마우스 오버 이벤트가 없으므로 효과가 나타나지 않습니다.

</details>

<details>

<summary>배너 블록을 2단 이상 레이아웃에서 사용할 수 없나요?</summary>

배너, 채용 단계, 슬라이더, 자동 슬라이드쇼, 공고 리스트 블록은 **1단 레이아웃에서만** 사용할 수 있습니다. 이 블록들을 사용하려면 1단 레이아웃을 선택해 주세요.

</details>