--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/element-settings/borders-shadows' title: '테두리, 둥근 모서리, 그림자 추가 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:05:40+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:05:40+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/borders-shadows' articleSection: '요소 스타일 지정' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/element-settings/borders-shadows' 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/spacing) 카드에 프레임을 두르거나 사진 모서리를 둥글게 하거나 그림자로 상자를 페이지에서 들어 올립니다. 이 모든 설정은 요소의 **스타일** 패널에서 하며 **호버 스타일** 패널에서 호버 시 변경할 수 있습니다. 카드 하나를 돋보이게 할 때 사용합니다. 일련의 카드 전체에 같은 프레임을 적용하려면 공유 클래스로 통일합니다. 동영상은 아래 레시피를 따릅니다. 텍스트 블록을 테두리, 둥근 모서리, 호버 시 깊어지는 그림자가 있는 카드로 바꿉니다. ## 시작하기 전에 - DXPR Builder에서 페이지를 엽니다. 요소를 가리키면 **더보기**가 있는 컨트롤 바가 표시됩니다. 빌더가 처음이면 [첫 페이지](/ko/hc/documentation/learn-dxpr-builder/getting-started/first-page)를 참조하세요. - **저장**을 대화상자에서 클릭하면 변경이 에디터에 유지됩니다. 콘텐츠 위 빌더 툴바에서 **저장**을 클릭하면 페이지가 저장되고 "Saved field"가 표시됩니다. - **하나만 강조합니다.** 테두리나 그림자는 주요 날짜, 제안, 인용문으로 시선을 끕니다. 모든 곳에 적용하면 효과가 사라집니다. - **일련의 카드를 통일합니다.** 여러 카드에 같은 프레임을 적용하려면 카드 하나를 템플릿으로 저장하거나 공유 클래스를 사용합니다. [HTML ID와 클래스](/ko/hc/documentation/learn-dxpr-builder/element-settings/custom-css)를 참조하세요. - **그림자 조정은 테마에 맡깁니다.** 다섯 가지 **드롭 섀도우** 레벨은 사이트 전체에 한 번만 정의됩니다. 테마에서 레벨의 스타일을 다시 지정하면 해당 레벨을 사용하는 모든 요소에 적용됩니다. ## 레시피: 강조 카드 브랜드 색상의 얇은 테두리가 있는 부드러운 상자가 완성됩니다. 둥근 모서리와 호버 시 커지는 그림자가 있습니다. 1. 다음 **텍스트** 요소를 가리키고 **더보기**를 클릭한 뒤 **설정**을 엽니다. 2. 다음 **스타일** 패널을 엽니다. 박스 모델은 위쪽에 있습니다. 잠금 장치는 열린 상태로 시작하므로 **안쪽 여백** 옆의 잠금 장치를 클릭하여 닫으면 네 쪽이 함께 움직입니다. 3. 다음 **안쪽 여백**의 위쪽을 클릭하고 32를 입력한 뒤 Enter를 누릅니다. 네 쪽 모두 32px로 표시됩니다. 4. 연한 **배경** 색상을 선택합니다. 예를 들어 옅은 회색입니다. 5. 다음 **테두리 스타일**을 **실선**으로 설정합니다. 6. 다음 **테두리** 옆의 잠금 장치를 닫은 뒤 한쪽을 클릭하고 1을 입력한 뒤 Enter를 누릅니다. 7. 다음 **테두리 색상**을 선택하고 **테두리 반경**을 16으로, **드롭 섀도우**를 3으로 설정합니다. 8. 다음 **호버 스타일** 패널을 열고 **드롭 섀도우**를 5로 설정합니다. 9. 대화상자에서 **저장**을 클릭한 뒤 툴바에서 **저장**을 클릭합니다. 10. 보기 메뉴(눈 아이콘)에서 **미리보기**를 선택하고 카드를 가리킵니다. 그림자가 깊어집니다. ## 표시 내용 카드에는 사용자 색상의 얇은 테두리, 둥근 모서리, 아래쪽의 부드러운 그림자가 있습니다. **미리보기**에서는 포인터가 카드 위에 있는 동안 그림자가 깊어졌다가 벗어나면 원래대로 돌아옵니다. ## 테두리의 구성 테두리에는 세 가지 설정이 필요하며 패널에 분산되어 있습니다. 세 가지를 모두 설정합니다. 1. **테두리 스타일**은 선을 선택합니다. **실선**, **점선**, **파선**입니다. **테마 기본값**에서는 대부분 요소에 테두리가 전혀 없습니다. **없음**은 테마가 그리는 테두리를 제거합니다. 2. 박스 모델의 **테두리** 링은 각 쪽의 너비를 0~50px로 설정합니다. 비워 두면 브라우저가 약 3px의 자체 너비를 사용합니다. 3. **테두리 색상**은 색상을 설정합니다. 비워 두면 테두리가 텍스트 색상을 사용합니다. **테두리 반경**은 네 모서리를 0~100px로 둥글게 합니다. 배경과 그림자도 함께 둥글어집니다. **이미지**에서는 사진 자체가 둥글어집니다. 원을 만들려면 요소를 정사각형으로 만듭니다. 그런 다음 **테두리 반경**을 너비의 절반 픽셀 값으로 설정합니다. 너비 200px 요소에는 100입니다. 더 넓은 요소에는 **HTML 클래스**에서 **원형(50% 반경)** 클래스를 추가합니다. **이미지**에서는 이 클래스가 사진이 아니라 사진 주변 프레임을 둥글게 하므로 해당 위치에서는 **테두리 반경**을 사용합니다. ## 드롭 섀도우 레벨 | 레벨 | 요소 아래 그림자 | |---|---| | 0 | DXPR Builder 없음. 테마가 결정 | | 1 | 아래쪽 2px, 흐림 7px, 20% 검정 | | 2 | 아래쪽 4px, 흐림 12px, 30% 검정 | | 3 | 아래쪽 5px, 흐림 25px, 30% 검정 | | 4 | 아래쪽 8px, 흐림 38px, 30% 검정 | | 5 | 아래쪽 12px, 흐림 57px, 30% 검정 | 이것이 기본 레벨입니다. 각 레벨은 페이지에 저장되는 값이 아니라 공유 스타일이므로 테마에서 사이트 전체의 레벨을 재조정할 수 있습니다. 테마 개발자 참고: 레벨은 CSS 변수 `--dxb-box-shadow-1`부터 `--dxb-box-shadow-5`입니다. 다음 **호버 스타일** 패널에서 **드롭 섀도우**는 포인터가 요소 위에 있는 동안의 레벨을 설정합니다. 새 그림자는 0.15초에 걸쳐 서서히 나타납니다. 호버 시 더 높은 레벨은 카드가 들려 보이는 효과를 줍니다. **HTML 클래스**에서 더 많은 모양을 제공합니다. **들어 올린 드롭 섀도우**, **올린 드롭 섀도우**, **3D 그림자**, **곡선 수평 드롭 섀도우**입니다. Bootstrap의 **작은 그림자**, **기본 그림자**, **큰 그림자**도 있습니다. 요소마다 그림자 하나를 사용합니다. Bootstrap 그림자 클래스는 **드롭 섀도우** 슬라이더보다 우선합니다. ## 설정한 테두리, 모서리, 그림자가 표시되지 않는 경우 - **테두리가 표시되지 않습니다.** **테두리 스타일**이 **테마 기본값** 또는 **없음**에 있습니다. **실선**, **점선**, **파선** 중 하나를 선택합니다. - **테두리가 원하는 것보다 두껍습니다.** 너비가 설정되지 않아 브라우저가 약 3px를 사용합니다. 박스 모델에서 **테두리** 쪽을 설정합니다. - **테두리 색상이 잘못되었습니다.** 비어 있는 **테두리 색상**은 텍스트 색상을 사용합니다. **테두리 색상**을 선택합니다. - **모서리가 각진 채로 있습니다.** **HTML 클래스**의 **둥근 모서리 없음(rounded-0)** 같은 클래스나 `!important`가 있는 테마 규칙이 우선합니다. 해당 칩을 제거하거나 테마 규칙을 웹마스터에게 문의합니다. - **모서리는 둥글어지지만 원이 되지 않습니다.** 슬라이더는 100px에서 멈춥니다. **원형(50% 반경)** 클래스를 사용합니다. - **드롭 섀도우를 변경해도 바뀌지 않습니다.** **HTML 클래스**의 **큰 그림자** 같은 Bootstrap 그림자 클래스가 우선합니다. 해당 칩을 제거합니다. 레벨 1은 희미하므로 테스트용으로 레벨 3을 사용해 봅니다. - **호버 시 그림자가 커지지 않습니다.** **스타일**이 아니라 **호버 스타일** 패널에서 **드롭 섀도우**를 설정하고 기본 상태보다 높은 레벨을 선택합니다. - **한쪽만 바뀌었습니다.** **안쪽 여백** 또는 **테두리** 옆의 잠금 장치가 열려 있었습니다. 닫고 값을 다시 입력합니다. - **휴대폰에서는 호버 그림자가 표시되지 않습니다.** 터치 화면에는 포인터가 없으므로 탭한 뒤에만 호버 모양이 표시됩니다. ## 다음 단계 - [간격](/ko/hc/documentation/learn-dxpr-builder/element-settings/spacing). 테두리 안에서 콘텐츠에 여유를 줍니다.