CSS 클래스 참조.

DXPR Builder 배우기참조요소와 CSS

DXPR Builder 콘텐츠는 자체 클래스 몇 가지와 함께 Bootstrap 5 클래스를 사용합니다. 이 참조에서는 CSS에서 사용하거나 대상으로 삼을 가능성이 가장 큰 클래스를 나열합니다.

사용자 정의 클래스 추가

요소를 선택합니다.
다음을 엽니다: More > Settings.
다음 위치에서: 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-<type>`.
`.az-<type>`	요소 유형별 클래스입니다(예: `.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 디스플레이 유틸리티를 조합합니다.

<!-- Visible only on mobile -->
<div class="d-block d-md-none">Mobile content</div>

<!-- Visible only on desktop -->
<div class="d-none d-md-block">Desktop content</div>

반응형 표시를 제어하려면 요소의 HTML classes 필드(설정의 General 섹션)에 이러한 클래스를 추가합니다.