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

# 갤러리

CdBd 에디터의 갤러리 카드는 여러 장의 사진을 한 번에 모아서 페이지에 멋지게 보여줄 수 있는 특별한 도구예요. 시각적인 이야기가 중요한 콘텐츠를 만들 때 아주 유용하답니다. 갤러리 카드를 사용해서 여러분의 사진들을 더욱 돋보이게 하는 방법을 지금부터 친절하게 알려드릴게요!

***

## 1. 갤러리 카드 추가하고 이미지 넣기

페이지에 여러 장의 사진을 담을 갤러리 카드를 추가하고, 원하는 이미지들을 넣어볼까요?

{% embed url="<https://youtu.be/nFlLapF-sVs>" %}

### 1.1 갤러리 카드 선택

* 페이지에 갤러리 카드를 추가한 뒤 카드를 선택해 보세요.

### 1.2 이미지 한 번에 15장까지 추가

갤러리 카드에는 한 번에 최대 15장까지의 이미지를 넣을 수 있어요. 이전에 이미지 카드에서 사용했던 방식처럼, 내 이미지를 직접 올리거나 이미지 검색을 통해 이미지를 추가할 수 있답니다.

* 내 이미지 바로 올리기 : 내 컴퓨터나 스마트폰에 저장된 사진을 직접 골라 올리거나, 원하는 이미지 파일을 마우스로 끌어서 갤러리 카드 영역에 바로 놓을 수 있어요.
* 이미지/움직이는 사진(GIF) 검색 : CdBd의 이미지 검색 기능을 이용해 Pexels.com에서 무료 이미지를, Giphy에서 움직이는 사진(GIF)을 검색하여 바로 넣을 수도 있어요.

### 1.3 미리보기로 확인

* 이미지들을 넣으면 미리보기 화면에서 바로 어떻게 보이는지 확인할 수 있어서 아주 편리해요.

***

## 2. 갤러리 레이아웃 설정하기

갤러리 카드는 이미지들을 다양한 방식으로 배열하여 보여줄 수 있는 여러 가지 레이아웃 설정을 제공해요. 여러분의 콘텐츠에 가장 잘 어울리는 방식을 골라보세요.

### 2.1 이미지 목록 관리

* 갤러리에 추가된 이미지들을 한눈에 볼 수 있는 '이미지 목록'이 있어요. 여기에서 이미지들의 순서를 바꾸거나, 복사하거나, 필요 없는 이미지를 지울 수 있답니다.
* 각 이미지를 클릭하면 개별 이미지의 편집 화면으로 들어가서 자세한 설정을 할 수도 있어요.

### 2.2 레이아웃 유형 선택

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FzFzpnC6WEPybXjwOK1K3%2F%E1%84%80%E1%85%A2%E1%86%AF%E1%84%85%E1%85%A5%E1%84%85%E1%85%B5%20%E1%84%8B%E1%85%B2%E1%84%92%E1%85%A7%E1%86%BC.gif?alt=media&amp;token=cfd9a01d-0291-4bc7-93c9-57b2e95ba635" alt=""><figcaption></figcaption></figure>

* 갤러리에 있는 이미지들을 어떤 형식으로 보여줄지 고를 수 있어요.
* 나열하기 : 이미지들이 일렬로 쭉 나열되는 기본적인 형태예요.

<div align="center"><figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2F0v1nKX4dqnz7bgIOlSSZ%2F%E1%84%82%E1%85%A1%E1%84%8B%E1%85%A7%E1%86%AF%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5.png?alt=media&amp;token=5341579b-16a0-4a26-b50e-e2c7eacecdc6" alt="" width="180"><figcaption><p>나열하기</p></figcaption></figure></div>

* 넘겨보기 : 이미지들이 자동으로 넘어가면서 보여지는 형태로, 여러 장의 이미지를 강조하고 싶을 때 좋아요.

<div align="center"><figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FOwy6np3lWcQ7xvY7McHY%2F%E1%84%82%E1%85%A5%E1%86%B7%E1%84%80%E1%85%A7%E1%84%87%E1%85%A9%E1%84%80%E1%85%B5.png?alt=media&amp;token=5114a03d-ac27-429b-ba4d-46782c47c336" alt="" width="363"><figcaption><p>넘겨보기</p></figcaption></figure></div>

* 내비게이션 : 갤러리 속 이미지들을 **좌우로 넘길 수 있는 화살표 아이콘**과 \*\*현재 몇 번째 이미지를 보고 있는지 알려주는 숫자(지표)\*\*를 말해요. 이 내비게이션 요소들을 설정에서 '사용 안 함'으로 바꾸면, 이미지 위에서 사라져서 더 깔끔하게 갤러리를 보여줄 수 있답니다.
* 자동 넘김 : 갤러리 속 이미지들이 지정한 시간마다 저절로 다음 이미지로 넘어가는 기능이에요. 특별히 보여주고 싶은 이미지가 많거나, 방문자가 페이지를 가만히 보고 있어도 콘텐츠가 계속 움직이도록 만들고 싶을 때 아주 유용하죠. 이미지가 넘어가는 시간은 **1초부터 4초까지** 자유롭게 고를 수 있으니, 여러분이 원하는 갤러리의 흐름에 맞춰 조절해 보세요.

<div align="center"><figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FqqmSZDr6Jd83d2SbN2HB%2F%E1%84%82%E1%85%A7%E1%86%B7%E1%84%80%E1%85%A7%E1%84%87%E1%85%A9%E1%84%80%E1%85%B5.png?alt=media&amp;token=bebb6bf3-e8de-45bf-a477-48eebcc17b19" alt="" width="375"><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%2FS1vASPk7CF66LBm0AmTA%2F%E1%84%8C%E1%85%A1%E1%84%83%E1%85%A9%E1%86%BC%20%E1%84%82%E1%85%A5%E1%86%B7%E1%84%80%E1%85%B5%E1%86%B7.png?alt=media&amp;token=48c60194-56bf-41e6-9255-1d105e47a76a" 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%2FXkPX90zxwwCBM1S1kvRa%2F%E1%84%80%E1%85%B3%E1%84%85%E1%85%B5%E1%84%83%E1%85%B32.png?alt=media&amp;token=8148e6ed-c35d-4bdd-920f-447e22d2084d" 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%2FORRxs6BisnrZTIRYsDEV%2F%E1%84%80%E1%85%B3%E1%84%85%E1%85%B5%E1%84%83%E1%85%B33.png?alt=media&amp;token=7462b8f5-cd04-4aac-a0ad-6b6cb4b80380" 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%2FOd8qBr9NGtsGA6wMg2qd%2F%E1%84%80%E1%85%B3%E1%84%85%E1%85%B5%E1%84%83%E1%85%B34.png?alt=media&amp;token=f051b708-76a5-44a6-809a-d9c9caa3f418" alt=""><figcaption><p>그리드 4단</p></figcaption></figure></div>

***

## 3. 이미지 모양과 꾸미기

갤러리 카드를 선택한 후, 디자인 공간으로 가면 갤러리 속 이미지들의 모양을 더욱 멋지게 꾸밀 수 있는 다양한 설정들이 나타나요.

### 3.1 이미지 비율 조절&#x20;

* 갤러리 내 모든 이미지들의 가로세로 비율을 한 번에 조절할 수 있어요.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FFMyr2UsBPnCedPreFHhg%2F%E1%84%80%E1%85%A2%E1%86%AF%E1%84%85%E1%85%A5%E1%84%85%E1%85%B5%20%E1%84%87%E1%85%B5%E1%84%8B%E1%85%B2%E1%86%AF.gif?alt=media&amp;token=84c93b07-0ab2-482a-8df0-c32976166e79" alt=""><figcaption></figcaption></figure>

* 원본 비율 : 이미지 그대로의 비율을 유지해요.
* 1:1 비율 : 정사각형 모양으로 맞춰줘요.
* 가로 비율 : 가로로 긴 형태로 맞춰줘요.
* 세로 비율 : 세로로 긴 형태로 맞춰줘요.

<div><figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FZJ1tiRZDZaMcSHeSBfqe%2F%E1%84%87%E1%85%B5%E1%84%8B%E1%85%B2%E1%86%AF-%E1%84%8B%E1%85%AF%E1%86%AB%E1%84%87%E1%85%A9%E1%86%AB.png?alt=media&amp;token=597b122f-1e86-4546-a99a-42a8962f3f92" 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%2F9NBmMVi1gckhCf03xZqx%2F%E1%84%87%E1%85%B5%E1%84%8B%E1%85%B2%E1%86%AF-1-1.png?alt=media&amp;token=3dfabe1a-d1e4-453f-a7b5-dbbd744441c1" alt=""><figcaption><p>1:1</p></figcaption></figure> <figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FskZEFcE1lBfG5G6pRGaj%2F%E1%84%87%E1%85%B5%E1%84%8B%E1%85%B2%E1%86%AF-%E1%84%80%E1%85%A1%E1%84%85%E1%85%A9.png?alt=media&amp;token=910ea7ef-2a4e-4061-afa8-94931da62f3c" 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%2FvtQe2Te9U42OXmvB9D08%2F%E1%84%87%E1%85%B5%E1%84%8B%E1%85%B2%E1%86%AF-%E1%84%89%E1%85%A6%E1%84%85%E1%85%A9.png?alt=media&amp;token=0886da36-5fcd-4dd3-8875-33cd65d5fdcc" alt=""><figcaption><p>세로</p></figcaption></figure></div>

### 3.2 모서리 모양 조절

* 갤러리 속 이미지들의 모서리를 원하는 대로 바꿀 수 있어요.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FhXf1wTXKNkJtQjbTo20e%2F%E1%84%80%E1%85%A2%E1%86%AF%E1%84%85%E1%85%A5%E1%84%85%E1%85%B5%20%E1%84%86%E1%85%A9%E1%84%89%E1%85%A5%E1%84%85%E1%85%B5.gif?alt=media&amp;token=bd52a979-7d64-4e3f-8b0b-6f09bd2d90d8" alt=""><figcaption></figcaption></figure>

* 각진 모서리 : 깔끔하고 단정한 느낌을 줘요.
* 둥근 모서리 : 부드럽고 친근한 느낌을 줄 수 있답니다.

### 3.3 테두리/여백 추가&#x20;

* 갤러리 전체나 개별 이미지에 테두리를 넣거나 주변 여백을 조절해서 더욱 깔끔하게 연출할 수 있어요.