> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/qshoplink/editor/design.md).

# 디자인

디자인 설정에 대해 알아봅니다.

디자인 설정은 에디터에 적용이 되는 공통 사항으로 큐샵 에디터의 LNB영역과 같은 역할을 하게 됩니다. \
공통 색상, 그리드 간격 폰트 등을 선택하여 디자인을 할 수 있으며 폰트의 크기, 굵기 등은 각각의 콘텐츠 요소를 통해 설정을 할 수 있습니다.

## 1. 테마

콘텐츠 및 뷰포트의 기본 색상을 설정합니다. 공통적으로 적용이 될 배경, 버튼, 텍스트의 색상을 지정할 수 있으며 테마셔플을 통해 임의 색상을 지정할 수 있습니다.\
테마셔플의 이전/다음 테마를 통해 임의로 선택 된 테마들을 다시 확인 할 수 있습니다.

{% hint style="info" %}
요소에 따라 일부 개별적으로 설정이 가능합니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FfaMYWAoughjfdzjcq11J%2F%EB%94%94%EC%9E%90%EC%9D%B8_%ED%85%8C%EB%A7%88.png?alt=media&amp;token=ef8d63a7-201b-4db8-be09-222feedb755c" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="141">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>Background</strong></td><td><ul><li>COLOR - FLAT<br>배경에 하나의 색상이 적용 됩니다.</li><li>COLOR - GRADIENT<br>배경에 그라데이션 효과로 색상이 적용 됩니다.</li><li>IMAGE<br>PC에 저장이 된 이미지를 적용합니다.</li></ul></td></tr><tr><td><strong>button</strong></td><td>링크 / 도형 / 라인의 기본 색상을 설정합니다.</td></tr><tr><td><strong>Text main</strong></td><td>텍스트 / 스크롤링의 기본 색상을 설정합니다.</td></tr><tr><td><strong>Text sub</strong></td><td>링크 콘텐츠의 텍스트 / 아이콘의 기본 색상을 설정합니다.</td></tr><tr><td><strong>테마셔플</strong></td><td>색상을 임의로 지정합니다<br>셔플 후 이전 테마 / 다음 테마를 통해 적용이 된 색상을 확인할 수 있습니다.</td></tr></tbody></table>

## 2. Gap

뷰포트에 적용이 되는 텐츠 사이의 간격을 설정합니다.\
최소 0px \~ 최대 10px 까지 설정이 가능합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FIpzbu6Kus519538g4yd9%2F%EB%94%94%EC%9E%90%EC%9D%B8_%EA%B0%84%EA%B2%A9.png?alt=media&amp;token=3b6e9732-d578-49fe-a0db-a8123a212b81" alt=""><figcaption></figcaption></figure>

## 3. Font

사이트에 적용이 되는 폰트를 선택합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FiDFhibPGxcxyB6yYvT53%2F%EB%94%94%EC%9E%90%EC%9D%B8_%ED%8F%B0%ED%8A%B8.png?alt=media&amp;token=f931c9ed-0d1f-47ec-b0c4-d4998bd9f169" alt=""><figcaption></figcaption></figure>

## 4. Fill / Outline

링크 콘텐의 프레임 모양 및 배경색상 여부를 선택합니다.\
투명 디자인을 선택하게 되면, 색상은 배경이 아닌 테두리에 적용이 됩니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FlQ5FZ6K4mR4le1bLY6bP%2F%EB%94%94%EC%9E%90%EC%9D%B8_fill.png?alt=media&amp;token=2302ac0a-d6b8-48e2-a829-4be70ee09094" alt=""><figcaption></figcaption></figure>

## 5. Shodow

링크 콘텐츠의 그림자 여부 및 디자인을 선택합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FkhgUSyc49pKYpBkgMiPk%2F%EB%94%94%EC%9E%90%EC%9D%B8_%EA%B7%B8%EB%A6%BC%EC%9E%90.png?alt=media&amp;token=ad997662-07b9-405c-b356-8252aa895a85" alt=""><figcaption></figcaption></figure>