> 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="/files/dEI5qmiK2f6U4Ryy04Jp" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/h5dWgd2YSA5L54zJlY6e" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/K2RApz56IsoaU57gtzy1" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/NlI8zn4PQoxqJM1T1NQH" alt=""><figcaption></figcaption></figure>

***

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

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

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

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

<figure><img src="/files/aAylFXvKq0ql3nXavNyQ" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/X9yedzQy1l8GTAoXQf5l" alt=""><figcaption></figcaption></figure>

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

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

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

***

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

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

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

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

<figure><img src="/files/rS9UOesFko6TK2HPiTmJ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/FW7NLUAhZywd8QEiJiaK" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Wts6a7DLOZ4puAisDISK" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/rBVZKARkuhwy5Cb0vkeA" alt=""><figcaption></figcaption></figure>

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

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

***

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

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

<figure><img src="/files/r9WKARTBh721Dy2sfEyo" alt=""><figcaption></figcaption></figure>

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

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

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

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

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