> 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FYY9LE84dQwoJF1l8NEqf%2F%EC%BD%98%ED%85%90%EC%B8%A0_%EB%A7%81%ED%81%AC.png?alt=media&amp;token=df92cbb7-d9e4-47a2-9c80-da433aeb52ed" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FDDCcGbCwlO7yTdL1OBJy%2F%EC%BD%98%ED%85%90%EC%B8%A0_%EC%9D%B4%EB%AF%B8%EC%A7%80.png?alt=media&amp;token=1b84736e-7e85-4519-a402-bf7dadb02690" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FMj9E66Tvt4HdlzitsN8t%2F%EC%BD%98%ED%85%90%EC%B8%A0_%ED%85%8D%EC%8A%A4%ED%8A%B8.png?alt=media&amp;token=4112aab3-022e-43b1-8533-93616972ba18" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FIJyUJI7clehkfS833Sx7%2F%EC%BD%98%ED%85%90%EC%B8%A0_%EC%9C%A0%ED%8A%9C%EB%B8%8C.png?alt=media&amp;token=fa332cec-b2dc-48ea-a19a-210be808b60c" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fz72SIOqm422zhbj3TAac%2F%EC%BD%98%ED%85%90%EC%B8%A0_%EB%9D%BC%EC%9D%B8.png?alt=media&amp;token=e5f78eb8-3ea3-48d9-8ab7-d42d2ed8b538" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FMrafyGgXu0osraU9bKO1%2F%EC%BD%98%ED%85%90%EC%B8%A0_%EC%95%84%EC%9D%B4%EC%BD%98.png?alt=media&amp;token=323f6c89-d0db-4b66-b4bc-4dc9c68d3ba2" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FfisxuwZi3knIhIoRq8sM%2F%EC%BD%98%ED%85%90%EC%B8%A0_%EC%A7%80%EB%8F%84.png?alt=media&amp;token=28a1a558-eeee-48d5-a777-32c457b6acca" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FoJN8bF6ilos4JqGt7Nq0%2F%EC%BD%98%ED%85%90%EC%B8%A0_%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%A7%81.png?alt=media&amp;token=26ba5818-e5ce-444f-b654-96d7bef82cfa" 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="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FOFJnT915ld26kH09CjBq%2F%EC%BD%98%ED%85%90%EC%B8%A0_%EB%8F%84%ED%98%95.png?alt=media&amp;token=25eb1545-64c1-401b-a7cc-9ed5a5b6d3b2" 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>