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

# 이미지

CdBd 에디터의 이미지 카드는 여러분의 페이지를 시각적으로 더욱 매력적이고 풍성하게 만들어주는 핵심 도구예요. 이미지를 쉽게 넣고, 멋지게 편집하며, 원하는 대로 꾸미는 모든 방법을 지금부터 친절하게 알려드릴게요!

***

## 1. 이미지 추가하기

페이지에 이미지 카드를 추가하고 여러분의 멋진 사진을 넣어볼까요?

### **1.1** 이미지 카드 선택

* 페이지에 이미지 카드를 추가해 보세요.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2Fz5JgnLbi43RfQvdVfL9b%2F%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5.gif?alt=media&amp;token=e6442a75-9bb5-4a14-a9b2-f06ee1fea6b9" alt=""><figcaption></figcaption></figure>

### **1.2** 이미지 바로 올리기

* 이미지를 넣는 첫 번째 방법은 여러분이 가진 이미지 파일을 직접 올리는 거예요.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2Fisdmlr4ZwgUgfGdsfGs7%2F%E1%84%82%E1%85%A2%20%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5.gif?alt=media&amp;token=31387da0-bcf9-40be-8834-667bd0a72909" alt=""><figcaption></figcaption></figure>

* 파일 선택 : 내 컴퓨터나 스마트폰에 저장된 사진을 직접 골라 올릴 수 있어요.
* 끌어다 놓기 : 원하는 사진 파일을 마우스로 끌어서 이미지 카드 영역에 바로 놓아도 된답니다.

### **1.3** 이미지/움직이는 사진(GIF) 검색으로 원하는 사진 찾기

* 두 번째 방법은 필요한 이미지를 검색해서 바로 넣는 거예요!
* 이미지 검색 : 원하는 분위기의 사진을 찾고 싶다면, 영어로 키워드를 입력해서 찾아보세요. Pexels.com과 연결되어 있어서 고품질의 다양한 무료 이미지를 사용할 수 있답니다.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FjnsJ8nvtC14VeGSPgFUr%2F%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%80%E1%85%A5%E1%86%B7%E1%84%89%E1%85%A2%E1%86%A8.gif?alt=media&amp;token=8d0ba192-10bd-4dd7-8b56-7723e5b3d6f0" alt=""><figcaption></figcaption></figure>

* 움직이는 사진(GIF) 검색 : 움직이는 재미있는 사진(GIF)도 똑같은 방식으로 찾을 수 있어요. Giphy와 연결되어 있어 원하는 GIF를 쉽게 찾아서 페이지에 넣을 수 있답니다.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FHYGc12CkmbNkOo0XKZVq%2F%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20gif%20%E1%84%80%E1%85%A5%E1%86%B7%E1%84%89%E1%85%A2%E1%86%A8.gif?alt=media&amp;token=34e090e5-5621-49d3-b050-b2b72f9f7074" alt=""><figcaption></figcaption></figure>

***

## 2. 이미지 편집하고 관리하기

넣은 이미지를 단순히 보여주는 것을 넘어, 다양한 방법으로 편집하고 관리할 수 있어요.

### **2.1** 이미지 모양 바꾸기 (좌우 반전/회전)

* 이미지를 좌우로 뒤집거나 원하는 각도로 돌려서 색다른 느낌을 줄 수 있어요.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FBLcfeQUind5WORi9cUJy%2F%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%91%E1%85%A7%E1%86%AB%E1%84%8C%E1%85%B5%E1%86%B8.gif?alt=media&amp;token=1cc23e61-6fcb-4519-9590-e8f88fdd872d" alt=""><figcaption></figcaption></figure>

### **2.2** 이미지 이름 바꾸기

* 여러 장의 사진을 관리할 때 헷갈리지 않도록, 각 이미지 카드에 알아보기 쉬운 이름을 붙여줄 수 있답니다.

### **2.3** 이미지 복사, 컴퓨터에 저장, 삭제하기&#x20;

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FegYmQz8F1a55RKQ3Oi01%2Fimage.png?alt=media&amp;token=47128a12-d3aa-40bf-a66e-5b3b681ac3ce" alt=""><figcaption></figcaption></figure>

* 복사하기 : 마음에 드는 이미지를 똑같이 복사해서 다른 곳에 다시 사용하거나, 다양한 변형을 시도해 볼 수 있어요.
* 컴퓨터에 저장하기 : 편집한 이미지를 내 컴퓨터에 다시 저장해서 보관하거나 다른 곳에 활용할 수 있답니다.
* 삭제하기 : 더 이상 필요 없는 이미지는 언제든지 쉽게 지울 수 있어요.

{% embed url="<https://youtu.be/RQoiarVzPKU>" %}

{% hint style="info" %}
\*tip : '이미지 삭제하기'를 선택하면 해당 이미지는 내 이미지 목록에서 삭제되어 휴지통으로 이동합니다. 휴지통에서 이미지를 영구 삭제하거나 복원하여 다시 내 이미지 목록으로 이동시킬 수 있습니다.
{% endhint %}

***

## 3. 이미지 디자인 꾸미기

이미지 카드를 선택한 후, 디자인 공간으로 가면 이미지를 더욱 돋보이게 만들 수 있는 다양한 설정들이 나타나요. 내 페이지에 딱 맞는 이미지 스타일을 연출해 보세요!

### **3.1** 이미지 비율 및 크기 조절

* 이미지의 가로세로 비율을 조절해서 원하는 모양으로 바꿀 수 있고, 이미지의 크기도 자유롭게 조절하여 페이지 공간에 맞춰 넣을 수 있답니다.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FMsgwjEJCc4RDfGadt0w9%2Fimage.png?alt=media&amp;token=2c9a51a0-eefd-432e-8ef5-9f1011aff927" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FMxJgupVCR1XhND3BhmZL%2F%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%87%E1%85%B5%E1%84%8B%E1%85%B2%E1%86%AF.gif?alt=media&amp;token=b32a8920-7ad6-4936-8a3b-8cde0ed5775a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FqCzlB2hwV93urTF1JLMk%2F%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%8F%E1%85%B3%E1%84%80%E1%85%B5.gif?alt=media&amp;token=f5ae2b91-984d-4d84-85af-1b46ee395c39" alt=""><figcaption></figcaption></figure>

### **3.2** 이미지 형태와 정렬

* 이미지를 사각형뿐만 아니라, 동그라미나 모서리가 둥근 모양 등으로 바꿔서 독특한 느낌을 줄 수 있어요. 또한, 이미지를 왼쪽, 가운데, 오른쪽 중 원하는 곳으로 깔끔하게 배치할 수 있답니다.

{% embed url="<https://youtu.be/WGh_tvSRhyU>" %}

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FwA5slvI2Z9iaWxvR6MVn%2F%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%85%E1%85%A7%E1%86%AF.gif?alt=media&amp;token=06d576d6-34a6-4f7c-9517-c904763db547" alt=""><figcaption></figcaption></figure>

### **3.3** 테두리/여백 추가

* 이미지에 테두리를 넣거나 주변 여백을 조절해서 다른 내용들과 분리되도록 꾸밀 수 있어요.

***

## 4. 이미지에 링크 걸기

이미지 카드에 링크를 걸어 다른 웹사이트로 이동하거나, 상세 정보를 담은 페이지로 연결할 수 있어요.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FrTsd2GiIcLezNsQK8G6i%2Fimage.png?alt=media&amp;token=2de782d6-693c-4e09-b5bc-742705b619db" alt=""><figcaption></figcaption></figure>

### **4.1** 링크 추가

* 이미지를 클릭했을 때 이동할 웹 주소(URL)를 설정할 수 있어요. 예를 들어, 제품 이미지에 링크를 걸어 구매 페이지로 바로 연결할 수 있답니다.

{% hint style="info" %}
링크를 연결할 때, URL 주소는 'http', 'http\://', 'www' 등의 앞 부분을 포함하지 않아도 자동으로 연결됩니다.
{% endhint %}

### **4.2** 링크 변경/삭제&#x20;

* 한 번 설정한 링크도 언제든지 쉽게 바꾸거나 지울 수 있어요.