--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/button-styles' title: '버튼 스타일 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:37:30+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 각 버튼의 크기를 정하세요. 가장 원하는단일 동작은 단색 버튼으로, 옆의 대안은 경쟁하지 않는 외곽선 버튼으로 표시합니다. 이 페이지에서는 이러한 쌍의 스타일 지정 방법과 각 설정의 변경 내용을 보여줍니다. 버튼을 추가하고 링크를 설정하려면 Adding a Button 문서를 참고하세요. 동영상에서는 아래 단계를 따릅니다. Apply now를 주 버튼으로 만들고 외곽선 두 번째 버튼을 추가합니다. tags: - 'Design guides' 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: |- 각 버튼의 크기를 정하세요. 가장 원하는단일 동작은 단색 버튼으로, 옆의 대안은 경쟁하지 않는 외곽선 버튼으로 표시합니다. 이 페이지에서는 이러한 쌍의 스타일 지정 방법과 각 설정의 변경 내용을 보여줍니다. 버튼을 추가하고 링크를 설정하려면 Adding a Button 문서를 참고하세요. 동영상에서는 아래 단계를 따릅니다. Apply now를 주 버튼으로 만들고 외곽선 두 번째 버튼을 추가합니다. 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:30+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/design/button-styles' articleSection: '디자인 가이드' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/button-styles' description: |- 각 버튼의 크기를 정하세요. 가장 원하는단일 동작은 단색 버튼으로, 옆의 대안은 경쟁하지 않는 외곽선 버튼으로 표시합니다. 이 페이지에서는 이러한 쌍의 스타일 지정 방법과 각 설정의 변경 내용을 보여줍니다. 버튼을 추가하고 링크를 설정하려면 Adding a Button 문서를 참고하세요. 동영상에서는 아래 단계를 따릅니다. Apply now를 주 버튼으로 만들고 외곽선 두 번째 버튼을 추가합니다. 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) /[디자인 가이드](/ko/hc/documentation/learn-dxpr-builder/design/overview) # 버튼 스타일. DXPR Builder 배우기페이지 만들기요소 스타일 지정디자인 가이드 ## 이 가이드의 내용 관련 가이드 - [버튼 추가](/ko/hc/documentation/learn-dxpr-builder/elements/button) - [요소에 마우스를 올리면 반응하게 만들기](/ko/hc/documentation/learn-dxpr-builder/design/hover-effects) - [브랜드 색상 사용](/ko/hc/documentation/learn-dxpr-builder/design/colour-and-branding) 각 버튼의 크기를 정하세요. 가장 원하는단일 동작은 단색 버튼으로, 옆의 대안은 경쟁하지 않는 외곽선 버튼으로 표시합니다. 이 페이지에서는 이러한 쌍의 스타일 지정 방법과 각 설정의 변경 내용을 보여줍니다. 버튼을 추가하고 링크를 설정하려면 [Adding a Button](/ko/hc/documentation/learn-dxpr-builder/elements/button) 문서를 참고하세요. 동영상에서는 아래 단계를 따릅니다. Apply now를 주 버튼으로 만들고 외곽선 두 번째 버튼을 추가합니다. ## 주 버튼과 보조 버튼 스타일 지정 페이지의 버튼에서 시작하세요. 예: **Apply now**. 1. 버튼을 가리키고 **More > Settings**(을)를 여세요. 2. 다음을 설정하세요: **Type**(을)를 **Primary**(으)로. 3. 다음을 설정하세요: **Size**(을)를 **Large**(으)로. **Save**(을)를 클릭하세요. 4. 버튼을 다시 가리키고 **More > Clone**(을)를 여세요. 원본 바로 아래에 복사본이 나타납니다. 5. 복사본에서 **More > Settings**(을)를 여세요. **Title**(을)를 바꾸세요. 예: `Download brochure`. **Link**도 바꾸세요. 6. 다음을 켜세요: **Outline style**. **Save**(을)를 클릭하세요. 7. 툴바에서 **Save**(을)를 클릭하세요. ## 동작별 스타일 선택 | 동작 | 스타일 | 예시 | |---|---|---| | 가장 원하는단일 동작 | 단색 **Primary** | Apply now | | 대안 | **Outline style** + 동일 **Type** | Download brochure | | 사소한 동작 | **Link**(텍스트 링크 형태) | Read the terms | | 경고 또는 마지막 단계 | **Danger** 또는 **Warning** | Cancel my booking | 섹션당 단색 버튼 하나를 사용하여 방문자가 클릭 위치를 한 번에 알 수 있게 하세요. 동작을 말하는 레이블을 쓰세요. “Click here” 대신 “Get started”, “Submit” 대신 “Send message”. ## 표시되는 내용 열에 큰 버튼 둘이 쌓입니다. 테마의 기본 색상 단색 버튼 하나, 같은 색상의 테두리와 텍스트 외곽선 버튼 하나입니다. 단색 버튼이 먼저 눈에 들어옵니다. 편집 중에는 링크가 열리지 않습니다. 테스트하려면 페이지를 저장하고 뷰 메뉴(눈 아이콘)를 연 뒤 **Preview**(을)를 고르세요. ## 설정 | 설정 | 기능 | 기본값 | |---|---|---| | **Type** | 색상 스타일: **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger**, **Link**, **Light**, **Dark**. 색상은 테마에서 가져옵니다. | **Primary** | | **Outline style** | 채우기 없는 색상 테두리와 텍스트 | 꺼짐 | | **Size** | **Normal**, **Large**, **Small** | **Normal** | | **Block button** | 열 전체 너비로 버튼 늘이기 | 꺼짐 | | **Link target** | **Same window** 또는 **New window**. **Link**에 값이 있을 때 표시됩니다. | **Same window** | 테마 제작자용: 각 **Type**(은)는 Bootstrap 클래스 `btn-`(을)를 추가합니다. 예: `btn-primary`. **Outline style**이 켜지면 `btn-outline-`(이)가 되며, **Link**(은)는 항상 `btn-link`(으)로 유지됩니다. **Large**(은)는 `btn-lg`(을)를, **Small**(은)는 `btn-sm`(을)를, **Block button**(은)는 `btn-block`(을)를 추가합니다. ## 스타일이 표시되지 않는 경우 - **외곽선 버튼에 테두리가 없습니다.** **Type**(이)가 **Link**입니다. 항상 텍스트 링크처럼 보이므로 **Outline style**(은)는 효과가 없습니다. 외곽선 버튼에는 다른 **Type**(을)를 고르세요. - **버튼이 거의 보이지 않습니다.** **Light**(이)가 흰색에 가까워 흰색 섹션에 묻힙니다. 더 어두운 **Type**(을)를 고르거나 섹션에 배경색을 주세요. - **링크가 같은 탭에서 열립니다.** **Link target**(이)가 **Same window**이며, **Link**에 값이 있을 때만 표시됩니다. 먼저 **Link**(을)를 입력한 뒤 **New window**(을)를 고르세요. ## 다음 단계 - [Adding a Button](/ko/hc/documentation/learn-dxpr-builder/elements/button): 동영상과 함께 모든 버튼 설정을 다룹니다. - [Hover effects](/ko/hc/documentation/learn-dxpr-builder/design/hover-effects): 포인터가 닿으면 버튼을 어둡게 하거나 그림자를 추가합니다. - [Colour and branding](/ko/hc/documentation/learn-dxpr-builder/design/colour-and-branding): 버튼 색상을 브랜드에 맞춥니다.