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

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

<div align="center"><figure><img src="/files/e1i630niFcq0suR5YqZB" alt="" width="180"><figcaption><p>나열하기</p></figcaption></figure></div>

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

<div align="center"><figure><img src="/files/J0PuJ8rUBLisTNcvisA3" alt="" width="363"><figcaption><p>넘겨보기</p></figcaption></figure></div>

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

<div align="center"><figure><img src="/files/3IFP8yT7udil1RJVjaEd" alt="" width="375"><figcaption><p>넘겨보기 옵션 '내비게이션'</p></figcaption></figure> <figure><img src="/files/aGA6G3Ri03530BMmUECD" alt="" width="375"><figcaption><p>넘겨보기 옵션 '자동 넘김'</p></figcaption></figure></div>

* 그리드 : 이미지들이 바둑판처럼 가지런히 배열되는 형태로, 많은 이미지를 깔끔하게 보여줄 때 유용해요.

<div><figure><img src="/files/2Tlbf0nRVft10G74ZxFb" alt=""><figcaption><p>그리드 2단</p></figcaption></figure> <figure><img src="/files/S657Ju1s3DIOXQIDuYWW" alt=""><figcaption><p>그리드 3단</p></figcaption></figure> <figure><img src="/files/GiGzL7vYvmXYdhuXSzGL" alt=""><figcaption><p>그리드 4단</p></figcaption></figure></div>

***

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

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

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

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

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

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

<div><figure><img src="/files/sDo98PahiGwYeP0lzXIZ" alt=""><figcaption><p>원본</p></figcaption></figure> <figure><img src="/files/JJoX3P2T8ldpbuYlFgqm" alt=""><figcaption><p>1:1</p></figcaption></figure> <figure><img src="/files/EGPpB3fT0gfVBggiCpiD" alt=""><figcaption><p>가로</p></figcaption></figure> <figure><img src="/files/54Hy4oe48P05sHSUB47X" alt=""><figcaption><p>세로</p></figcaption></figure></div>

### 3.2 모서리 모양 조절

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

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

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

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

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