요소에 마우스를 올리면 반응하게 만들기.
방문자가 가리키면 요소가 변하게 만드세요. 들썩이는 상자, 어두워지는 버튼, 밝아지는 사진. 평소 모습은 Style 패널에서, 마우스 오버 모습은 짝꿍인 Hover style 패널에서 정합니다. 예시에서는 마우스를 올리면 들썩이는 회색 텍스트 상자를 만듭니다.
이 비디오는 텍스트 상자에 배경, 안쪽 여백, 마우스를 올리면 깊어지는 그림자를 줍니다.
텍스트 상자 만들기
- 다음을 클릭하세요: 콘텐츠 영역의 +. Section(을)를 Layout 탭에서 고르세요.
- 다음을 클릭하세요: 섹션의 +. Row(을)를 고르세요.
- 행의 격자 아이콘을 클릭하고 세 칸이 같은 타일을 고른 뒤 Save(을)를 클릭하세요.
- 첫 칸에서 다음을 클릭하세요: +. Text(을)를 Content 탭에서 고르세요.
- "Open day"(이)라고 입력하고 Heading 3(으)로 설정한 뒤 아래에 한 줄을 추가하세요.
평소 스타일 정하기
- 같은 설정 대화 상자에서 다음 패널을 여세요: Style.
- 다음을 고르세요: 연한 회색 Background.
- 박스 모델에서 다음의 위, 왼쪽, 아래를 24로 설정하세요: Padding.
- 다음을 설정하세요: Border radius를 8로.
- 다음을 설정하세요: Drop shadow를 1로.
마우스 오버 스타일 정하기
- 다음 패널을 여세요: Hover style.
- 다음을 설정하세요: Drop shadow를 4로.
- 다음을 클릭하세요: Save.
- 다음을 클릭하세요: DXPR Builder 도구 모음의 Save.
- 보기 메뉴(도구 모음의 눈 아이콘)를 열고 Preview(을)를 고르세요.
- 포인터를 텍스트 상자 위로 옮기세요.
결과 화면
평소에는 텍스트 상자가 둥근 모서리와 옅은 그림자의 회색입니다. 포인터가 닿으면 그림자가 깊어지고 상자가 들썩이는 듯합니다. 포인터가 떠나면 원래대로 돌아갑니다. 그림자 변화는 애니메이션으로 나타납니다. 새 색상 같은 다른 마우스 오버 변화는 즉시 바뀝니다.
설정
다음 패널에는 같은 필드가 있습니다: Hover style 패널과 Style 패널. 비워 둔 필드는 평소 값을 유지합니다.
| 필드 | 마우스 오버 시 용도 |
|---|---|
| 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에서), Hover style에서 4.
- Picture reveal: Opacity 0.7(Style에서), Hover style에서 1.
- Button colour change: 더 어두운 Background(Hover style에서).
- Border highlight: Border style Solid. 밝은 Border color(Style에서), 강조 Border color(Hover style에서).
효과가 보이지 않는 경우
- 가리켜도 텍스트 상자가 바뀌지 않습니다. 마우스 오버 값이 평소 값과 같거나 Style 패널에 잘못 설정한 것입니다. More > Settings(을)를 열고 Drop shadow(을)를 Hover style 패널에서 높이세요.
- 편집 중에는 효과를 판단하기 어렵습니다. 편집 모드에서는 가리키면 요소의 제어 막대와 외곽선도 표시됩니다. 보기 메뉴에서 Preview(을)를 고르고 다시 가리키세요.
- Opacity, Font size, Border radius를 0으로 설정하면 효과가 없습니다. 이 세 필드에서 0은 설정하지 않은 것으로 간주됩니다. 요소를 거의 완전히 흐리게 하려면 Opacity 0.01을 쓰세요.
다음 단계
- 스크롤에 따라 나타나는 요소에 애니메이션 적용: 마우스 오버를 넘어 움직임을 더하세요.
- 카드 스타일 지정: 마우스 오버와 카드 색상 및 그림자를 함께 쓰세요.