> For the complete documentation index, see [llms.txt](https://cdbd.gitbook.io/guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cdbd.gitbook.io/guide/editor/carddesign.md).

# 카드 디자인

카드 디자인은 페이지를 구성하는 각 카드의 배경, 테두리, 모서리 형태를 자유롭게 꾸밀 수 있는 기능입니다. 각 카드의 성격에 맞춰 시각적으로 강조하거나, 브랜드 컬러를 입혀 통일감을 줄 수 있습니다.

에디터 우측 디자인 보드의 카드 디자인 영역에서 설정할 수 있습니다.

***

## 1. 배경

카드의 배경색을 변경하거나 이미지를 삽입할 수 있습니다.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FkqTho72P9XERlSBe9vWS%2F%E1%84%87%E1%85%A2%E1%84%80%E1%85%A7%E1%86%BC%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.png?alt=media&amp;token=71bf3640-cda3-45a0-bd37-a433e1c85ef9" alt=""><figcaption></figcaption></figure>

### **1.1 단색 배경**

* 제공되는 컬러 팔레트에서 원하는 색상을 선택하거나 컬러 픽커에 컬러코드를 입력하면 카드 배경색이 변경됩니다.

### **1.2** 이미지 배경

* 이미지 아이콘을 클릭하여 배경 이미지를 설정할 수 있습니다.
* 업로드 또는 검색 : 이미지 보관함에 이미지를 업로드하거나, 무료 이미지/GIF를 검색하여 적용할 수 있습니다.
* 밝기 조절 : 배경 이미지 위에 텍스트가 잘 보이도록 이미지의 밝기를 조절할 수 있습니다.
  * **원본 :** 이미지의 원래 색상을 그대로 사용합니다.
  * **어둡게 :** 흰색 글씨가 잘 보이도록 이미지를 어둡게 처리합니다.
  * **밝게 :** 검은색 글씨가 잘 보이도록 이미지를 밝게 처리합니다.

***

## 2. 테두리

카드의 외곽선 스타일을 설정합니다. 카드를 다른 콘텐츠와 명확하게 구분하고 싶을 때 유용합니다.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FiKtAYajwL135BPDvDjvZ%2F%E1%84%90%E1%85%A6%E1%84%83%E1%85%AE%E1%84%85%E1%85%B5%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.png?alt=media&amp;token=663d02f9-614e-41e2-bfee-ebc4246e93de" alt=""><figcaption></figcaption></figure>

* 두께 조절 : 슬라이더를 움직여 테두리의 두께를 조절할 수 있습니다.
* 색상 변경 : 컬러 피커를 사용하여 테두리의 색상을 자유롭게 지정할 수 있습니다.

***

## 3. 모서리

카드의 모서리 형태를 결정합니다.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2Fcy9QecanRw3yJC8Wb4ou%2F%E1%84%86%E1%85%A9%E1%84%89%E1%85%A5%E1%84%85%E1%85%B5%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.png?alt=media&amp;token=c0a79c40-650c-4744-967a-3f8d9498c4b8" alt=""><figcaption></figcaption></figure>

* 각진 : 모서리를 직각으로 설정하여 깔끔하고 도시적인 느낌을 줍니다.
* 둥근 : 모서리를 둥글게 처리하여 부드럽고 친근한 느낌을 줍니다.

***

## 4. 여백

카드의 안쪽과 바깥쪽 여백을 켜거나 끌 수 있습니다.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FZPyC3X374WL4E7PGALnh%2F%E1%84%8B%E1%85%A7%E1%84%87%E1%85%A2%E1%86%A8%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.png?alt=media&amp;token=295d9400-cdfa-4d03-bd36-4253a0ccb2c8" alt=""><figcaption></figcaption></figure>

* 내부여백 : 카드 테두리와 내부 콘텐츠(텍스트, 이미지 등) 사이의 여백을 설정합니다.
* 외부여백 : 카드와 카드 사이(위아래)의 간격을 설정합니다.