> 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="/files/O7hoT1XE8FdQylohr7x7" alt=""><figcaption></figcaption></figure>

#### 글꼴 서식 설정

* 텍스트 스타일 : 제목 1, 2, 3 / 본문 1, 2
* 글꼴 : 프리텐다드, 조선신명조, 여기어때 잘난체, 지마켓 산스
* 폰트 사이즈 : 14 \~ 56px (2px 단위 설정 가능)
* 정렬 : 왼쪽, 가운데, 오른쪽
* 텍스트 링크 설정
* 굵게, 기울임꼴, 밑줄, 취소선, 글자색, 배경색
* 글머리 기호 설정
* 번호 매기기 목록

#### 여백 및 배경 설정

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

{% tab title="버튼" %}

#### 버튼 기본 설정

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

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

<figure><img src="/files/7F0gWW5to8tDtFr8HaBU" alt=""><figcaption></figcaption></figure>

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

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

#### 구분선 설정

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

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

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

{% tab title="여백" %}

#### 여백 설정

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

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

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

{% tab title="토글" %}

#### 토글 설정

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

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

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

***

### 미디어 블록

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

#### 이미지 설정

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

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

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

{% tab title="배너" %}

#### 배너 설정

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

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

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

***

### 고급 블록

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

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

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

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

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

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

#### 슬라이더 설정

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

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

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

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

#### 자동 슬라이드쇼

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

<figure><img src="/files/5APujct0Wxguivr8il66" alt=""><figcaption></figcaption></figure>

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

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

#### 공고 리스트 설정

<figure><img src="/files/g4O0E4CQrdxsDl9XKuic" 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>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://guide.roundhr.com/homepage_builder_guide/design_edit/block_setting.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.