> 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/code.md).

# 코드

CdBd 에디터의 코드 카드는 여러분의 페이지에 HTML 코드를 직접 추가할 수 있는 특별한 도구예요. 기본적인 카드 기능으로는 표현하기 어려운 다양한 디자인이나 복잡한 기능을 페이지에 더하고 싶을 때 아주 유용하답니다. 나만의 코드를 페이지에 넣는 방법을 지금부터 친절하게 알려드릴게요!

***

## 1. 코드 카드 추가하고 HTML 코드 입력하기

페이지에 코드를 추가하고 싶은 곳에 코드 카드를 넣어볼까요?

### 1.1 코드 카드 선택

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2F7pZdpplCYAD0txxo4JPv%2F%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3%20%E1%84%8F%E1%85%A1%E1%84%83%E1%85%B3%20%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB%20%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB.png?alt=media&amp;token=0a89828e-efcb-4e0b-bf24-b85eae48936b" alt=""><figcaption></figcaption></figure>

* 페이지에 코드 카드를 추가한 뒤 카드를 선택해 보세요.
* 기본적으로 HTML 코드를 입력할 수 있는 공간이 나타날 거예요.

### 1.2 HTML 코드 입력

* 코드를 입력할 수 있는 칸에 원하는 HTML 코드를 직접 붙여넣거나 작성해 주세요.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2F5DopOVeCfgukyEpRy21k%2F%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%92%E1%85%A1%E1%86%AB%20%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB.png?alt=media&amp;token=c360ea9c-86fb-4b0d-8dfe-13332615b4f8" alt=""><figcaption></figcaption></figure>

* 코드 입력 중에는 필요에 따라 입력 칸을 확대해서 더 넓게 보고 편하게 작업할 수도 있답니다.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FPRVUnfnq9P3PlKPaCmy9%2F%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3%20%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%E1%84%8E%E1%85%A1%E1%86%BC%20%E1%84%92%E1%85%AA%E1%86%A8%E1%84%83%E1%85%A2%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%E1%84%84%E1%85%A2.png?alt=media&amp;token=1e999289-ccc7-4ceb-ba57-df16ca25216f" alt=""><figcaption></figcaption></figure>

***

## 2. 코드 카드 디자인 꾸미기

코드 카드를 선택한 후, 카드 디자인 공간으로 가면 카드 자체의 디자인을 페이지에 맞춰 꾸밀 수 있는 설정들이 나타나요.

### 2.1 배경 색깔 변경

* 코드 카드의 배경 색깔을 원하는 대로 바꿀 수 있어요.

### 2.2 테두리 설정

* 카드에 테두리를 넣거나 두께, 색깔을 조절할 수 있답니다.

### 2.3 모서리 모양 조절

* 카드의 딱딱한 직각 모서리를 둥글게 만들어서 부드러운 느낌을 줄 수 있어요.

### 2.4 여백 조절

* 카드의 안팎 여백을 조절해서 내용이 더 잘 보이거나, 다른 카드와의 간격을 조절할 수 있어요.

***

## 3. 코드 카드 관리하기

만들어 놓은 코드 카드를 편집하거나 복사, 삭제할 수 있어요. (다른 카드와 동일한 방식으로 관리됩니다.)

### 3.1 코드 내용 변경

* 카드에 입력된 HTML 코드를 언제든지 다시 수정할 수 있어요.

### 3.2 복사하기

* 똑같은 코드 카드를 여러 개 만들고 싶을 때 유용해요.

### 3.3 삭제하기

* 더 이상 필요 없는 코드 카드는 언제든지 쉽게 지울 수 있답니다.