# 갤러리\_라이트박스 만들기

라이트박스 갤러리는 갤러리 섹션에 추가한 이미지나 동영상을 클릭했을 때 배경을 밝거나 어둡게 처리하여 해당 내용을 돋보이게 합니다. 

간단한 설정으로 라이트박스 갤러리를 만들 수 있습니다.

### 1. 갤러리 섹션을 추가합니다.

![](https://contents.sixshop.com/thumbnails/uploadedFiles/152/default/image_1473300557227_750.png)

### 2. 갤러리 섹션의 개별 설정 패널에서 전시할 이미지나 동영상을 추가하고 필요에 따라 제목이나 설명을 입력합니다.

![](https://contents.sixshop.com/thumbnails/uploadedFiles/152/default/image_1463450175981_750.png)

설명이나 내용은 추가한 이미지나 동영상에 마우스를 올렸을 때 보이는 톱니 모양 아이콘을 클릭하여 설정합니다.

### 3. '디자인' 탭에서 '썸네일 클릭할 때' 설정을 '팝업창으로 확대하기'로 선택합니다.

![](https://contents.sixshop.com/thumbnails/uploadedFiles/152/default/image_1463451330692_750.png)

기타 디자인 설정들도 자유롭게 변경합니다.

### 4. \[스타일 편집 > 갤러리 섹션]에서 스타일과 글꼴 디자인을 설정합니다.

![](https://contents.sixshop.com/thumbnails/uploadedFiles/152/default/image_1463450185253_750.png)

### 5. 갤러리 스타일은 아래 예시를 참고하세요.

#### 5-1. 밝은

![](https://contents.sixshop.com/thumbnails/uploadedFiles/152/default/image_1463452185476_750.png)

![](https://contents.sixshop.com/uploadedFiles/152/default/image_1463450305215.gif)

라이트박스 배경과 제목 및 설명이 적힌 박스가 투명 감 있는 흰색, 글자는 검은색입니다. 위의 예시는 썸네일에 마우스를 올렸을 때, 제목과 설명이 보여지게 설정해두었기 때문에 썸네일 배경 색을 50% 투명도의 흰색으로 설정했습니다.

#### 5-2. 어두운

![](https://contents.sixshop.com/thumbnails/uploadedFiles/152/default/image_1463452205171_750.png)

![](https://contents.sixshop.com/uploadedFiles/152/default/image_1463450346337.gif)

라이트박스 배경과 제목 및 설명이 적힌 박스가 투명 감 있는 검은색, 글자는 흰색입니다. 위의 예시는 썸네일에 마우스를 올렸을 때, 제목과 설명이 보여지게 설정해두었기 때문에 썸네일 배경 색을 20% 투명도의 검은색으로 설정했습니다.

### 관련된 안내서 보기

{% content-ref url="/pages/-M3cf-Uxl4tR9YVpaNO7" %}
[갤러리\_슬라이드형 만들기](/ect_01/gallery_slide.md)
{% endcontent-ref %}

{% content-ref url="/pages/-M3cf-cDtA6WrMts3gn1" %}
[갤러리\_컬렉션 버튼 만들기](/ect_01/gallery_collection.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.sixshop.com/ect_01/gallery_lightbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.