--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/customization/utility-classes' title: '유틸리티 클래스 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:37:16+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 모든 요소에는 이름 있는 클래스 목록이 있는 HTML classes 필드가 있습니다. Bootstrap 5 유틸리티와 드롭 섀도우가 기본 제공됩니다. 테마는 .info.yml(을)를 통해 자체 그룹을 추가할 수 있으며, 모듈은 alter 훅을 통해 추가할 수 있습니다. 이 페이지에서는 목록의 내용과 클래스 등록 방법을 설명합니다. 클래스 이름을 직접 입력하는 대신 편집자가 이름으로 브랜드 모양을 고릅니다. 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: |- 모든 요소에는 이름 있는 클래스 목록이 있는 HTML classes 필드가 있습니다. Bootstrap 5 유틸리티와 드롭 섀도우가 기본 제공됩니다. 테마는 .info.yml(을)를 통해 자체 그룹을 추가할 수 있으며, 모듈은 alter 훅을 통해 추가할 수 있습니다. 이 페이지에서는 목록의 내용과 클래스 등록 방법을 설명합니다. 클래스 이름을 직접 입력하는 대신 편집자가 이름으로 브랜드 모양을 고릅니다. 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:16+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/utility-classes' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/customization/utility-classes' description: |- 모든 요소에는 이름 있는 클래스 목록이 있는 HTML classes 필드가 있습니다. Bootstrap 5 유틸리티와 드롭 섀도우가 기본 제공됩니다. 테마는 .info.yml(을)를 통해 자체 그룹을 추가할 수 있으며, 모듈은 alter 훅을 통해 추가할 수 있습니다. 이 페이지에서는 목록의 내용과 클래스 등록 방법을 설명합니다. 클래스 이름을 직접 입력하는 대신 편집자가 이름으로 브랜드 모양을 고릅니다. 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/text-editor) - [후크 API 참조](/ko/hc/documentation/learn-dxpr-builder/development/hooks-api) 모든 요소에는 이름 있는 클래스 목록이 있는 **HTML classes** 필드가 있습니다. Bootstrap 5 유틸리티와 드롭 섀도우가 기본 제공됩니다. 테마는 `.info.yml`(을)를 통해 자체 그룹을 추가할 수 있으며, 모듈은 alter 훅을 통해 추가할 수 있습니다. 이 페이지에서는 목록의 내용과 클래스 등록 방법을 설명합니다. 클래스 이름을 직접 입력하는 대신 편집자가 이름으로 브랜드 모양을 고릅니다. ## 클래스 적용 1. 요소의 설정을 열고 **General** 패널 아래쪽에서 **HTML classes**(을)를 찾으세요. 2. 상자를 클릭하고 목록에서 클래스를 고르세요. 상자에 입력하면 목록이 필터링됩니다. 3. 목록에 없는 클래스를 입력하려면 **Edit as text**(을)를 클릭하고 입력하세요. 4. 대화상자에서 **Save**(을)를 클릭한 뒤 빌더 툴바에서 **Save**(을)를 클릭하세요. 클래스는 저장된 HTML의 요소 `class` 속성에 들어갑니다. 일반적인 용도는 [HTML ID and classes](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) 문서에서 편집자에게 안내합니다. ## 목록의 구성 에디터는 시작할 때 목록을 만듭니다. 세 출처를 다음 순서로 합칩니다: 1. 기본 제공 목록. **Drop shadows** 그룹, 짧은 **Bootstrap classes** 그룹, 작업별 Bootstrap 5 유틸리티가 들어 있습니다. **Display & Visibility**, **Responsive Visibility**, **Margins**, **Padding**, **Text Colors** 등. 2. 다음 키가 있는 설치된 모든 테마의 그룹: `.info.yml`에 `dxpr_builder_classes` 키가 있는 경우. 그룹에는 테마 이름이 표시됩니다. 3. 모듈의 변경. 자세한 내용은 [Register classes from a module](#register-classes-from-a-module) 문서를 참고하세요. 따라서 모든 사이트에는 공간용 클래스(`mt-3`, `px-4` 등), 표시용 클래스(`d-none` 등), 텍스트용 클래스(`text-center`, `fw-bold` 등)가 있습니다. 별도로 설정할 내용이 없습니다. ## 테마에 클래스 등록 테마의 `.info.yml`에 `dxpr_builder_classes` 매핑을 추가하세요. 각 키는 클래스 이름이며, 공백으로 구분하여 여러 개도 됩니다. 각 값은 편집자에게 표시되는 레이블입니다. DXPR Theme은 다음 방식으로 클래스를 등록합니다: ```yaml dxpr_builder_classes: dxpr-theme-form-inline: 'Inline Form' dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1' dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1' ``` 1. 다음에 매핑을 추가하세요: `themes/custom/mytheme/mytheme.info.yml`. ```yaml dxpr_builder_classes: brand-card: 'Brand card' brand-card shadow-lg: 'Brand card with shadow' ``` 2. 테마가 모든 페이지에 불러오는 라이브러리에 클래스용 CSS를 작성하세요. 자세한 내용은 [Custom CSS](/ko/hc/documentation/learn-dxpr-builder/customization/custom-css) 문서를 참고하세요. 3. 다음으로 캐시를 비우세요: `drush cr`. Drupal이 정보 파일을 다시 읽습니다. 4. 요소의 설정을 열고 **HTML classes**에 테마 이름의 그룹과 두 항목이 표시되는지 확인하세요. 키가 있는 설치된 모든 테마가 그룹을 추가합니다. 기본 테마만이 아닙니다. 그룹에는 항상 테마 이름이 표시되며, 정보 파일로 바꿀 수 없습니다. ## 모듈에서 클래스 등록 커스텀 모듈은 alter 훅으로 클래스를 추가하거나 테마가 등록한 클래스를 제거할 수 있습니다. 에디터가 브라우저에서 추가하므로 기본 제공 Bootstrap 항목은 제거할 수 없습니다. 코드는 [Hooks API reference](/ko/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_classes_alter) 문서에 있습니다. ## Bootstrap 버전 기본 제공 목록은 Bootstrap 5입니다. 테마에 Bootstrap 5가 불러와지지 않으면 **Sideload Bootstrap files**(을)를 **Bootstrap 5**(으)로 설정하세요. 위치: **Bootstrap** 아래(**DXPR Studio** > **DXPR Builder** > **General Settings**). 클래스에 뒤의 CSS가 생깁니다. 불러오는 항목은 [Performance](/ko/hc/documentation/learn-dxpr-builder/advanced/performance#bootstrap-sideloading) 문서를 참고하세요. ## 클래스가 표시되지 않는 경우 - **HTML classes에 테마 그룹이 없습니다.** Drupal이 테마 정보 파일의 이전 복사본을 사용 중입니다. 다음을 클릭하세요: **Clear all caches** (**Configuration** > **Development** > **Performance** (`/admin/config/development/performance`)에서). 또는 `drush cr`(을)를 실행하세요. - **키가 있는 테마에 그룹이 추가되지 않습니다.** 설치된 테마만 해당됩니다. **Appearance** (`/admin/appearance`)에서 테마를 설치하세요. 기본 테마일 필요는 없습니다. - **클래스를 골라도 요소가 똑같아 보입니다.** 페이지에 해당 클래스의 CSS가 불러와지지 않습니다. 테마가 불러오는 라이브러리에 규칙을 추가하세요. 자세한 내용은 [Custom CSS](/ko/hc/documentation/learn-dxpr-builder/customization/custom-css) 문서를 참고하세요. Bootstrap 클래스는 [Bootstrap version](#bootstrap-version) 문서를 참고하세요. ## 다음 단계 - [Custom CSS](/ko/hc/documentation/learn-dxpr-builder/customization/custom-css): 클래스 뒤의 규칙을 작성합니다. - [Text editor](/ko/hc/documentation/learn-dxpr-builder/customization/text-editor): **Styles** 목록에서 문단과 단어용 클래스를 제공합니다. - [Hooks API reference](/ko/hc/documentation/learn-dxpr-builder/development/hooks-api): DXPR Builder가 제공하는 다른 훅입니다.