--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/reference/css-classes' title: 'CSS 클래스 참조 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:17:49+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'DXPR Builder 콘텐츠는 자체 클래스 몇 가지와 함께 Bootstrap 5 클래스를 사용합니다. 이 참조에서는 CSS에서 사용하거나 대상으로 삼을 가능성이 가장 큰 클래스를 나열합니다.' tags: - 'Elements and CSS' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T14:17:49+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'CSS 클래스 참조' description: 'DXPR Builder 콘텐츠는 자체 클래스 몇 가지와 함께 Bootstrap 5 클래스를 사용합니다. 이 참조에서는 CSS에서 사용하거나 대상으로 삼을 가능성이 가장 큰 클래스를 나열합니다.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:17:49+0000' dateModified: '2026-10-24T14:17:49+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/reference/css-classes' articleSection: '요소와 CSS' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/reference/css-classes' description: 'DXPR Builder 콘텐츠는 자체 클래스 몇 가지와 함께 Bootstrap 5 클래스를 사용합니다. 이 참조에서는 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 --- [도움말 센터](/ko/node/75)/[문서](/ko/hc/documentation) /[DXPR Builder 배우기](/ko/hc/documentation/learn-dxpr-builder) /[참조](/ko/hc/documentation/learn-dxpr-builder/reference) /[요소와 CSS](/ko/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # CSS 클래스 참조. DXPR Builder 배우기참조요소와 CSS ## 이 가이드의 내용 DXPR Builder 콘텐츠는 자체 클래스 몇 가지와 함께 Bootstrap 5 클래스를 사용합니다. 이 참조에서는 CSS에서 사용하거나 대상으로 삼을 가능성이 가장 큰 클래스를 나열합니다. ## 사용자 정의 클래스 추가 1. 요소를 선택합니다. 2. 다음을 엽니다: **More > Settings**. 3. 다음 위치에서: **General** 섹션의 **HTML classes** 필드에서 클래스를 선택합니다. 클래스 이름을 직접 입력하려면 **Edit as text**을 클릭한 뒤 공백으로 클래스를 구분합니다. ## Bootstrap 그리드 클래스 ### 컨테이너 클래스 | 클래스 | 설명 | |---|---| | `.container` | 고정 너비 중앙 컨테이너 | | `.container-fluid` | 전체 너비 컨테이너 | ### 로우 및 컬럼 클래스 | 클래스 | 설명 | |---|---| | `.row` | 컬럼용 플렉스 컨테이너 | | `.col-{n}` | 로우의 n/12를 차지하는 컬럼 | | `.col-sm-{n}` | small에서 컬럼 너비(576px 이상) | | `.col-md-{n}` | medium에서 컬럼 너비(768px 이상) | | `.col-lg-{n}` | large에서 컬럼 너비(992px 이상) | | `.col-xl-{n}` | XL에서 컬럼 너비(1200px 이상) | ## Bootstrap 간격 유틸리티 ### 마진 | 클래스 | 설명 | |---|---| | `.m-{0-5}` | 모든 면의 마진 | | `.mt-{0-5}` | 상단 마진 | | `.mb-{0-5}` | 하단 마진 | | `.ms-{0-5}` | 시작 마진(LTR에서 왼쪽) | | `.me-{0-5}` | 끝 마진(LTR에서 오른쪽) | | `.mx-{0-5}` | 좌우 마진 | | `.my-{0-5}` | 상하단 마진 | ### 패딩 | 클래스 | 설명 | |---|---| | `.p-{0-5}` | 모든 면의 패딩 | | `.pt-{0-5}` | 상단 패딩 | | `.pb-{0-5}` | 하단 패딩 | | `.ps-{0-5}` | 시작 패딩 | | `.pe-{0-5}` | 끝 패딩 | | `.px-{0-5}` | 좌우 패딩 | | `.py-{0-5}` | 상하단 패딩 | ## Bootstrap 텍스트 유틸리티 | 클래스 | 설명 | |---|---| | `.text-start` | 왼쪽 정렬 텍스트 | | `.text-center` | 가운데 정렬 텍스트 | | `.text-end` | 오른쪽 정렬 텍스트 | | `.fw-bold` | 굵은 텍스트 | | `.fw-light` | 가는 텍스트 | | `.fst-italic` | 기울임 텍스트 | | `.text-uppercase` | 대문자 텍스트 | | `.text-lowercase` | 소문자 텍스트 | | `.fs-1` ~ `.fs-6` | 글꼴 크기(1이 가장 큼) | ## Bootstrap 색상 유틸리티 ### 텍스트 색상 | 클래스 | 설명 | |---|---| | `.text-primary` | 테마 기본 색상 | | `.text-secondary` | 테마 보조 색상 | | `.text-success` | 녹색(성공) | | `.text-danger` | 빨간색(위험/오류) | | `.text-warning` | 노란색(경고) | | `.text-info` | 청록색(정보) | | `.text-muted` | 흐린 회색 텍스트 | | `.text-white` | 흰색 텍스트 | ### 배경 색상 | 클래스 | 설명 | |---|---| | `.bg-primary` | 기본 배경 | | `.bg-secondary` | 보조 배경 | | `.bg-success` | 녹색 배경 | | `.bg-danger` | 빨간색 배경 | | `.bg-warning` | 노란색 배경 | | `.bg-info` | 청록색 배경 | | `.bg-light` | 밝은 회색 배경 | | `.bg-dark` | 어두운 배경 | ## Bootstrap 디스플레이 유틸리티 | 클래스 | 설명 | |---|---| | `.d-none` | 요소 숨기기 | | `.d-block` | 블록 디스플레이 | | `.d-inline` | 인라인 디스플레이 | | `.d-sm-none` | small 이상에서 숨기기 | | `.d-md-block` | medium 이상에서 표시 | | `.d-lg-none` | large 이상에서 숨기기 | ## DXPR Builder 클래스 ### 요소 클래스 | 클래스 | 설명 | |---|---| | `.az-element` | 대부분의 콘텐츠 요소의 기본 클래스입니다. Button과 Image에는 없으므로 다음을 대상으로 삼습니다: `.az-`. | | `.az-` | 요소 유형별 클래스입니다(예: `.az-text`, `.az-image` 또는 `.az-images-carousel`)이며 Social Links용 클래스는 `.st-social` | | `.az-section` | Section 요소 | | `.row` | Row 요소(Bootstrap)입니다. 이전 버전의 콘텐츠에 있을 수 있는 클래스: `.az-row` | | `.col-*` | Column 요소(Bootstrap)입니다. 이전 버전의 콘텐츠에 있을 수 있는 클래스: `.az-column` | ### 애니메이션 클래스 애니메이션은 animate.css 명명법을 사용합니다. 요소가 애니메이션되는 동안 다음 클래스가 있습니다. | 클래스 | 설명 | |---|---| | `.animated` | 애니메이션 실행 중에 추가됩니다 | | `.infinite` | 추가 조건: **Infinite**가 켜져 있을 때. | | 애니메이션 이름, 예: `.fadeIn` | 재생 중인 **Animation in** 또는 **Animation out** 효과입니다. | ### 변형 클래스 | 클래스 | 설명 | |---|---| | `.az-variant-container` | A/B 테스트 컨테이너입니다. 다음과 함께 사용합니다: `.rl-experiment` | | `.az-variant-wrapper` | 각 variant arm | | `.az-variant-original` | 원본 arm(A) | | `.az-variant-1`, `.az-variant-2` | arm B, C 등 | | `.az-variant-active` | 현재 표시되는 arm | ## 반응형 표시를 위한 클래스 사용 특정 화면 크기에서 콘텐츠를 표시하거나 숨기려면 Bootstrap 디스플레이 유틸리티를 조합합니다. ```html
Mobile content
Desktop content
``` 반응형 표시를 제어하려면 요소의 **HTML classes** 필드(설정의 **General** 섹션)에 이러한 클래스를 추가합니다.