--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/card-styles' title: '카드 스타일 지정 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:37:33+00:00' updated: '2026-10-24T06:23:23+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 카드에 사이트에 어울리는 모습을 주세요. 카드의 Type에서 색상 구성을, Style 패널에서 둥근 모서리와 그림자를 가져옵니다. 마지막에는 기능, 팀원, 가격용으로 한 줄에 반복 배치할 수 있는 카드가 완성됩니다. 먼저 페이지에 카드를 배치하려면 카드 추가(을)를 보세요. 이 비디오는 아래 단계를 따릅니다. 카드에 밝은 모습, 둥근 모서리, 부드러운 그림자를 적용합니다. tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T06:23:23+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: '카드 스타일 지정' description: |- 카드에 사이트에 어울리는 모습을 주세요. 카드의 Type에서 색상 구성을, Style 패널에서 둥근 모서리와 그림자를 가져옵니다. 마지막에는 기능, 팀원, 가격용으로 한 줄에 반복 배치할 수 있는 카드가 완성됩니다. 먼저 페이지에 카드를 배치하려면 카드 추가(을)를 보세요. 이 비디오는 아래 단계를 따릅니다. 카드에 밝은 모습, 둥근 모서리, 부드러운 그림자를 적용합니다. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T01:37:33+0000' dateModified: '2026-10-24T06:23:23+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/design/card-styles' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/card-styles' description: |- 카드에 사이트에 어울리는 모습을 주세요. 카드의 Type에서 색상 구성을, Style 패널에서 둥근 모서리와 그림자를 가져옵니다. 마지막에는 기능, 팀원, 가격용으로 한 줄에 반복 배치할 수 있는 카드가 완성됩니다. 먼저 페이지에 카드를 배치하려면 카드 추가(을)를 보세요. 이 비디오는 아래 단계를 따릅니다. 카드에 밝은 모습, 둥근 모서리, 부드러운 그림자를 적용합니다. 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) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # 카드 스타일 지정. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [Card](/hc/documentation/learn-dxpr-builder/elements/card) - [요소에 마우스를 올리면 반응하게 만들기](/ko/hc/documentation/learn-dxpr-builder/design/hover-effects) - [브랜드 색상 사용](/ko/hc/documentation/learn-dxpr-builder/design/colour-and-branding) 카드에 사이트에 어울리는 모습을 주세요. 카드의 **Type**에서 색상 구성을, **Style** 패널에서 둥근 모서리와 그림자를 가져옵니다. 마지막에는 기능, 팀원, 가격용으로 한 줄에 반복 배치할 수 있는 카드가 완성됩니다. 먼저 페이지에 카드를 배치하려면 [카드 추가](/hc/documentation/learn-dxpr-builder/elements/card)(을)를 보세요. 이 비디오는 아래 단계를 따릅니다. 카드에 밝은 모습, 둥근 모서리, 부드러운 그림자를 적용합니다. ## 카드 스타일 지정 1. 카드에 마우스를 올리고 **More**(을)를 연 뒤 **Settings**(을)를 고르세요. 2. 다음에서 고르세요: **Type** 아래 **Light**. 3. 다음 패널을 여세요: **Style**. 4. 다음을 설정하세요: **Border radius**을 8로. 5. 다음을 설정하세요: **Drop shadow**를 2로. 6. 다음을 클릭하세요: **Save**. ## 결과 화면 카드에는 밝은 배경, 둥근 모서리, 부드러운 그림자가 적용됩니다. **Header** 막대가 맨 위에 있고 **Title**(이)가 본문을 열며, 안에 추가한 요소들이 아래에 이어집니다. 카드 전체를 물들이는 것은 **Type**입니다. 헤더만이 아닙니다. **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger** 및 **Dark**(은)는 카드를 해당 테마 색상으로 채우고 텍스트를 흰색으로 만듭니다. **Light**(은)는 일반 텍스트와 함께 밝은 배경을 줍니다. **Default**(은)는 카드를 테마에 맡깁니다. ## 설정 | 설정 | 위치 | 기능 | |---|---|---| | **Header** | **General** | 카드 맨 위 막대의 텍스트. 막대를 없애려면 비워 두세요 | | **Title** | **General** | 카드 본문 맨 위의 제목 | | **Type** | **General** | 카드 전체의 색상 구성. 기본값은 **Default** | | **Background**, **Font color** | **Style** | 직접 고른 색상. 조건: **Type**이 **Default** | | **Border radius** | **Style** | 둥근 모서리(픽셀 단위) | | **Drop shadow** | **Style** | 입체감(1부터 5까지) | | **Border** (box model), **Border style**, **Border color** | **Style** | 한 면 이상의 테두리 | ## 카드 패턴 - **Flat card**: **Border style** **Solid**, 밝은 **Border color**, **Border radius** 4, 그림자 없음. - **Elevated card**: **Drop shadow** 2, **Border style** **None**, **Border radius** 8. - **Highlighted card**: 박스 모델에서 **Border**의 왼쪽을 4로 설정하고, **Border style** **Solid**와 강조 **Border color**(을)를 쓰세요. - **Card that lifts**: **Drop shadow** 1(**Style**에서)과 **Hover style**에서 4. [요소에 마우스를 올리면 반응하게 만들기](/ko/hc/documentation/learn-dxpr-builder/design/hover-effects)(을)를 보세요. ## 한 줄의 카드 기능 카드, 팀원, 가격 그리드용: 1. 행을 추가하고 세 칸 또는 네 칸이 같은 레이아웃을 고르세요. 2. 각 칸에 카드를 추가하고 모든 카드에 같은 **Type** 및 **Style** 값을 주세요. 3. 행의 **More** 메뉴를 열고 **Settings**(을)를 고른 뒤 **Equal-height columns**(을)를 켜세요. 칸이 정렬되지만 각 카드는 내용만큼의 높이를 유지합니다. 각 카드의 텍스트를 비슷한 길이로 유지하세요. 카드가 같은 높이에서 끝납니다. 가격표에서는 다른 **Type**이나 더 깊은 **Drop shadow**(으)로 추천 요금제를 강조하세요. ## 스타일이 보이지 않는 경우 - **Style 패널의 Background 또는 Font color가 적용되지 않습니다.** 카드 **Type**(이)가 **Default**(이)가 아니면 **Style** 패널보다 우선하는 테마 클래스로 카드 색상을 정합니다. **Type**(을)를 **Default**(으)로 설정하고 직접 색상을 고르세요. - **색상 카드의 흰색 텍스트가 읽기 어렵습니다.** 많은 테마의 **Warning** 및 **Info** 색상은 옅으며, 이런 유형은 항상 흰색 텍스트를 씁니다. 더 어두운 **Type**이나 일반 텍스트 색상을 유지하는 **Light**(을)를 고르세요. - **그림자가 표시되지 않습니다.** **Drop shadow**(이)가 0이면 그림자가 없다는 뜻입니다. 1 이상으로 설정하세요. ## 다음 단계 - [카드 추가](/hc/documentation/learn-dxpr-builder/elements/card): 카드를 추가하고 요소로 채우세요. - [요소에 마우스를 올리면 반응하게 만들기](/ko/hc/documentation/learn-dxpr-builder/design/hover-effects): 방문자가 가리키면 카드가 들썩이게 하세요. - [브랜드 색상 사용](/ko/hc/documentation/learn-dxpr-builder/design/colour-and-branding): 카드 색상을 사이트 전체와 맞추세요.