---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/customization/text-editor'
title: '텍스트 에디터 설정 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:37:23+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  편집자가 DXPR Builder에서 텍스트를 클릭하면 툴바가 나타납니다. Styles 목록을 브랜드
  스타일(리드 문단, 강조 구 등)로 채울 수 있습니다. 역할마다 표시되는 버튼도 고를 수 있습니다.
  편집자는 크기와 색상을 직접 설정하는 대신 한 번의 클릭으로 브랜드 모양을 적용합니다. 글꼴은
  테마에서 가져옵니다. 자세한 내용은 Custom fonts 문서를 참고하세요.
tags:
  - 'Je huisstijl toepassen'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: '텍스트 에디터 설정'
      description: |-
        편집자가 DXPR Builder에서 텍스트를 클릭하면 툴바가 나타납니다. Styles 목록을 브랜드
        스타일(리드 문단, 강조 구 등)로 채울 수 있습니다. 역할마다 표시되는 버튼도 고를 수 있습니다.
        편집자는 크기와 색상을 직접 설정하는 대신 한 번의 클릭으로 브랜드 모양을 적용합니다. 글꼴은
        테마에서 가져옵니다. 자세한 내용은 Custom fonts 문서를 참고하세요.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T01:37:23+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/customization/text-editor'
      articleSection: 'Je huisstijl toepassen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/customization/text-editor'
      description: |-
        편집자가 DXPR Builder에서 텍스트를 클릭하면 툴바가 나타납니다. Styles 목록을 브랜드
        스타일(리드 문단, 강조 구 등)로 채울 수 있습니다. 역할마다 표시되는 버튼도 고를 수 있습니다.
        편집자는 크기와 색상을 직접 설정하는 대신 한 번의 클릭으로 브랜드 모양을 적용합니다. 글꼴은
        테마에서 가져옵니다. 자세한 내용은 Custom fonts 문서를 참고하세요.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 홈
            item: 'https://dxpr.com/ko'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ko
---
[Help Center](/ko/node/75)/[Documentation](/ko/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # 텍스트 에디터 설정.

 Learn DXPR BuilderManage the siteJe huisstijl toepassen

   ## In this guide

 Related guides

- [테마 CSS로 빌더 콘텐츠 스타일 지정](/ko/hc/documentation/learn-dxpr-builder/customization/custom-css)
- [유틸리티 클래스](/ko/hc/documentation/learn-dxpr-builder/customization/utility-classes)
- [역할별 빌더 표시 항목 선택](/ko/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)

편집자가 DXPR Builder에서 텍스트를 클릭하면 툴바가 나타납니다. **Styles** 목록을 브랜드 스타일(리드 문단, 강조 구 등)로 채울 수 있습니다. 역할마다 표시되는 버튼도 고를 수 있습니다. 편집자는 크기와 색상을 직접 설정하는 대신 한 번의 클릭으로 브랜드 모양을 적용합니다. 글꼴은 테마에서 가져옵니다. 자세한 내용은 [Custom fonts](/ko/hc/documentation/learn-dxpr-builder/customization/custom-fonts) 문서를 참고하세요.

## 시작하기 전에

- 스타일을 편집하려면 **Administer DXPR Builder configuration** 권한이 필요합니다.
- 툴바 버튼을 편집하려면 **Administer dxpr builder profile** 권한이 필요합니다.
- 모든 스타일에는 뒤에 CSS가 필요합니다. `lead` 같은 Bootstrap 5 클래스는 페이지에 Bootstrap 5가 불러와질 때 작동합니다. 직접 만든 클래스는 테마의 규칙이 필요합니다. 자세한 내용은 [Custom CSS](/ko/hc/documentation/learn-dxpr-builder/customization/custom-css) 문서를 참고하세요.

## 설정

1. 다음으로 이동하세요: **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`).
2. 다음을 펼치세요: **Text Editor**. **Custom styles** 상자에는 DXPR Builder에 포함된 스타일이 한 줄에 하나씩 이미 나열되어 있습니다.
3. 다음 형식으로 스타일마다 한 줄씩 추가하고, 필요 없는 줄은 삭제하세요: `Label=element.class`.
4. 이제 **Save settings**(을)를 클릭하세요.
5. 빌더에서 페이지를 열거나(열려 있으면 새로고침) 텍스트를 클릭하세요.
6. 툴바에서 **Styles**(을)를 클릭하고 스타일을 고르세요.

다음 줄은 네 가지 스타일을 추가합니다:

```text
Lead=p.lead
Event date=span.text-primary.fw-semibold
Callout=p.border-start.border-primary.border-4.ps-3
Sassy Title=h1.sassy-title

```

각 줄은 세 부분으로 구성됩니다:

- 목록에서 편집자에게 표시되는 이름은 다음 앞에 있습니다: **label** (`=` 앞).
- 스타일 범위를 정하는 요소는 다음 뒤에 있습니다: **element** (`=` 뒤). `p`, `h2`, `blockquote` 같은 블록 요소는 문단이나 제목 전체에 스타일을 적용합니다. `span`, `mark`, `code` 같은 인라인 요소는 선택한 단어만 감쌉니다.
- 각 항목은 점을 뒤따릅니다: **class**. 위의 `Callout`처럼 점을 더해 클래스를 더 추가하세요.

요소 이름은 문자와 숫자만 사용합니다. 클래스 이름은 문자, 숫자, 하이픈, 밑줄을 사용합니다. 제공 목록으로 되돌리려면 상자를 비우고 저장하세요.

## 역할별 툴바 버튼

1. 다음으로 이동하세요: **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`). 역할의 프로필 옆에 있는 **Edit**(을)를 클릭하세요.
2. 다음을 펼치세요: **Text editor buttons (inline editing)**. 페이지에서 편집하는 텍스트용 버튼을 선택하세요.
3. 다음을 펼치세요: **Text editor buttons (modal editing)**. 설정 대화상자의 텍스트 상자용 버튼을 선택하세요.
4. 이제 **Save**(을)를 클릭하세요.

인라인 편집은 Text, Alert, Blockquote 요소를 다룹니다. 사용자 지정 스타일을 표시하려면 두 그룹에 모두 **Font style**(을)를 선택된 상태로 두세요. 프로필에서 **Styles** 목록을 가리키는 이름입니다. 그룹의 모든 버튼을 선택 해제하면 해당 툴바는 기본 제공 세트로 돌아갑니다. [User profiles](/ko/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) 문서에 어떤 프로필이 누구에게 적용되는지 설명되어 있습니다.

## 표시되는 내용

**Styles**(을)를 클릭하면 두 그룹의 패널이 열립니다. **Block styles**에는 문단과 제목 전체용 스타일이, **Text styles**에는 선택한 단어용 스타일이 있습니다. 스타일을 고르면 버튼에 이름이 표시되며, 여러 개가 적용되면 **Multiple styles**(이)가 표시됩니다.

에디터는 요소와 클래스를 페이지 HTML에 저장하므로 방문자에게도 같은 모양이 표시됩니다. 블록 스타일은 자체 요소에서만 활성화됩니다. `Sassy Title` 항목은 **Heading 1**에 커서가 있어야 합니다.

## 설정

36개 버튼이 두 그룹에 모두 표시됩니다. 새 프로필은 다음이 선택된 상태로 시작합니다:

| 버튼 | 머신 네임 | 인라인 기본값 | 모달 기본값 |
|---|---|:-:|:-:|
| **AI Assistant**, **AI Tone of Voice** | `aiAgentButton`, `aiAgentToneButton` | 예 | 예 |
| **Bold**, **Italic** | `bold`, `italic` | 예 | 예 |
| **Underline**, **Strike through** | `underline`, `strikethrough` |  | 예 |
| **Superscript**, **Subscript** | `superscript`, `subscript` |  | 예 |
| **Remove format** | `removeFormat` | 예 | 예 |
| **Text color** | `fontColor` | 예 | 예 |
| **Background color** | `fontBackgroundColor` |  |  |
| **Font size** | `fontSize` | 예 | 예 |
| **Font family** | `fontFamily` |  |  |
| **HTML block format** | `heading` | 예 | 예 |
| **Font style** (**Styles** 목록) | `style` | 예 | 예 |
| **Align left**, **Center**, **Align right**, **Justify** | `alignment:left`, `alignment:center`, `alignment:right`, `alignment:justify` | 예 | 예 |
| **Insert/Remove Bullet list** | `bulletedList` | 예 | 예 |
| **Insert/Remove Numbered list** | `numberedList` |  | 예 |
| **Outdent**, **Indent** | `outdent`, `indent` |  | 예 |
| **Block quote** | `blockQuote` |  | 예 |
| **Link**, **Image**, **Table** | `link`, `insertImage`, `insertTable` | 예 | 예 |
| **Horizontal rule**, **Character map** | `horizontalLine`, `specialCharacters` |  | 예 |
| **Source code**, **Show blocks** | `sourceEditing`, `showBlocks` |  | 예 |
| **Select all**, **Replace**, **Accessibility help** | `selectAll`, `findAndReplace`, `accessibilityHelp` |  |  |
| **Undo**, **Redo** | `undo`, `redo` | 예 | 예 |

사용 상태인 프로필과 맞는 역할이 없으면 기본 툴바가 제공됩니다. 인라인은 다음과 같습니다: **Bold**, **Italic**, **Remove format**, **HTML block format**, **Font style**, 두 목록, **Link**, **Image**, **Table**, **Undo** 및 **Redo**. 모달 툴바에는 밑줄, 취소선, 스크립트, 정렬, 들여쓰기, 색상, 크기 버튼이 추가됩니다. **Block quote**, **Horizontal rule**, **Character map**, **Source code**, **Show blocks**(도)도 추가됩니다. AI가 켜져 있으면 둘 다 AI 버튼 2개가 추가됩니다.

**Font family**(은)는 CKEditor의 표준 웹 안전 글꼴을 제공하며 테마의 글꼴이 아닙니다.

## 스타일이 표시되지 않는 경우

- **Styles 목록에 제공 스타일만 표시됩니다.** 한 줄이 형식을 깨뜨리거나 두 스타일 사이에 빈 줄이 있어 DXPR Builder가 전체 목록을 무시합니다. 다음 아래에서 고친 뒤 저장하세요: **Text Editor** (`/admin/dxpr_studio/dxpr_builder/settings`에서).
- **스타일이 회색으로 표시됩니다.** 블록 스타일은 자체 요소에서만 작동합니다. `h1.sassy-title` 항목은 **Heading 1**(이)가 필요합니다. 먼저 제목 목록으로 블록을 바꾸거나 `p`용으로 스타일을 정의하세요.
- **툴바에 Styles 버튼이 없습니다.** 에디터의 프로필에 **Font style** 선택이 해제되어 있습니다. `/admin/dxpr_studio/dxpr_builder/profile`의 두 버튼 그룹에서 선택하세요.
- **스타일은 적용되지만 텍스트가 똑같아 보입니다.** 테마에 해당 클래스의 CSS가 없거나 Bootstrap 5가 불러와지지 않습니다. 테마에 규칙을 추가하거나 **Sideload Bootstrap files**(을)를 **Bootstrap 5**(으)로 설정하세요. 위치: General Settings 페이지의 **Bootstrap**.
- **편집자에게는 스타일이 표시되지만 방문자에게는 표시되지 않습니다.** **Text Filters** 아래에서 **Apply text format filters to frontend content** 항목이 켜져 있어 필드의 텍스트 형식이 `class` 속성을 제거합니다. 옵션을 끄거나 클래스를 유지하는 형식을 필드에 지정하세요. 자세한 내용은 [Visitors see something different](/hc/documentation/learn-dxpr-builder/troubleshooting/visitors-see-something-else) 문서를 참고하세요.

## 다음 단계

- [Custom CSS](/ko/hc/documentation/learn-dxpr-builder/customization/custom-css): 스타일 클래스 뒤의 테마 규칙을 작성합니다.
- [Utility classes](/ko/hc/documentation/learn-dxpr-builder/customization/utility-classes): **HTML classes** 목록에서 요소 전체용 클래스를 제공합니다.
- [User profiles](/ko/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin): 프로필이 제어하는 다른 모든 항목입니다.