# 콘텐츠

## 콘텐츠란?

콘텐츠는 페이지 디자인에 사용되는 이미지, 텍스트, 상품목록 등의 요소를 뜻합니다. 사이트 목적에 따라 다양한 콘텐츠를 사용하여 디자인을 할 수 있습니다.

## 1. 콘텐츠 사용법

### 1-1. 콘텐츠 추가하기

1. 속성 패널의 **\[+콘텐츠 추가]** 버튼을 클릭하여 콘텐츠 목록을 확인합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FPZUZYtaORjFAVdxmX5EJ%2F%EC%BD%98%ED%85%90%EC%B8%A0%20%EC%B6%94%EA%B0%80.png?alt=media&#x26;token=0b179c17-d0da-4819-9a4a-b623ce0a15f8" alt=""><figcaption></figcaption></figure>
2. 추가하려는 콘텐츠를 클릭 합니다.     &#x20;

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FFlCndsaWgueVrjaHhz39%2F%EC%BD%98%ED%85%90%EC%B8%A0%20%EC%B6%94%EA%B0%802.png?alt=media&#x26;token=720e3c1d-9f9c-4bc6-8460-663de1c4a7a5" alt=""><figcaption></figcaption></figure>
3. 뷰포트를 통해 추가 된 콘텐츠를 확인합니다.

### 1-2. 콘텐츠 배치하기

추가한 콘텐츠의 크기를 조절하고 이동시켜 원하는 위치로 배치할 수 있습니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FUOxW5Mf1f9MqWcQFF6DN%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94.gif?alt=media&#x26;token=7bed8794-6437-460d-b4b5-2b7219e0d219" alt=""><figcaption></figcaption></figure>

**콘텐츠\_크기 조절**

1.추가한 콘텐츠의 대각선을 클릭합니다. \
2.드래그&드랍으로 크기를 조절합니다. \
3.콘텐츠 오른쪽 아래 콘텐츠의 비율을 확인합니다.

**콘텐츠\_이동하기**

1.이동하려는 콘텐츠를 클릭합니다. \
2.드래그&드랍으로 섹션의 원하는 영역으로 이동합니다.

### 1-3. 콘텐츠 설정하기

추가한 콘텐츠 요소를 설정할 수 있습니다.\
각 콘텐츠의 개별 링크 설정 및 자세한 내용은 [콘텐츠 요소](https://help.qshop.ai/customer_support/qshoplink/editor/contents/contentslist) 가이드를 참고 부탁드립니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FOvkAwWVz9Ob7SvjKsFTc%2F%ED%80%B5%EB%A9%94%EB%89%B4.png?alt=media&#x26;token=5e041361-54af-4d3f-8346-08ba54f75de3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
모든 콘텐츠의 디자인 설정은 속성패널을 통해 설정이 가능합니다.
{% endhint %}

<table data-header-hidden><thead><tr><th width="112">버리는</th><th>항목</th></tr></thead><tbody><tr><td>항목</td><td>설정</td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FqVFsukltYTThxcG3LLq7%2F%EC%95%9E%EC%9C%BC%EB%A1%9C.png?alt=media&#x26;token=0015c30b-04cd-4bd9-9096-c2e6423808e0" alt=""></td><td><strong>앞으로 가져오기</strong><br>콘텐츠의 위치를 앞으로 이동합니다.</td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FqbVtWsnaGo5jG86DBU4Z%2F%EB%92%A4%EB%A1%9C.png?alt=media&#x26;token=56d498b9-9b62-4a34-87ff-8d2ca7d20384" alt=""></td><td><strong>뒤로 보내기</strong><br>콘텐츠의 위치를 뒤로 이동합니다.</td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F93SgvCr3jTFxfU8hg6v7%2F%EB%B3%B5%EC%A0%9C.png?alt=media&#x26;token=36067221-703c-451d-ae81-5ad4197bf49e" alt=""></td><td><strong>복제</strong><br>콘텐츠를 복제합니다.</td></tr><tr><td><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F79QspCW7CajiPMxHx4Kp%2F%EC%82%AD%EC%A0%9C.png?alt=media&#x26;token=8633b346-d055-4c9e-9249-5d20fb1532d7" alt=""></td><td><strong>삭제</strong><br>해당 콘텐츠를 삭제합니다.</td></tr></tbody></table>

### 1-4. 콘텐츠 복제하기

SNS아이콘 등의 콘텐츠를 반복적으로 여러 위치에 배치하려는 경우 사용합니다.

콘텐츠 복제 시 설정을 한 내용(색상, URL등)이 모두 복제가 됩니다.

1. 복제하려는 콘텐츠를 클릭합니다.
2. 퀵 메뉴의 복제하기를 클릭합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FdlZSCvgSjwaiGRCVoXFf%2F%EC%BD%98%ED%85%90%EC%B8%A0%20%EB%B3%B5%EC%A0%9C2.png?alt=media&#x26;token=3c7a69b3-aed3-4d73-b07d-8819055cb62d" alt=""><figcaption></figcaption></figure>
3. 복제 된 콘텐츠를 확인합니다.

{% hint style="warning" %}
복제 된 콘텐츠는 기존 콘텐츠와 겹쳐져서 생성이 되기에, 복제 후 콘텐츠 배치를 해야합니다.
{% endhint %}

### 1-5. 콘텐츠 삭제하기

추가한 콘텐츠를 삭제합니다.\
콘텐츠는 뷰포트를 통한 삭제 그리고 속성패널을 통한 삭제를 할 수 있습니다.

{% hint style="danger" %}
삭제가 된 콘텐츠는 복구가 불가능합니다.
{% endhint %}

#### 뷰포트를 통해 삭제하기

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fc8zQ4gwX8jRX2i5NrzAQ%2F%EC%BD%98%ED%85%90%EC%B8%A0%20%EC%82%AD%EC%A0%9C2.png?alt=media&#x26;token=1ecb031d-c942-4332-8840-1b31d51c6130" alt=""><figcaption></figcaption></figure>

1. 뷰포트에서 삭제하려는 컨텐츠를 클릭합니다.
2. 퀵 메뉴의 삭제 버튼을 클릭합니다.

{% hint style="danger" %}
뷰포트를 통해 삭제 시 얼럿을 통한 확인 과정없이 **즉시 삭제**가 됩니다.
{% endhint %}

#### 속성패털을 통해 삭제하기

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FfF3aqtGvNpMtx5pjG45d%2F%EC%82%AD%EC%A0%9C_%EC%86%8D%EC%84%B1%ED%8C%A8%EB%84%90.png?alt=media&#x26;token=85d378c6-b01c-4c45-9385-6c70604a473e" alt=""><figcaption></figcaption></figure>

1. 뷰포트에서 삭제하려는 컨텐츠를 클릭합니다.
2. 이동이 된 속성 패널 오른쪽 위 삭제 아이콘을 클릭 합니다.
3. 얼럿의 확인 버튼을 클릭합니다.