--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/migration/from-paragraphs' title: '호버에 반응하게 만들기 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:57:04+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 방문자가 가리키면 요소가 변하게 합니다. 떠오르는 상자, 어두워지는 버튼, 밝아지는 사진이 그 예입니다. 평소 모습은 Style 패널에서, 호버 모습은 쌍둥이인 Hover style 패널에서 정합니다. 예제에서는 호버 시 떠오르는 회색 텍스트 상자를 만듭니다. 동영상에서는 텍스트 상자에 배경, 안쪽 여백, 그림자를 주고 호버 시 그림자를 깊게 합니다. tags: - 'Verhuizen vanaf een andere builder' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: '호버에 반응하게 만들기' description: |- 방문자가 가리키면 요소가 변하게 합니다. 떠오르는 상자, 어두워지는 버튼, 밝아지는 사진이 그 예입니다. 평소 모습은 Style 패널에서, 호버 모습은 쌍둥이인 Hover style 패널에서 정합니다. 예제에서는 호버 시 떠오르는 회색 텍스트 상자를 만듭니다. 동영상에서는 텍스트 상자에 배경, 안쪽 여백, 그림자를 주고 호버 시 그림자를 깊게 합니다. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:57:04+0000' dateModified: '2026-10-24T09:09:48+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/migration/from-paragraphs' articleSection: 'Verhuizen vanaf een andere builder' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/migration/from-paragraphs' description: |- 방문자가 가리키면 요소가 변하게 합니다. 떠오르는 상자, 어두워지는 버튼, 밝아지는 사진이 그 예입니다. 평소 모습은 Style 패널에서, 호버 모습은 쌍둥이인 Hover 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) /[Start here](/hc/documentation/learn-dxpr-builder/start-here) /[Verhuizen vanaf een andere builder](/hc/documentation/learn-dxpr-builder/migration) # 호버에 반응하게 만들기. Learn DXPR BuilderStart hereVerhuizen vanaf een andere builder ## In this guide Related guides - [휴대전화에 맞게 레이아웃 조정하기](/ko/hc/documentation/learn-dxpr-builder/migration/from-layout-builder) - [Element picker](/hc/documentation/learn-dxpr-builder/editing/element-picker) 방문자가 가리키면 요소가 변하게 합니다. 떠오르는 상자, 어두워지는 버튼, 밝아지는 사진이 그 예입니다. 평소 모습은 **Style** 패널에서, 호버 모습은 쌍둥이인 **Hover style** 패널에서 정합니다. 예제에서는 호버 시 떠오르는 회색 텍스트 상자를 만듭니다. 동영상에서는 텍스트 상자에 배경, 안쪽 여백, 그림자를 주고 호버 시 그림자를 깊게 합니다. ## 텍스트 상자 만들기 1. 콘텐츠 영역에서 **+**를 클릭하고 **Section**을 **Layout** 탭에서 고릅니다. 2. 섹션에서 **+**를 클릭하고 **Row**를 고릅니다. 3. 로우의 격자 아이콘을 클릭하고 동일한 컬럼 세 개 타일을 고른 뒤 **Save**를 클릭합니다. 4. 첫 번째 컬럼에서 **+**를 클릭하고 **Text**를 **Content** 탭에서 고릅니다. 5. "Open day"를 입력하고 **Heading 3**으로 설정한 뒤 아래에 한 줄을 추가합니다. ## 평소 스타일 정하기 1. 동일한 설정 대화상자에서 **Style** 패널을 엽니다. 2. 연회색 **Background**를 고릅니다. 3. 박스 모델에서 **Padding**의 위, 왼쪽, 아래를 24로 설정합니다. 4. 값을 **Border radius**에 8로 설정합니다. 5. 값을 **Drop shadow**에 1로 설정합니다. ## 호버 스타일 정하기 1. 설정의 **Hover style** 패널을 엽니다. 2. 값을 **Drop shadow**에 4로 설정합니다. 3. 버튼 **Save**를 클릭합니다. 4. DXPR Builder 도구 모음에서 **Save**를 클릭합니다. 5. 도구 모음의 눈 아이콘인 보기 메뉴를 열고 **Preview**를 선택합니다. 6. 포인터를 텍스트 상자로 이동합니다. ## 표시 내용 평소 텍스트 상자는 둥근 모서리와 옅은 그림자의 회색입니다. 포인터가 닿으면 그림자가 깊어지고 상자가 떠오르는 듯합니다. 포인터가 떠나면 원래대로 돌아갑니다. 그림자 변화는 애니메이션으로 나타납니다. 새 색상 같은 다른 호버 변화는 즉시 바뀝니다. ## 설정 패널 **Hover style**에는 **Style** 패널과 동일한 필드가 있습니다. 비워 둔 필드는 평소 값을 유지합니다. | Field | Use on hover | |---|---| | **Margin**, **Border**, **Padding** (box model) | 요소를 이동하거나 테두리를 두르거나 키웁니다. | | **Font color** | 텍스트를 강조합니다. | | **Border color** | 테두리를 강조합니다. | | **Background** | 채우기를 변경합니다. | | **Background image**, **Background style**, **Background position** | 사진을 바꾸거나 이동합니다. | | **Border style** | 테두리를 표시합니다. | | **Font size** | 텍스트를 키웁니다. | | **Border radius** | 모서리를 둥글게 합니다. | | **Opacity** | 요소를 드러내거나 흐리게 합니다. | | **Drop shadow** | 입체감을 주며, 1부터 5까지입니다. | ## 자주 쓰는 패턴 - **Card lift**: **Drop shadow** 1은 **Style**에서, 4는 **Hover style**에서 지정합니다. - **Picture reveal**: **Opacity** 0.7은 **Style**에서, 1은 **Hover style**에서 지정합니다. - **Button colour change**: 더 어두운 **Background**를 **Hover style**에서 씁니다. - **Border highlight**: **Border style** **Solid**와 밝은 **Border color**를 **Style**에서 쓰고, **Hover style**에는 강조 **Border color**를 씁니다. ## 효과가 보이지 않는 경우 - **가리켜도 텍스트 상자가 바뀌지 않습니다.** 호버 값과 평소 값이 같거나 **Style** 패널에 잘못 설정했습니다. **More** > **Settings**를 열고 **Drop shadow**를 **Hover style** 패널에서 높입니다. - **편집 중에는 효과를 판단하기 어렵습니다.** 편집 모드에서는 가리키면 요소에 컨트롤 표시줄과 외곽선도 표시됩니다. 보기 메뉴에서 **Preview**를 선택하고 다시 가리켜 봅니다. - **Opacity, Font size, Border radius를 0으로 설정하면 효과가 없습니다.** 이 세 필드에서 0은 설정하지 않은 것으로 취급합니다. 요소를 거의 완전히 흐리게 하려면 **Opacity**를 0.01로 지정합니다. ## 다음 단계 - [Animate elements as they scroll into view](/ko/hc/documentation/learn-dxpr-builder/design/animation-tab)에서 호버를 넘어 움직임을 추가합니다. - [Style your cards](/ko/hc/documentation/learn-dxpr-builder/design/card-styles)에서 호버와 카드 색상, 그림자를 조합합니다.