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

# 콘텐츠 요소

큐샵 링크 사이트를 만들기 위해 이미지 아이콘 텍스트 등 다양한 콘텐츠 요소를 제공하고 있습니다. \
다양한 콘텐츠를 활용하여, 여러분들만의 프로필 링크를 만들 수 있습니다.

## 1. 링크

버튼 형식의 링크 요소를 추가하여, 링크의 이름 및 URL을 설정할 수 있습니다.

{% hint style="info" %}
링크의 기본 배경색은 [\[디자인 > 테마\]](/customer_support/qshoplink/editor/design.md#id-1)의 button의 색상을 기본 텍스트 색상은 Text sub의 색상을 따라갑니다.
{% endhint %}

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

<table data-header-hidden><thead><tr><th width="153">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>이름(필수)</strong></td><td>링크에 적용 될 이름을 입력합니다.</td></tr><tr><td><strong>URL(선택)</strong></td><td><p>URL을 입력하면 클릭 시 해당 URL로 이동합니다.</p><ul><li>http:// 입력 된 URL로 이동이 됩니다.</li><li>https:// 입력 된 URL로 이동이 됩니다</li><li>mailto: 해당 주소로 메일 발송을 위해 지정 된 포털 사이트로 이동이 됩니다.</li><li>tel: 입력 된 연락처 정보로 전화 연결을 합니다.</li></ul></td></tr><tr><td><strong>텍스트 크기</strong></td><td><p>입력한 이름의 텍스트 크기를 선택합니다.</p><ul><li>XS S M L XL 중 선택 가능</li></ul></td></tr><tr><td><strong>텍스트 굵기</strong></td><td><p>입력한 이름의 텍스트 굵기를 선택합니다.</p><ul><li>Thin / Normal / Bold 중 선택 가능</li></ul></td></tr><tr><td><strong>색상</strong></td><td>링크의 색상을 선택합니다.</td></tr></tbody></table>

## 2. 이미지

이미지를 추가하여, 다양한 디자인을 할 수 있습니다.

<figure><img src="/files/2IlqRmT8DaBdvjoVzrVM" 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>미리보기</strong></td><td>미리보기 부분을 클릭하여, PC의 이미지를 선택할 수 있습니다.</td></tr><tr><td><strong>URL(선택)</strong></td><td><p></p><p>URL을 입력하면 클릭 시 해당 URL로 이동합니다.</p><ul><li>http:// 입력 된 URL로 이동이 됩니다.</li><li>https:// 입력 된 URL로 이동이 됩니다</li><li>mailto: 해당 주소로 메일 발송을 위해 지정 된 포털 사이트로 이동이 됩니다.</li><li>tel: 입력 된 연락처 정보로 전화 연결을 합니다.</li></ul></td></tr><tr><td><strong>프레임</strong></td><td>뷰포트를 통해 보여지는 이미지의 프레임을 선택합니다.</td></tr></tbody></table>

## 3.텍스트

텍스트를 추가하여, 링크 내 브랜드 소개 및 설명등을 기재할 수 있습니다.

{% hint style="info" %}
텍스트의 기본 색상은 [\[디자인 > 테마\]](/customer_support/qshoplink/editor/design.md#id-1)의 Text main의 색상을 따라갑니다.
{% endhint %}

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

<table data-header-hidden><thead><tr><th width="140">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>입력창</strong></td><td>뷰포트를 통해 보여질 내용을 입력합니다.</td></tr><tr><td><strong>텍스트 크기</strong></td><td><p>입력한 이름의 텍스트 크기를 선택합니다.</p><ul><li>XS S M L XL 중 선택 가능</li></ul></td></tr><tr><td><strong>텍스트 굵기</strong></td><td><p>입력한 이름의 텍스트 굵기를 선택합니다.</p><ul><li>Thin / Normal / Bold 중 선택 가능</li></ul></td></tr><tr><td><strong>좌우 정렬</strong></td><td><p>텍스트의 정렬 위치를 선택합니다.</p><ul><li>Left / Center / Right 중 선택 가능</li></ul></td></tr></tbody></table>

## 4.Youtube

유튜브(YouTube)에 업로드한 동영상 주소(URL)를 입력하여동영상을 재생할 수 있습니다.

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

<table data-header-hidden><thead><tr><th width="121">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>주소</strong></td><td>업로드한 동영상 주소(URL)를 입력합니다.</td></tr><tr><td><strong>자동재생</strong></td><td>영상의 자동 재생 여부를 설정합니다.</td></tr><tr><td><strong>라운드</strong></td><td>뷰포트를 통해 보여지는 영상의 라운드를 설정합니다.</td></tr></tbody></table>

## 5. 라인

콘텐츠와 콘텐츠를 구분짓는 용도로 사용이 됩니다.

{% hint style="info" %}
라인의 기본색상은 [\[디자인 > 테마\]](/customer_support/qshoplink/editor/design.md#id-1)의 button의 색상을 따라갑니다.
{% endhint %}

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

<table data-header-hidden><thead><tr><th width="123">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>두께</strong></td><td><p>라인의 두께를 선택합니다.</p><ul><li>Thin / Normal / Bold 중 선택 가능</li></ul></td></tr><tr><td><strong>색상</strong></td><td>라인의 색상을 선택합니다.</td></tr></tbody></table>

## 6. 아이콘

다양한 아이콘을 활용하여 페이지 디자인을 할 수 있습니다.

{% hint style="info" %}
아이콘의 기본색상은 [\[디자인 > 테마\]](/customer_support/qshoplink/editor/design.md#id-1)의 Text sub의 색상을 따라갑니다.
{% endhint %}

<figure><img src="/files/4uCo5667MJJnjzO7F6B0" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="204">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>아이콘 더보기/숨기기</strong></td><td><p>아이콘 더보기를 통해 변경할 아이콘 디자인을 선택합니다.</p><ul><li>더보기 클릭 시 아이콘 확인 가능</li></ul></td></tr><tr><td><strong>URL(선택)</strong></td><td><p>URL을 입력하면 클릭 시 해당 URL로 이동합니다.</p><ul><li>http:// 입력 된 URL로 이동이 됩니다.</li><li>https:// 입력 된 URL로 이동이 됩니다</li><li>mailto: 해당 주소로 메일 발송을 위해 지정 된 포털 사이트로 <br>이동이 됩니다.</li><li>tel: 입력 된 연락처 정보로 전화 연결을 합니다.</li></ul></td></tr><tr><td><strong>색상</strong></td><td>아이콘의 색상을 선택합니다.</td></tr></tbody></table>

## 7. 지도

사용자에게 위치 정보를 알려주고자 할 때 사용합니다.&#x20;

{% hint style="info" %}
구글 지도를 지원 하며 별도의 API 설정 없이 쉽게 사용을 하실 수 있습니다.
{% endhint %}

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

<table data-header-hidden><thead><tr><th width="119">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>주소</strong></td><td>지도에 표시를 할 주소를 입력합니다.</td></tr><tr><td><strong>언어</strong></td><td><p>지도를 표시할 언어를 선택합니다.</p><ul><li>KO / EN 중 선택 가능</li></ul></td></tr><tr><td><strong>확대</strong></td><td>뷰포트에 보여지는 지도의 확대 비율을 선택합니다.</td></tr><tr><td><strong>라운드</strong></td><td>뷰포트를 통해 보여지는 지도의 라운드를 설정합니다.</td></tr></tbody></table>

## 8. 스크롤링

스크롤링 요소를 사용하면, 입력한 텍스트가 자동으로 스크롤이 됩니다. \
여러 텍스트를 입력하여 사용자에게 주제에 맞는 정보 또는 이벤트 정보를 노출하는 용도로 사용이 \
가능합니다.

{% hint style="info" %}
스크롤링의 기본 색상은 [\[디자인 > 테마\]](/customer_support/qshoplink/editor/design.md#id-1)의 Text main의 색상을 따라갑니다.
{% endhint %}

<figure><img src="/files/43bb5afxkKwAkqVCJrr2" alt=""><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="161">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>입력창</strong></td><td>뷰포트를 통해 보여질 내용을 입력합니다.</td></tr><tr><td><strong>텍스트 크기</strong></td><td><p>스크롤링 텍스트의 크기를 선택합니다.</p><ul><li>H1 H2 H3 H4 Body 중 선택 가능</li></ul></td></tr><tr><td><strong>텍스트 굵기</strong></td><td><p>입력한 이름의 텍스트 굵기를 선택합니다.</p><ul><li>Thin / Normal / Bold 중 선택 가능</li></ul></td></tr></tbody></table>

## 9. 도형

버튼 형식의 링크 요소를 추가하여, 링크의 이름 및 URL을 설정할 수 있습니다.

{% hint style="info" %}
도형의 기본색상은 [\[디자인 > 테마\]](/customer_support/qshoplink/editor/design.md#id-1)의 button의 색상을 따라갑니다.
{% endhint %}

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

<table data-header-hidden><thead><tr><th width="194">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설명</td></tr><tr><td><strong>도형 더보기/숨기기</strong></td><td><p>도형 더보기를 통해 변경할 도형 디자인을 선택합니다.</p><ul><li>더보기 클릭 시 아이콘 확인 가능</li></ul></td></tr><tr><td><strong>URL(선택)</strong></td><td><p>URL을 입력하면 클릭 시 해당 URL로 이동합니다.</p><ul><li>http:// 입력 된 URL로 이동이 됩니다.</li><li>https:// 입력 된 URL로 이동이 됩니다</li><li>mailto: 해당 주소로 메일 발송을 위해 지정 된 포털 사이트로 이동이 됩니다.</li><li>tel: 입력 된 연락처 정보로 전화 연결을 합니다.</li></ul></td></tr><tr><td><strong>도형 색상</strong></td><td>도형의 색상을 선택합니다.</td></tr><tr><td><strong>테두리 굵</strong>기</td><td><p>테두리 ON 설정 시 테두리의 굵기를 선택합니다.</p><ul><li>Thin / Normal / Bold 중 선택 가능</li></ul></td></tr><tr><td><strong>테두리 색상</strong></td><td>테두리 ON 설정 시 테두리 색상을 설정 합니다.</td></tr><tr><td><strong>프레임</strong></td><td>뷰포트를 통해 보여지는 이미지의 프레임을 선택합니다.</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.qshop.ai/customer_support/qshoplink/editor/contents/contentslist.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.