---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/element-settings/style-tab'
title: '스타일 패널에서 요소 모양 변경 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:03:59+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  한 페이지의 한 요소에만 고유한 모양이 필요할 때 스타일 패널을 사용합니다. 색상이 있는 카드, 흐려진 로고, 캠페인 색상의 버튼이 예시입니다. 변경할 때마다 페이지에서 바로 확인할 수 있습니다. 모든 버튼의 색상처럼 모든 페이지가 공유해야 하는 모양은 대신 테마를 변경합니다. 테마에서 한 번 편집하면 사이트 전체가 업데이트됩니다.
  동영상에서는 아래의 첫 번째 실전 방법에 따라 파트너 로고를 포인터가 닿기 전까지 흐리게 합니다.
tags:
  - 'Style your elements'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: '스타일 패널에서 요소 모양 변경'
      description: |-
        한 페이지의 한 요소에만 고유한 모양이 필요할 때 스타일 패널을 사용합니다. 색상이 있는 카드, 흐려진 로고, 캠페인 색상의 버튼이 예시입니다. 변경할 때마다 페이지에서 바로 확인할 수 있습니다. 모든 버튼의 색상처럼 모든 페이지가 공유해야 하는 모양은 대신 테마를 변경합니다. 테마에서 한 번 편집하면 사이트 전체가 업데이트됩니다.
        동영상에서는 아래의 첫 번째 실전 방법에 따라 파트너 로고를 포인터가 닿기 전까지 흐리게 합니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:03:59+0000'
      dateModified: '2026-10-24T17:19:22+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/element-settings/style-tab'
      articleSection: '요소 스타일 지정'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/element-settings/style-tab'
      description: |-
        한 페이지의 한 요소에만 고유한 모양이 필요할 때 스타일 패널을 사용합니다. 색상이 있는 카드, 흐려진 로고, 캠페인 색상의 버튼이 예시입니다. 변경할 때마다 페이지에서 바로 확인할 수 있습니다. 모든 버튼의 색상처럼 모든 페이지가 공유해야 하는 모양은 대신 테마를 변경합니다. 테마에서 한 번 편집하면 사이트 전체가 업데이트됩니다.
        동영상에서는 아래의 첫 번째 실전 방법에 따라 파트너 로고를 포인터가 닿기 전까지 흐리게 합니다.
      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/build) /[요소 스타일 지정](/ko/hc/documentation/learn-dxpr-builder/element-settings) # 스타일 패널에서 요소 모양 변경.

 DXPR Builder 배우기페이지 만들기요소 스타일 지정

   ## 이 가이드의 내용

 관련 가이드

- [콘텐츠 뒤에 색상이나 사진 배치](/ko/hc/documentation/learn-dxpr-builder/element-settings/background)

한 페이지의 한 요소에만 고유한 모양이 필요할 때 **스타일** 패널을 사용합니다. 색상이 있는 카드, 흐려진 로고, 캠페인 색상의 버튼이 예시입니다. 변경할 때마다 페이지에서 바로 확인할 수 있습니다. 모든 버튼의 색상처럼 모든 페이지가 공유해야 하는 모양은 대신 테마를 변경합니다. 테마에서 한 번 편집하면 사이트 전체가 업데이트됩니다.

동영상에서는 아래의 첫 번째 실전 방법에 따라 파트너 로고를 포인터가 닿기 전까지 흐리게 합니다.

  ## 시작하기 전에

- DXPR Builder에서 페이지를 엽니다. 요소를 가리키면 **더보기**가 있는 컨트롤 바가 표시됩니다. 빌더가 처음인가요? [첫 페이지](/ko/hc/documentation/learn-dxpr-builder/getting-started/first-page)를 참조하세요.
- **저장**(대화상자)은 변경 사항을 에디터에 유지합니다. 콘텐츠 위 빌더 툴바의 **저장**은 페이지를 저장하고 “Saved field”를 표시합니다.

패널 **스타일**의 설정은 하나의 요소에 속합니다. 테마가 아니라 해당 페이지의 콘텐츠에 저장됩니다. 내년에 브랜드 색상이 바뀌면 직접 색칠한 모든 요소는 편집하기 전까지 이전 색상을 유지합니다.

- **모양 재사용**은 스타일이 적용된 요소를 **더보기** > **템플릿으로 저장**으로 저장하거나 **HTML 클래스**에서 요소에 공유 클래스를 지정합니다. [사용자 템플릿](/ko/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)과 [HTML ID와 클래스](/ko/hc/documentation/learn-dxpr-builder/element-settings/custom-css)를 참조하세요.
- **견본에서 색상을 선택**합니다. 사이트에 견본이 표시될 때 사용합니다. 견본은 테마의 색상 팔레트에서 가져옵니다. 견본은 색상을 복사하므로 나중에 팔레트가 바뀌어도 업데이트되지 않습니다.

## 실전: 포인터가 닿을 때까지 로고 흐리게 하기

파트너 로고 행은 로고가 흐리면 더 차분해 보입니다. 이 실전 방법에서는 로고 하나를 흐리게 했다가 마우스를 올리면 원래대로 되돌립니다.

1. 로고가 표시된 **이미지** 요소에 마우스를 올리고 **더보기**, **설정**을 차례로 클릭합니다.
2. 패널 **스타일**을 열고 **불투명도**를 0.5로 드래그합니다. 드래그하면 로고가 흐려집니다.
3. 아래의 **호버 스타일** 패널을 열고 **불투명도**를 1로 드래그합니다.
4. 대화상자에서 **저장**을 클릭한 뒤 툴바에서 **저장**을 클릭합니다.
5. 빌더 툴바에서 보기 메뉴(눈 모양 아이콘)를 열고 **미리보기**를 선택한 뒤 로고를 가리킵니다. 로고가 원래대로 돌아왔다가 포인터가 떠나면 다시 흐려집니다.

행의 각 로고에 대해 단계를 반복합니다.

## 실전: 캠페인 색상의 버튼

테마는 버튼에 호버 색상을 지정합니다. 직접 설정한 **배경**은 해당 호버 색상도 대체하므로 두 가지를 모두 설정합니다.

1. 대상 **버튼** 요소에 마우스를 올리고 **더보기**, **설정**을 차례로 클릭합니다.
2. 패널 **스타일**에서 **배경**과 **글꼴 색상**을 선택합니다. 견본을 클릭하거나 색상 필드에 #e4002b 같은 색상 코드를 입력합니다.
3. 패널 **호버 스타일**에서 더 어두운 **배경**을 선택합니다.
4. 대화상자에서 **저장**을 클릭한 뒤 툴바에서 **저장**을 클릭합니다.
5. 보기 메뉴에서 **미리보기**를 선택하고 버튼을 가리킵니다. 버튼이 더 어두운 색상으로 바뀝니다.

## 표시 내용

대화상자가 열려 있는 동안 요소에 각 변경 사항이 표시됩니다. **미리보기**에서는 흐려진 로고가 포인터 아래에서 원래대로 돌아오고 캠페인 버튼이 더 어두운 색상으로 바뀝니다. 툴바의 **저장**으로 저장했으므로 두 가지 모양 모두 페이지를 다시 로드해도 유지됩니다.

## 각 컨트롤의 입력 값

| 컨트롤 | 범위 | 단위 |
|---|---|---|
| **글꼴 색상**, **테두리 색상**, **배경** | 투명도를 포함한 모든 색상 | 색상 |
| **배경 이미지** | 미디어 라이브러리의 사진 또는 URL |  |
| **배경 스타일**, **배경 위치**, **테두리 스타일** | 목록은 **테마 기본값부터 시작** |  |
| **글꼴 크기** | 0~100 | px |
| **테두리 반경** | 0~100 | px |
| **불투명도** | 0~1(0.01 단위) |  |
| **드롭 섀도우** | 0~5단계 |  |
| 박스 모델 **바깥 여백** | -200~200 | **PX** 또는 **%** |
| 박스 모델 **안쪽 여백** | 0~200 | **PX** 또는 **%** |
| 박스 모델 **테두리** | 0~50 | px |
| 박스 모델 너비 × 높이 | 0~2000 | **PX** 또는 **%** |

범위를 벗어난 입력값은 가장 가까운 한계값으로 잘립니다. 박스 모델과 잠금에 대한 설명은 [간격](/ko/hc/documentation/learn-dxpr-builder/element-settings/spacing) 페이지에 있습니다.

## 설정의 동작 방식

### 테마 기본값

비어 있는 색상, 0에 있는 슬라이더, **테마 기본값**으로 설정된 목록, “-”로 표시되는 박스 모델 면은 모두 같은 의미입니다. DXPR Builder는 아무것도 기록하지 않으며 테마가 결정합니다. 따라서 **불투명도** 0은 요소를 숨기지 않으며, **글꼴 크기** 0은 테마 크기를 유지합니다. 테마 모양으로 되돌리려면 색상 선택 도구에서 **지우기**를 클릭하거나 슬라이더를 0으로 이동하거나 **테마 기본값**을 다시 선택합니다.

### 설정의 저장 위치

각 **스타일** 설정은 **드롭 섀도우**를 제외하고 요소의 인라인 스타일로 저장됩니다. 인라인 스타일이 일반 테마 CSS보다 우선합니다. 그래도 우선하는 두 가지가 있습니다. `!important`로 표시된 테마 규칙, 그리고 **HTML 클래스**의 Bootstrap 유틸리티 클래스입니다. 해당 클래스도 `!important`를 함께 사용합니다.

일부 요소에서는 설정이 내부 부분에 적용됩니다. **버튼**에서는 버튼 자체에, **이미지**에서는 사진에, **링크**에서는 링크에, **지도**에서는 지도 프레임에 스타일이 적용됩니다.

### 모든 화면 크기

스타일 설정에는 중단점이 없습니다. 64px의 안쪽 여백은 휴대폰에서도 64px입니다. 백분율 값은 페이지 너비에 따라 커지고 작아집니다. 화면 크기별로 다른 값을 사용하려면 [HTML ID와 클래스](/ko/hc/documentation/learn-dxpr-builder/element-settings/custom-css) 페이지에 설명된 대로 반응형 클래스를 사용합니다.

### 불투명도는 안의 모든 것을 흐리게 함

**불투명도**는 요소 전체에 적용됩니다. 상자, 테두리, 텍스트, 안의 모든 요소가 흐려집니다. 단단한 텍스트 뒤에 투명한 상자를 만들려면 **불투명도**를 0으로 둡니다. 대신 투명도가 있는 **배경** 색상을 선택합니다. 색상 선택 도구에는 해당 용도의 불투명도 슬라이더가 별도로 있습니다.

### 호버 스타일

**호버 스타일**은 **스타일** 아래의 별도 패널입니다. 자체 박스 모델을 포함하여 같은 컨트롤이 있습니다. 값은 포인터가 요소 위에 있을 때 적용됩니다. **스타일** 값과 달리 자체적으로 `!important`로 표시되므로 **스타일** 값, **HTML 클래스**의 유틸리티 클래스, 대부분의 테마 규칙보다 우선합니다.

오직 **드롭 섀도우**만 0.15초에 걸쳐 서서히 나타납니다. 다른 호버 변경 사항은 테마에서 애니메이션을 적용하지 않는 한 즉시 전환됩니다. Bootstrap 버튼은 0.15초에 걸쳐 색상이 서서히 바뀝니다.

휴대폰과 태블릿에는 포인터가 없습니다. 해당 방문자에게는 탭한 뒤에만 호버 모양이 표시되므로 필요한 정보를 호버 모양에 넣지 마세요.

### 자체 설정이 있는 요소

일부 요소에는 같은 작업을 위한 자체 설정이 있습니다. 자체 설정이 우선하며 **스타일** 컨트롤은 작동하지 않습니다.

| 요소 | 스타일에서 무시됨 | 대체 설정 |
|---|---|---|
| 서클 카운터 | **배경**, **글꼴 크기**, 너비 × 높이 | **일반**의 **배경색**과 **크기**, **서클 콘텐츠**의 **글꼴 크기** |
| 진행률 표시줄 | **배경**, 너비 × 높이 | **일반**의 **배경색**, **전경색**, **막대 높이** |
| 구분선 | **배경**, 너비 | **일반**의 **색상**과 **길이** |
| 숫자 카운터 | **글꼴 크기** | **일반**의 **글꼴 크기** |
| 이미지 | 너비 × 높이 | **일반**의 **이미지 너비**와 **이미지 높이** |
| 지도 | 너비 × 높이 | **일반**의 **지도 너비**와 **지도 높이** |
| 마퀴 | 너비 × 높이 | **일반**의 **이미지 너비**와 **높이** |
| 동영상, 로컬 동영상 | 너비 | **일반**의 **동영상 너비** |
| 위치 지정 레이어 | 너비 × 높이 | **일반**의 **너비**와 **높이** |

## 변경 사항이 표시되지 않는 경우

- **대화상자를 닫자 변경 사항이 사라졌습니다.** 닫을 때 **취소**, 닫기 아이콘, Esc 키를 사용했으므로 이전 설정으로 되돌아갔습니다. 다시 변경하고 대화상자에서 **저장**을 클릭합니다.
- **페이지를 다시 로드하자 변경 사항이 사라졌습니다.** **대화상자의 저장**은 변경 사항을 에디터에만 유지합니다. 페이지를 떠나기 전에 툴바에서 **저장**을 클릭합니다.
- **테마 모양이 그대로 유지됩니다.** 다음과 같은 **HTML 클래스**의 Bootstrap 유틸리티 클래스나 `!important`가 있는 테마 규칙이 우선합니다. **일반** 패널을 열고 클래스 칩(예: **Primary background**)을 제거하거나 테마 규칙에 대해 웹마스터에게 문의합니다.
- **컨트롤이 전혀 작동하지 않습니다.** 일부 요소에는 같은 작업을 위한 자체 설정이 있습니다. [자체 설정이 있는 요소](#elements-with-their-own-settings)를 참조하세요.
- **버튼이 호버 시 더 이상 색상이 바뀌지 않습니다.** 설정한 **배경**이 테마의 호버 색상을 대체했습니다. **호버 스타일** 패널에도 **배경**을 설정합니다.
- **상자와 함께 텍스트도 흐려졌습니다.** **불투명도**는 요소 전체를 흐리게 합니다. 0으로 되돌리고 투명도가 있는 **배경** 색상을 사용합니다.
- **불투명도 0은 요소를 숨기지 않습니다.** 0은 **테마 기본값**을 의미합니다. 대신 **HTML 클래스**에서 **요소 숨기기(d-none)** 클래스를 추가합니다.

## 다음 단계

- [배경](/ko/hc/documentation/learn-dxpr-builder/element-settings/background): 제목 뒤에 사진을 배치하고 제목을 읽기 쉽게 유지합니다.