카드 스타일 지정.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

카드에 사이트에 어울리는 모습을 주세요. 카드의 Type에서 색상 구성을, Style 패널에서 둥근 모서리와 그림자를 가져옵니다. 마지막에는 기능, 팀원, 가격용으로 한 줄에 반복 배치할 수 있는 카드가 완성됩니다. 먼저 페이지에 카드를 배치하려면 카드 추가(을)를 보세요.

이 비디오는 아래 단계를 따릅니다. 카드에 밝은 모습, 둥근 모서리, 부드러운 그림자를 적용합니다.

카드 스타일 지정

  1. 카드에 마우스를 올리고 More(을)를 연 뒤 Settings(을)를 고르세요.
  2. 다음에서 고르세요: Type 아래 Light.
  3. 다음 패널을 여세요: Style.
  4. 다음을 설정하세요: Border radius을 8로.
  5. 다음을 설정하세요: Drop shadow를 2로.
  6. 다음을 클릭하세요: Save.

결과 화면

카드에는 밝은 배경, 둥근 모서리, 부드러운 그림자가 적용됩니다. Header 막대가 맨 위에 있고 Title(이)가 본문을 열며, 안에 추가한 요소들이 아래에 이어집니다.

카드 전체를 물들이는 것은 Type입니다. 헤더만이 아닙니다. Primary, Secondary, Success, Info, Warning, Danger 및 Dark(은)는 카드를 해당 테마 색상으로 채우고 텍스트를 흰색으로 만듭니다. Light(은)는 일반 텍스트와 함께 밝은 배경을 줍니다. Default(은)는 카드를 테마에 맡깁니다.

설정

설정 위치 기능
Header General 카드 맨 위 막대의 텍스트. 막대를 없애려면 비워 두세요
Title General 카드 본문 맨 위의 제목
Type General 카드 전체의 색상 구성. 기본값은 Default
Background, Font color Style 직접 고른 색상. 조건: Type이 Default
Border radius Style 둥근 모서리(픽셀 단위)
Drop shadow Style 입체감(1부터 5까지)
Border (box model), Border style, Border color Style 한 면 이상의 테두리

카드 패턴

  • Flat card: Border style Solid, 밝은 Border color, Border radius 4, 그림자 없음.
  • Elevated card: Drop shadow 2, Border style None, Border radius 8.
  • Highlighted card: 박스 모델에서 Border의 왼쪽을 4로 설정하고, Border style Solid와 강조 Border color(을)를 쓰세요.
  • Card that lifts: Drop shadow 1(Style에서)과 Hover style에서 4. 요소에 마우스를 올리면 반응하게 만들기(을)를 보세요.

한 줄의 카드

기능 카드, 팀원, 가격 그리드용:

  1. 행을 추가하고 세 칸 또는 네 칸이 같은 레이아웃을 고르세요.
  2. 각 칸에 카드를 추가하고 모든 카드에 같은 Type 및 Style 값을 주세요.
  3. 행의 More 메뉴를 열고 Settings(을)를 고른 뒤 Equal-height columns(을)를 켜세요.

칸이 정렬되지만 각 카드는 내용만큼의 높이를 유지합니다. 각 카드의 텍스트를 비슷한 길이로 유지하세요. 카드가 같은 높이에서 끝납니다. 가격표에서는 다른 Type이나 더 깊은 Drop shadow(으)로 추천 요금제를 강조하세요.

스타일이 보이지 않는 경우

  • Style 패널의 Background 또는 Font color가 적용되지 않습니다. 카드 Type(이)가 Default(이)가 아니면 Style 패널보다 우선하는 테마 클래스로 카드 색상을 정합니다. Type(을)를 Default(으)로 설정하고 직접 색상을 고르세요.
  • 색상 카드의 흰색 텍스트가 읽기 어렵습니다. 많은 테마의 Warning 및 Info 색상은 옅으며, 이런 유형은 항상 흰색 텍스트를 씁니다. 더 어두운 Type이나 일반 텍스트 색상을 유지하는 Light(을)를 고르세요.
  • 그림자가 표시되지 않습니다. Drop shadow(이)가 0이면 그림자가 없다는 뜻입니다. 1 이상으로 설정하세요.

다음 단계