# 구분선

CdBd 에디터의 구분선 카드는 여러분의 페이지에 있는 여러 콘텐츠 사이에 깔끔한 선을 넣어, 내용을 명확하게 나누고 페이지 구조를 보기 좋게 정리해 주는 특별한 도구예요. 구불구불한 선부터 굵은 선까지, 다양한 형태로 페이지를 정리하는 방법을 지금부터 친절하게 알려드릴게요!

***

## 1. 구분선 카드 추가하기

페이지의 내용을 구분하고 싶을 때, 구분선 카드를 사용해요.

### 1.1 구분선 카드 선택

* 페이지에 구분선 카드를 추가한 뒤 카드를 선택해 보세요.

### 1.2 페이지 정리 효과

* 구분선은 단순히 선을 긋는 것을 넘어, 서로 다른 내용들을 시각적으로 명확하게 구분해 주어 방문자가 페이지의 흐름을 쉽게 이해하도록 돕는답니다.

***

## 2. 구분선 디자인 예쁘게 꾸미기

구분선 카드를 선택한 후, 디자인 공간으로 가면 구분선의 모양과 스타일을 다양하게 꾸밀 수 있는 설정들이 나타나요. 내 페이지에 딱 맞는 깔끔한 구분선을 만들어 보세요!

### 2.1 선의 굵기와 색깔 조절하기

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FQ7xDKHESjKXAHvLXboZJ%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB%20%E1%84%80%E1%85%AE%E1%86%B0%E1%84%80%E1%85%B5.gif?alt=media&#x26;token=1f8da73d-d471-4cb7-b04f-15db79f2563e" alt=""><figcaption></figcaption></figure>



* **선의 굵기** : 구분선의 굵기를 조절하는 막대를 움직여 보세요. 0(선 없음)부터 4까지 0.5 단위로 섬세하게 조절할 수 있답니다.

<div align="center"><figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FNK8jzjInwVMK4auJv7UP%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB-%E1%84%80%E1%85%AE%E1%86%B0%E1%84%80%E1%85%B5.png?alt=media&#x26;token=57429f74-b2b0-48db-b6dc-7f6ae333cb40" alt="" width="375"><figcaption><p>구분선 굵기 슬라이더</p></figcaption></figure></div>

<div><figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2F3qFwADchb0Vq0jilW3EY%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB-%E1%84%80%E1%85%AE%E1%86%B0%E1%84%80%E1%85%B51.png?alt=media&#x26;token=ef108160-5719-4fa9-a3fa-ed765315a583" alt="" width="180"><figcaption><p>굵기 1</p></figcaption></figure> <figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FI5lq4ntpUp81qKyLNRTU%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB-%E1%84%80%E1%85%AE%E1%86%B0%E1%84%80%E1%85%B52.png?alt=media&#x26;token=f78b8be3-e508-490f-95ea-6919e29a5d74" alt="" width="180"><figcaption><p>굵기 2</p></figcaption></figure> <figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2Fy7YfJOFpcvMOBxD2nKry%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB-%E1%84%80%E1%85%AE%E1%86%B0%E1%84%80%E1%85%B53.png?alt=media&#x26;token=c5eb4a0a-11eb-477c-9897-1bcf9de56924" alt="" width="180"><figcaption><p>굵기 3</p></figcaption></figure> <figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2F7XSve9eTSElvBEzrL3kv%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB-%E1%84%80%E1%85%AE%E1%86%B0%E1%84%80%E1%85%B54.png?alt=media&#x26;token=255130ef-aee9-4adf-b996-796468bc4269" alt="" width="180"><figcaption><p>굵기 4</p></figcaption></figure></div>

* **선의 색깔** : 원하는 색깔을 골라 구분선을 페이지 디자인과 조화롭게 만들 수 있어요.

### 2.2 선의 모양 바꾸기

* 구분선의 형태를 다양하게 선택하여 페이지에 특별한 느낌을 줄 수 있어요.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FlmuKX9QAai4YjgucBosZ%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB%20%E1%84%86%E1%85%A9%E1%84%8B%E1%85%A3%E1%86%BC.gif?alt=media&#x26;token=5638b0e1-e325-46f1-8d4c-6aa3d930ec88" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FjjtBc9JCZrRqmqU8YkdM%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB-%E1%84%86%E1%85%A9%E1%84%8B%E1%85%A3%E1%86%BC.png?alt=media&#x26;token=5aa35e1b-140e-43fe-a68e-1ed4ea0867da" alt="" width="375"><figcaption><p>구분선 모양</p></figcaption></figure>

<div><figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2F1wDaQArqZXhBxSMeqH71%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB-%E1%84%89%E1%85%B5%E1%86%AF%E1%84%89%E1%85%A5%E1%86%AB.png?alt=media&#x26;token=247f5118-e2ac-4fb7-98f4-c023b375c530" alt=""><figcaption><p>실선</p></figcaption></figure> <figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FiSy6oQ15nwUAbMwLpuze%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB-%E1%84%80%E1%85%AE%E1%86%B0%E1%84%8B%E1%85%B3%E1%86%AB%E1%84%8C%E1%85%A5%E1%86%B7%E1%84%89%E1%85%A5%E1%86%AB.png?alt=media&#x26;token=205007eb-5959-4a7d-a9b3-f604c0de01ab" alt=""><figcaption><p>굵은 점선</p></figcaption></figure> <figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FcqkWr5XYq4hP7be2Iw3H%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB-%E1%84%80%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB%E1%84%8C%E1%85%A5%E1%86%B7%E1%84%89%E1%85%A5%E1%86%AB.png?alt=media&#x26;token=a5ca4ad2-fa29-474a-8fe1-9c8a63f20772" alt=""><figcaption><p>가는 점선</p></figcaption></figure> <figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2F7RFU6Pj5LVAmQNqBNLBE%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB-%E1%84%86%E1%85%AE%E1%86%AF%E1%84%80%E1%85%A7%E1%86%AF.png?alt=media&#x26;token=e275a9f8-3055-4702-851a-d2abe2f16bf3" alt=""><figcaption><p>물결</p></figcaption></figure></div>

* 실선 : 가장 기본적인 직선 형태예요.
* 굵은 점선 : 점들이 굵게 연결된 형태예요.
* 얇은 점선 : 점들이 얇게 연결된 형태예요.
* 물결선 : 부드러운 물결 모양의 선이에요.

### 2.3 상하 여백 조절하기

* 구분선 위아래로 공간을 얼마나 둘지 조절할 수 있어요. 0부터 4까지 1단위로 여백을 설정할 수 있답니다. 내용을 너무 붙이지 않으면서도 깔끔하게 구분할 때 유용해요.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FoEul3ZVItAzHDQeD2aH9%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB%20%E1%84%89%E1%85%A1%E1%86%BC%E1%84%92%E1%85%A1%E1%84%8B%E1%85%A7%E1%84%87%E1%85%A2%E1%86%A8.gif?alt=media&#x26;token=2dcfec58-3ac2-469d-9772-6b88445541bc" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FmnZMhVZB21u7KAqo3W8Q%2F%E1%84%80%E1%85%AE%E1%84%87%E1%85%AE%E1%86%AB%E1%84%89%E1%85%A5%E1%86%AB-%E1%84%89%E1%85%A1%E1%86%BC%E1%84%92%E1%85%A1%E1%84%8B%E1%85%A7%E1%84%87%E1%85%A2%E1%86%A8.png?alt=media&#x26;token=926c0f7b-808b-4834-b15f-330b7544fc72" alt="" width="375"><figcaption></figcaption></figure>

<div><figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FGCvHD3Uo0wYFEZzDdSTZ%2F%E1%84%89%E1%85%A1%E1%86%BC%E1%84%92%E1%85%A1%E1%84%8B%E1%85%A7%E1%84%87%E1%85%A2%E1%86%A80.png?alt=media&#x26;token=288b4cb0-ea12-4002-ab51-dad13ff467f5" alt=""><figcaption><p>상하여백 0</p></figcaption></figure> <figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FyVcYx4cbHwPidbPqtuXZ%2F%E1%84%89%E1%85%A1%E1%86%BC%E1%84%92%E1%85%A1%E1%84%8B%E1%85%A7%E1%84%87%E1%85%A2%E1%86%A81.png?alt=media&#x26;token=5bfdbad8-6e98-4dc2-b9cd-da30adb1276c" alt=""><figcaption><p>상하여백 1</p></figcaption></figure> <figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2Fgi2f69l8FHtOZF6sFeWE%2F%E1%84%89%E1%85%A1%E1%86%BC%E1%84%92%E1%85%A1%E1%84%8B%E1%85%A7%E1%84%87%E1%85%A2%E1%86%A82.png?alt=media&#x26;token=5f3439cf-dd7f-4fac-8dc6-a1cb454b9e19" alt=""><figcaption><p>상하여백 2</p></figcaption></figure> <figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FmVj0aXWDRBs7icWmMyhg%2F%E1%84%89%E1%85%A1%E1%86%BC%E1%84%92%E1%85%A1%E1%84%8B%E1%85%A7%E1%84%87%E1%85%A2%E1%86%A83.png?alt=media&#x26;token=b6dad787-f612-413d-b5e3-d97ba2b691eb" alt=""><figcaption><p>상하여백 3</p></figcaption></figure> <figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FM3JOmX6HstZXhk6FELxr%2F%E1%84%89%E1%85%A1%E1%86%BC%E1%84%92%E1%85%A1%E1%84%8B%E1%85%A7%E1%84%87%E1%85%A2%E1%86%A84.png?alt=media&#x26;token=06af5fab-f4b5-47f1-81af-7209aa476771" alt=""><figcaption><p>상하여백 4</p></figcaption></figure></div>

***

## 3. 구분선 카드 관리하기

만들어 놓은 구분선 카드를 편집하거나 복사, 삭제할 수 있어요.

### 3.1 변경/삭제

* 한 번 설정한 구분선의 디자인을 언제든지 바꿀 수 있고, 더 이상 필요 없는 구분선 카드를 지울 수 있답니다.

### 3.2 복사하기

* 똑같은 디자인의 구분선 카드를 여러 개 만들고 싶을 때 유용해요.
