---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/development/theming'
title: 'DXPR Builder 테마 적용 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:16:21+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  빌더 콘텐츠는 페이지의 일반적인 HTML이므로 테마가 다른 콘텐츠처럼 스타일을 적용합니다. 이 페이지에서는 테마가 상속하는 내용, 에디터에 클래스를 추가하는 방법, 재정의 위치를 설명합니다.
  테마가 스타일을 적용하는 대상
  게시된 빌더 콘텐츠는 테마의 스타일을 상속합니다.
tags:
  - 'Build on it'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T19:16:21+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'DXPR Builder 테마 적용'
      description: |-
        빌더 콘텐츠는 페이지의 일반적인 HTML이므로 테마가 다른 콘텐츠처럼 스타일을 적용합니다. 이 페이지에서는 테마가 상속하는 내용, 에디터에 클래스를 추가하는 방법, 재정의 위치를 설명합니다.
        테마가 스타일을 적용하는 대상
        게시된 빌더 콘텐츠는 테마의 스타일을 상속합니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:16:21+0000'
      dateModified: '2026-10-24T19:16:21+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/development/theming'
      articleSection: '빌더 위에 개발'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/development/theming'
      description: |-
        빌더 콘텐츠는 페이지의 일반적인 HTML이므로 테마가 다른 콘텐츠처럼 스타일을 적용합니다. 이 페이지에서는 테마가 상속하는 내용, 에디터에 클래스를 추가하는 방법, 재정의 위치를 설명합니다.
        테마가 스타일을 적용하는 대상
        게시된 빌더 콘텐츠는 테마의 스타일을 상속합니다.
      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
---
[도움말 센터](/ko/node/75)/[문서](/ko/hc/documentation) /[DXPR Builder 배우기](/ko/hc/documentation/learn-dxpr-builder) /[확장](/ko/hc/documentation/learn-dxpr-builder/extend) /[빌더 위에 개발](/ko/hc/documentation/learn-dxpr-builder/extend/build-on-it) # DXPR Builder 테마 적용.

 DXPR Builder 배우기확장빌더 위에 개발

   ## 이 가이드의 내용

빌더 콘텐츠는 페이지의 일반적인 HTML이므로 테마가 다른 콘텐츠처럼 스타일을 적용합니다. 이 페이지에서는 테마가 상속하는 내용, 에디터에 클래스를 추가하는 방법, 재정의 위치를 설명합니다.

## 테마가 스타일을 적용하는 대상

게시된 빌더 콘텐츠는 테마의 스타일을 상속합니다.

- 제목, 본문 텍스트, 링크는 테마의 스타일을 사용합니다.
- 레이아웃은 Bootstrap 5 행과 컬럼을 사용하므로 Bootstrap 5 테마와 잘 맞습니다. 다른 테마에서는 **DXPR Studio > DXPR Builder > 일반 설정**으로 이동하여 **Bootstrap 파일 사이드로드**를 **Bootstrap 5**로 설정합니다.
- 모든 요소는 유형마다 하나의 클래스를 가집니다. 예를 들어 `az-card`나 `az-button`이며 대부분 `az-element`도 포함합니다. [CSS 아키텍처](/ko/hc/documentation/learn-dxpr-builder/development/css-architecture)를 참조하세요.

## 에디터에 클래스 추가

### 테마의 info.yml에서

테마의 `.info.yml`에서 `dxpr_builder_classes` 아래에 클래스를 나열합니다. 테마가 활성화된 동안 모든 요소의 **HTML 클래스** 목록에 테마 이름의 옵션 그룹으로 표시됩니다.

```yaml
# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

```

### 모듈에서

함수 `hook_dxpr_builder_classes_alter()`를 구현합니다. 이름은 `_alter`로 끝나야 합니다. [후크 API 참조](/ko/hc/documentation/learn-dxpr-builder/development/hooks-api)를 참조하세요.

```php
/**
 * Implements hook_dxpr_builder_classes_alter().
 */
function mymodule_dxpr_builder_classes_alter(&$classes) {
  $classes['optgroup-custom'] = t('Custom Styles');
  $classes['custom-card'] = t('Custom card');
  $classes['custom-hero'] = t('Custom hero');
}

```

## 버튼 스타일

버튼 요소는 Bootstrap 스타일인 기본, 보조, 성공, 정보, 경고, 위험, 링크, 밝은, 어두운을 제공합니다. 목록은 에디터에 고정되어 있으며 buttons folders 후크로 바뀌지 않습니다. 버튼에 브랜드 모양을 적용하려면 테마에서 Bootstrap `btn-*` 클래스의 스타일을 지정하거나 **HTML 클래스**로 직접 클래스를 추가합니다.

## CSS 재정의

테마의 CSS에서 빌더 출력을 재정의합니다.

```css
/* Section padding */
.az-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Card shadows */
.az-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

```

에디터가 스타일 탭에서 지정하는 설정은 인라인 스타일로 기록됩니다. 인라인 스타일은 `!important`를 사용하지 않는 테마 규칙보다 우선하므로 기본값은 테마 CSS로 지정하고 요소별 재정의는 에디터에게 맡깁니다.

## 에디터와 테마

에디터는 필드가 표시되는 페이지에서 실행되므로 관리 테마가 아니라 프런트엔드 테마 안에서 실행됩니다. 컨트롤 바, 메뉴, 대화상자에는 `dxpr-builder-ui` 클래스가 있으며 자체 스타일시트인 `dxpr_builder_backend.css`를 로드합니다. `button`이나 `.modal` 같은 넓은 선택자를 대상으로 하는 테마 규칙은 여전히 영향을 줄 수 있으므로 규칙을 콘텐츠 영역으로 한정합니다.