---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/development/css-architecture'
title: 'CSS 아키텍처 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:40:21+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  빌더 콘텐츠는 Bootstrap 5 마크업에 작은 az-
  클래스 집합을 더한 것입니다. 게시된 페이지에 나타나는 클래스와
  편집기 실행 중에만 존재하는 클래스를 알면 테마 CSS가
  겨냥할 대상을 알 수 있습니다.
tags:
  - 'Architectuur en API’s'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T01:40:21+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'CSS 아키텍처'
      description: |-
        빌더 콘텐츠는 Bootstrap 5 마크업에 작은 az-
        클래스 집합을 더한 것입니다. 게시된 페이지에 나타나는 클래스와
        편집기 실행 중에만 존재하는 클래스를 알면 테마 CSS가
        겨냥할 대상을 알 수 있습니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T01:40:21+0000'
      dateModified: '2026-10-24T01:40: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/css-architecture'
      articleSection: 'Architectuur en API’s'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/development/css-architecture'
      description: |-
        빌더 콘텐츠는 Bootstrap 5 마크업에 작은 az-
        클래스 집합을 더한 것입니다. 게시된 페이지에 나타나는 클래스와
        편집기 실행 중에만 존재하는 클래스를 알면 테마 CSS가
        겨냥할 대상을 알 수 있습니다.
      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) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Architectuur en API’s](/hc/documentation/learn-dxpr-builder/extend/architecture) # CSS 아키텍처.

 Learn DXPR BuilderExtendArchitectuur en API’s

   ## In this guide

빌더 콘텐츠는 Bootstrap 5 마크업에 작은 `az-`클래스 집합을 더한 것입니다. 게시된 페이지에 나타나는 클래스와 편집기 실행 중에만 존재하는 클래스를 알면 테마 CSS가 겨냥할 대상을 알 수 있습니다.

## 게시된 페이지의 클래스

### 레이아웃

| 마크업 | 클래스 |
|---|---|
| Section | `az-section`. 안에 `container` 또는 `container-fluid`. |
| Row | Bootstrap `row` |
| Column | Bootstrap `col-*` 클래스. 중단점마다 하나. |
| Content element | 요소 유형마다 하나. 예: `az-text`, `az-image`, `az-images-carousel`. Social Links는 `st-social`(을)를 씀. 대부분 `az-element`도 가짐. Button과 Image는 제외. |

이전 버전이 저장한 콘텐츠에는 `az-row`와 `az-column`(이)가 남아 있을 수 있습니다. 편집기가 이를 인식하고 다음에 행이나 칸을 저장할 때 제외합니다.

### 수정자

| 클래스 | 설정 주체 |
|---|---|
| `az-row--equal-height` | **Equal-height columns**(행). 없으면 행에 지정: `align-items-start` |
| `az-row--reverse-horizontal` | **Mirror row**(행) |
| `az-util-vertical-centering` | **Vertical centering**(섹션이나 칸) |

### Bootstrap 그리드

칸은 Bootstrap의 그리드 클래스를 씁니다:

| 클래스 | 너비 |
|---|---|
| `col` | 행을 균등 분할 |
| `col-6` | 50% |
| `col-md-4` | 768px부터 33% |
| `col-lg-3` | 992px부터 25% |

## 사용자 정의 CSS 작성

- 빌더 전용 규칙은 다음으로 범위를 한정하세요: `.az-section` 또는 유형 클래스(예: `.az-text`, `.az-button`). `.az-element`에는 Button과 Image가 없습니다.
- Bootstrap의 그리드 클래스를 재정의하지 마세요. 편집기가 이를 통해 칸 너비를 정합니다.
- 일회성 스타일은 요소의 **HTML classes**필드에 클래스를 추가하고 해당 클래스를 스타일링하세요.

## 편집기 전용 클래스

이 클래스들은 편집기 실행 중에만 존재하므로 게시된 페이지와는 절대 일치하지 않습니다:

| 클래스 | 위치 |
|---|---|
| `dxpr-builder-ui` | 편집기 인터페이스의 모든 조각. 제어 막대, 메뉴, 대화 상자. |
| `controls` | 요소의 제어 막대 |
| `dxpr-editor` | Preview를 제외한 모든 보기 모드의 필드 컨테이너 |
| `az-ctnr` | 편집기가 시작된 후의 필드 컨테이너 |
| `az-sortable-placeholder` | 요소를 끄는 동안의 놓기 자리 표시자 |

편집기 자체 스타일은 다음에 있습니다: `dxpr_builder/css/dxpr_builder_backend.css`. 다음에서 빌드됨: `dxpr_builder/sass/dxpr_builder_backend.scss`.

## Bootstrap 버전

빌더는 Bootstrap 5 마크업을 씁니다. 테마가 Bootstrap 5를 불러오지 않으면 **Sideload Bootstrap files**를 **Bootstrap 5**(으)로 설정하세요. 위치: **DXPR Studio > DXPR Builder > General Settings**의 **Bootstrap** 아래. **None (theme provides Bootstrap)**(은)는 테마가 불러온다고 가정합니다.