Card
Card(카드) 위젯은 콘텐츠를 하나로 묶어 담는, 둥근 모서리와 그림자(입체감)를 가진 표면(surface)입니다.
목록 항목·정보 블록처럼 관련 있는 요소를 시각적으로 그룹화할 때 사용합니다.
정의 / 역할
Card 위젯은 자식 콘텐츠 하나를 감싸는 사각 표면을 그려줍니다. 배경색·그림자 색·입체감(elevation)·외곽 모양·바깥 여백을 설정할 수 있으며, 자식을 담는 컨테이너로 동작합니다.
- 카테고리: Layouts (레이아웃)
- 기본 자식 크기:
100 × 100 - 배경색을 지정하지 않으면 표면이 투명하게 그려집니다.
기능
| 기능 | 설명 |
|---|---|
| 콘텐츠 그룹화 | 관련 있는 요소를 하나의 표면 위에 묶어 시각적으로 구분합니다. |
| 입체감 표현 | 입체감(elevation)과 그림자 색(shadowColor)으로 카드가 배경 위에 떠 있는 듯한 깊이를 줍니다. |
| 모양 설정 | shape로 외곽 테두리와 모서리 둥글기를 지정합니다. |
| 배경·여백 | 배경색(color)과 카드 바깥 여백(margin)을 조정합니다. |
| 넘침 처리 | clipBehavior로 자식이 카드 경계를 넘칠 때 잘라내는 방식을 정합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Layouts 카테고리를 엽니다.
- Card 항목을 캔버스로 끌어다 놓습니다.
- 카드 안에 표시할 위젯을 자식으로 배치합니다.
- 오른쪽 속성 패널에서 배경색·입체감·모양·여백 등을 조정합니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
color | 카드 배경(표면) 색상. 미지정 시 투명하게 그려집니다. | 미지정 | 색상 |
shadowColor | 카드 그림자 색상 | 미지정 | 색상 |
elevation | 그림자 깊이(입체감) | 미지정 | 숫자 |
shape | 카드 외곽 모양(테두리·모서리) | 미지정 | 모양 값 |
borderOnForeground | 자식 콘텐츠 위에 테두리를 그릴지 여부 | 참 | 참 / 거짓 |
margin | 카드 바깥 여백 | 미지정 | 여백 값 |
clipBehavior | 자식이 카드 경계를 넘칠 때 잘라내는 방식 | 미지정 | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
semanticContainer | 접근성에서 카드를 하나의 시맨틱 컨테이너로 취급할지 여부 | 참 | 참 / 거짓 |
주의 / 팁
팁
입체감은 elevation과 shadowColor로 조절합니다. 값이 클수록 그림자가 넓어져 카드가 더 떠 있는 것처럼 보입니다.
노트
color(배경색)를 지정하지 않으면 카드 표면이 투명하게 그려집니다. 표면 색이 필요하면 배경색을 설정하세요.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 Card (카드) Widget Control 문서에서 확인하세요.