# 속성패널

## 속성패널이란?

에디터 오른쪽에 위치한 속성패널을 활용하여 섹션 및 콘텐츠의 기본 디자인 속성을 설정할 수 있습니다.

속성패널의 사이트 설정이 되어있더라도 섹션과 콘텐츠 각각의 요소에 배경색, 여백, 라운드 등의 기본 속성 설정 및 애니매이션, 클릭 이벤트와 같은 고급 설정을 하실 수 있습니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FdYWQybLihpt3Q0lA3WJy%2F1_%EC%86%8D%EC%84%B1%ED%8C%A8%EB%84%90.png?alt=media&#x26;token=3f0b4635-80d2-48e5-a1ec-53faff784746" alt=""><figcaption></figcaption></figure>

## 1. 사이트

페이지에 공통으로 적용이 될 섹션의 너비, 간격 텍스트의 글꼴과 크기, 기본 배경색, 버튼 및 도형의 디자인을 설정할 수 있습니다.

#### 설정 방법

1. 에디터의 오른쪽 위 \[사이트 전체 설정]아이콘을 클릭합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FFuvkuxsX5VIMdSj2FnT9%2F2_%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EC%A0%84%EC%B2%B4%20%EC%84%A4%EC%A0%95.png?alt=media&#x26;token=f713b5df-01ec-48d7-a0ef-88e475cc5536" alt=""><figcaption></figcaption></figure>
2. 오른쪽 속성 패널의 기본, 컬러/폰트, 레이아웃 중 설정을 하려는 항목을 선택합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FlDooAHc5ytJaRKu5V5qV%2F3_%EA%B3%B5%ED%86%B5%20%ED%8C%A8%EB%84%90.png?alt=media&#x26;token=62a60039-72cb-4f7f-a9d5-9f68ebc7d698" alt=""><figcaption></figcaption></figure>
3. 아래 상세가이드를 참고하여 설정을 합니다.

### 1-1. 기본

모바일 스와이프 기능 및 플로팅 콘텐츠 기능의 사용 여부를 설정 할 수 있습니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FWAtp317zQ2oK8umYvM5b%2F4_%EA%B8%B0%EB%B3%B8%20%ED%8C%A8%EB%84%90.png?alt=media&#x26;token=0978983b-7202-40dd-8ff8-e6200e2dfe12" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="169">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>모바일 스와이프 설정</strong></td><td><p>모바일 기기에서 화면을 가로로 스크롤하여 페이지 이동을 할 수 있습니다.</p><ul><li>해당 기능은 모바일 기기에서만 작동을 합니다.</li></ul></td></tr><tr><td><strong>플로팅 콘텐츠</strong></td><td>사이트 오른쪽에 적용이 되어 따라 오는 플로팅 콘텐츠 설정을 할 수 있습니다.<br>자세한 내용은 [<a href="../../tip/fixed/floating">플로팅 콘텐츠</a>] 가이드를 참고 부탁드립니다.</td></tr></tbody></table>

### 1-2. 색상/폰트

사이트에 공통으로 적용이 되는 색상 과 폰트를 설정할 수 있습니다.

자세한 내용은 아래 각 항목의 설정 방법을 참고 해주세요.

<details>

<summary>색상</summary>

사이트의 콘텐츠에 공통으로 적용이되는 배경색, 텍스트 색상 등을 설정합니다.

다양한 컬러 팔레트 중 선택하여 사용을 하실 수 있으며, 아래 표를 참고하여 위치에 맞는 컬러값을 개별적으로 수정하여 사용을 할 수 있습니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FaqgAMQL78qKE4ObBVpOL%2F5_%EC%BB%AC%EB%9F%AC.png?alt=media&#x26;token=628d6538-a06d-42ec-90c2-778125a97f85" alt=""><figcaption></figcaption></figure>

컬러 팔레트는 크게 글자색과 배경색의 영역으로 나뉘게 되며, 총 7가지 색상으로 나눠 지정이 가능합니다.

{% hint style="info" %}
각 요소마다 개별적으로 색상 수정이 가능합니다.&#x20;
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FNMjcPxB3gXVbUYqkSeNK%2F%EC%BB%AC%EB%9F%AC%EA%B0%92%20mk4.png?alt=media&#x26;token=3d415238-efd9-4468-b93f-afe42e91fcd0" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="170">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>주요 글자 컬러</strong></td><td>섹션 본문의 배경 색상을 지정합니다.</td></tr><tr><td><strong>브랜드 배경 컬러</strong></td><td>헤더 섹션의 배경 색상, 페이지 메뉴 블록의 글자색을 지정합니다.</td></tr><tr><td><strong>강조 컬러</strong></td><td>푸터 섹션의 배경색상, 아이콘, 버튼 블록의 색상을 지정합니다.</td></tr><tr><td><strong>보조 컬러</strong></td><td>상품목록, 상품슬라이드 블록의 할인율 표시 색상을 지정합니다.</td></tr><tr><td><strong>주요 글자 컬러</strong></td><td>페이지 메뉴 블록의 활성 상태, 라인, 도형, 텍스트 블록 및 입력폼 등의<br>텍스트에 대한 색상을 지정합니다.</td></tr><tr><td><strong>브랜드 글자 컬러</strong></td><td>페이지 메뉴 블록의 메인/서브 메뉴 색상을 지정합니다.</td></tr><tr><td><strong>보조 글자 컬러</strong></td><td>버튼/입력폼 등의 버튼 위에 적용이 되는 텍스트 색상과 <br>상품 목록/슬라이드에 적용되는 “정가” 표시 색상을 지정합니다.</td></tr></tbody></table>

### 설정방법

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FMWVO6yH7EZsi9qoUKhKy%2F6_%EC%BB%AC%EB%9F%AC%20%EC%84%A4%EC%A0%95.png?alt=media&#x26;token=e96139b0-47de-4ab6-bd14-002f8d9bf1d0" alt=""><figcaption></figcaption></figure>

1. 디자인 에디터에 접속합니다 ( [에디터 접속하기](https://help.qshop.ai/customer_support/guide/design/..#undefined-1) )
2. 캔버스 영역을 클릭 한 후 오른쪽 속성패널의 컬러 항목을 클릭합니다.
3. 현재 적용 된 컬러 팔래트 중 색상 설정을 원하는영역의 설정 버튼을 클릭하여 색상표를 통해 색상을 지정하시거나, 색상값을 입력하여 설정합니다.

</details>

<details>

<summary> 폰트</summary>

페이지에 공통으로 적용이되는 글꼴, 크기 등을 설정합니다. 글꼴을 미리 지정하여, 페이지 디자인 시 보다 편하게 사용이 가능합니다.

{% hint style="info" %}
각 콘텐츠마다 개별적으로 글꼴 수정이 가능합니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F54SX0qP9l1wlseCherqi%2F7_%ED%85%8D%EC%8A%A4%ED%8A%B8.png?alt=media&#x26;token=c8c16085-6cfb-4a98-8b74-19b4c67425e4" alt=""><figcaption></figcaption></figure>

| 항목 설명                                                                                                                                 |
| ------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>기본 텍스트 블록</strong><br>블록 제목1 \~ 제목4, 본문에 적용이 될 텍스트를 설정합니다.</p>                                                             |
| <p><strong>사용자 텍스트 블록</strong><br>사용자 텍스트 추가 <strong>\[ + ]</strong> 버튼을 통해 글꼴 생성이 가능합니다.</p><ul><li>기본 글꼴 이외 최대 4개까지 생성 가능</li></ul> |

### 설정방법

**기본 텍스트 블록**

1. 디자인 에디터에 접속합니다 ( [에디터 접속하기](https://help.qshop.ai/customer_support/guide/design/..#undefined-1) )
2. 캔버스 영역을 클릭 한 후 오른쪽 속성패널의 폰트 항목을 클릭합니다.
3. 설정하려는 항목에 마우스를 올린 후 오른쪽 끝 **\[설정 아이콘]**&#xC744; 클릭합니다.
4. 글꼴 및 크기, 자간 등을 설정합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FpS1117MOz1bIa89KwJRY%2F8_%ED%85%8D%EC%8A%A4%ED%8A%B8%20%EC%84%A4%EC%A0%95.png?alt=media&#x26;token=5763de1b-4905-429b-b289-4606baae6ec7" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
기본 텍스트 블록은 이름 변경 및 목록 삭제가 불가능 합니다.
{% endhint %}

**사용자 글꼴**

1. **\[사용자 텍스트 추가]** 버튼을 클릭합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FxKkQSKEEJQ2RYNOm9EQT%2F9_%EC%82%AC%EC%9A%A9%EC%9E%90%20%ED%85%8D%EC%8A%A4%ED%8A%B8.png?alt=media&#x26;token=a1e0bc6d-a000-4f70-9f57-9f19a5199b79" alt=""><figcaption></figcaption></figure>
2. 추가 된 텍스트에 마우스를 올린 후 오른쪽 끝 **\[설정 아이콘]**&#xC744; 클릭합니다.
3. 관리를 위한 이름등록을 한 후 서체 크기 자간 등을 설정합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fkai7a9KQUFROIVBVXefR%2F10_%EC%82%AC%EC%9A%A9%EC%9E%90%20%ED%85%8D%EC%8A%A4%ED%8A%B8%20%EC%84%A4%EC%A0%95.png?alt=media&#x26;token=b6264886-7a12-4edd-83b3-26ca4d505a20" alt=""><figcaption></figcaption></figure>

</details>

### 1-3. 레이아웃

섹션에 공통으로 적용이 되는 전체 너비와 격자 간격, 모양의 설정을 할 수 있습니다.&#x20;

자세한 내용은 아래 각 항목의 설정 방법을 참고 해주세요.

<details>

<summary>간격</summary>

섹션에 공통으로 적용이 되는 전체 너비와 격자 간격을 조절합니다.

전체 너비에 따라 작업 영역와 여백 영역이 갖는 크기가 달라지게 되며, 격자 간격에 따라 블록 사이의 간격이 달라지게 됩니다.

{% hint style="danger" %}
특정 섹션의 간격 및 너비를 개별 설정하는것은 불가능합니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F1ljSoDf33ucK3Iga5lbf%2F11_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83_%EA%B0%84%EA%B2%A9.png?alt=media&#x26;token=137d5331-874e-444d-89ca-2ef8d32e3776" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                      |
| ------------------------------------------------------------------------------------------ |
| <p><strong>전체 너비</strong><br>섹션의 전체 너비를 설정합니다.<br>800 \~ 1920px 내로 설정이 가능합니다.</p>          |
| <p><strong>격자 간격</strong><br>격자 간의 간격을 설정합니다.<br>격자 간격이 0px일 경우 블록과 블 사이 간격이 없어지게 됩니다.</p> |

#### 설정 방법

1. 디자인 에디터에 접속합니다 ( [에디터 접속하기](https://help.qshop.ai/customer_support/guide/design/..#undefined-1) )
2. 캔버스 영역을 클릭 한 후 오른쪽 속성패널의 레이아웃 항목을 클릭합니다.
3. 전체 너비 / 격자 간격의 토글을 드래그&드랍 방식으로 px값을 설정합니다.
   * px값을 직접 입력하여 설정을 할 수 있습니다.

</details>

<details>

<summary> 격자 그리드</summary>

섹션의 격자 그리드 표시 여부를 설정할 수 있습니다.

{% hint style="danger" %}
특정 섹션의 격자 그리드 표시를 개별 설정하는것은 불가능합니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FD7v4DyDU81FeU0cGk6dc%2F%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83_%EA%B2%A9%EC%9E%90%20%EA%B7%B8%EB%A6%AC%EB%93%9C.png?alt=media&#x26;token=49f63690-8cca-4da5-b6aa-6e63ca2d066f" alt=""><figcaption></figcaption></figure>

섹션은 가로로 총 50칸의 그리드가 존재하며 **\[간격]** 가이드를 참고하여 그리드의 너비 및 간격 수정이 가능합니다.\
\
기본적으로 섹션의 그리드는 블록을 드래그할 때 보이며, 격자 그리드 토글을 활성화하게 되면, 섹션 배경에 그리드가 표시 됩니다.\\

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F6K9Zct9dI6kanVzFGGlD%2F%EA%B2%A9%EC%9E%90%20%EA%B7%B8%EB%A6%AC%EB%93%9C.png?alt=media&#x26;token=5828575e-2acb-4126-a875-e45e39bd83ec" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>모양</summary>

콘텐츠 블록 중 버튼, 입력폼, 미디어의 모양을 설정할 수 있습니다.

{% hint style="danger" %}
라운딩, 원형 스타일 선택 시 사각 형태의 콘텐츠 구성은 불가능합니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FzfHiaEeRBPcIGpKmP5cC%2F12_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%20%EB%AA%A8%EC%96%91.png?alt=media&#x26;token=cf28b616-c024-4931-9f55-df88e84e7fe2" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                  |
| ------------------------------------------------------ |
| <p><strong>버튼</strong><br>모든버튼 모양의 라운드 설정을 합니다.</p>    |
| <p><strong>입력폼</strong><br>입력폼 콘텐츠의 라운 설정을 합니다.</p>    |
| <p><strong>미디어</strong><br>모든 미디어 콘텐츠의 라운 설정을 합니다.</p> |

</details>

## 2. 섹션

배경, 여백 등 기본 속성 설정을 섹션 마다 개별적으로 설정이 가능합니다.

{% hint style="warning" %}
각 항목의 사용안함 선택을 하면, 설정이 초기화 됩니다.
{% endhint %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F5viiztvFeO68aGtwvTe0%2F13_%EC%84%B9%EC%85%98.png?alt=media&#x26;token=c3b73667-f41d-495c-8bc1-62f6e2c996fc" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="101">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>정보</strong></td><td><p>섹션 ID를 확인할 수 있습니다.</p><ul><li>복사 아이콘을 클릭하여 섹션 ID를 복사 할 수 있습니다.</li><li>복사하기 단축키(Ctrl + C)통해 섹션 ID를 복사 할 수 있습니다.</li></ul></td></tr><tr><td><strong>배경</strong></td><td><p>색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다. </p><ul><li>% 조절을 통해 투명도를 설정합니다.</li></ul><hr><p>이미지 : 배경에 이미지를 적용합니다.</p><ul><li>흐림 : 이미지에흐림 효과를 적용합니다</li><li>오버레이 : 이미지에 색상을 덮어씌워 표현을 합니다. <br>%가 높을 수록 색상이 진해져 이미지를 가리게 됩니다.</li></ul></td></tr><tr><td><strong>여백</strong></td><td>패딩 값을 설정하여, 상하의 여백크기를 조절할 수 있습니다.</td></tr><tr><td><strong>라운드</strong></td><td><p>각 테두리의 라운딩 설정을 할 수 있습니다.</p><ul><li>배경 이미지가 등록이 되어있을 경우 라운딩 설정은 적용 되지 않습니다.</li></ul></td></tr><tr><td><strong>테두리</strong></td><td><p>섹션 테두리에 선을 지정합니다.</p><ul><li>유형 : 실선과 점선을 선택합니다.</li><li>두께 : 테두리의 두께를 설정합니다.</li><li><p>색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.</p><ul><li>% 조절을 통해 투명도를 설정합니다.</li></ul></li></ul></td></tr></tbody></table>

## 3. 블록

콘텐츠의 배경, 여백 등 기본설정과 애니메이션, 클릭이벤트의 고급 설정을 할 수 있습니다.

{% hint style="warning" %}
각 항목의 사용안함 선택을 하면, 설정이 초기화 됩니다.
{% endhint %}

{% tabs %}
{% tab title="디자인" %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FMW73HCI2loo21Y48vTY7%2F14-1_%EB%B8%94%EB%A1%9D%20%EB%94%94%EC%9E%90%EC%9D%B8.png?alt=media&#x26;token=56853b0f-0632-4a8e-ad7c-52a8314b5f5e" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="188">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>정보</strong></td><td><p>블록 ID를 확인할 수 있습니다.</p><ul><li>복사 아이콘을 클릭하여 블록 ID를 복사 할 수 있습니다.</li><li>복사하기 단축키(Ctrl + C)통해 블록 ID를 복사 할 수 있습니다.</li></ul></td></tr><tr><td><strong>정렬</strong></td><td>좌우 정렬, 수평 정렬을 할 수 있습니다.</td></tr><tr><td><strong>배경</strong></td><td><p>색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.</p><ul><li>% 조절을 통해 투명도를 설정합니다.</li><li>흐림 : 색상에  흐림 효과를 적용합니다<br>투명도 100%일 경우 흐림 효과는 적용이 되지않습니다.<br></li></ul><p>이미지 : 배경에 이미지를 적용합니다. </p><ul><li>흐림 : 이미지에 흐림 효과를 적용합니다</li><li>오버레이 : 이미지에 색상을 덮어씌워 표현을 합니다. <br>%가 높을 수록 색상이 진해져 이미지를 가리게 됩니다.</li></ul></td></tr><tr><td><strong>여백</strong></td><td>패딩 값을 설정하여, 상하좌우의 여백크기를 조절할 수 있습니다.</td></tr><tr><td><strong>라운드</strong></td><td>콘텐츠 영역의 각 테두리의 라운딩 설정을 할 수 있습니다.</td></tr><tr><td><strong>테두리</strong></td><td><p>섹션 테두리에 선을 지정합니다.</p><ul><li>유형 : 선의 표시 형태를 설정합니다.</li><li>두께 : 테두리 의 두께를 설정합니다.</li><li><p>색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 <br>선택할 수 있습니다.</p><ul><li>% 조절을 통해 투명도를 설정합니다.</li></ul></li></ul></td></tr><tr><td><strong>그림자</strong></td><td><p></p><p>콘텐츠 뒤 그림자를 생성합니다</p><ul><li><p>방향 : 그림자가 생기는 방향을 설정합니다.</p><ul><li>x축, y축을 입력하여 지정 가능</li></ul></li><li>흐림 : 그림자의 번짐 정도를 설정합니다.</li><li>크기 : 그림자의 크기를 설정합니다.</li><li><p>색상 : 색상 코드를 입력하거나, 컬러피커에서 색상을 <br>선택할 수 있습니다.</p><ul><li>% 조절을 통해 투명도를 설정합니다.</li></ul></li></ul></td></tr></tbody></table>
{% endtab %}

{% tab title="고급" %}

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FpVTHTwZPNIudligKYdPD%2F14-2_%EB%B8%94%EB%A1%9D%20%EA%B3%A0%EA%B8%89.png?alt=media&#x26;token=919bcbe1-0f68-40f6-b346-35afc50a96c8" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="188">항목</th><th>설명</th></tr></thead><tbody><tr><td><strong>정보</strong></td><td><p>블록 ID를 확인할 수 있습니다.</p><ul><li>복사 아이콘을 클릭하여 복사를 할 수 있습니다.</li><li>복사하기 단축키(Ctrl + C)통해 섹션 ID를 복사할 수 있습니다.</li></ul></td></tr><tr><td><strong>애니메이션 (고급)</strong></td><td><p></p><p>스크롤 시 적용이 되는 애니메이션 효과를 설정할 수 있습니다.</p><ul><li>동작시간 : 애니메이션의 전환속도를 설정합니다.</li><li><p>방향 : 애니메이션의 전 방향을 설정합니다.</p><ul><li>플립, 슬라이드 애니메이션만 사용 가능</li></ul></li></ul></td></tr><tr><td><strong>클릭 이벤트 (고급)</strong></td><td><p>클릭 시 특정 페이지 및 위치로 이동하거나, 문자 발송 등 다양한 설정을 <br>할 수 있습니다.</p><p><br><strong>사용하지않음</strong></p><p>블록 클릭 시 아무런 동작을 하지않습니다.</p><hr><p><strong>사이트 링크 연결</strong></p><p>블록 클릭 시 등록한 URL로 이동을 합니다.</p><ul><li>새창으로 열기 설정 시 새로운 창에서 연결이 된 링크의 사이트가 열리게 됩니다.</li></ul><hr><p><strong>내부링크연결</strong></p><p>사이트 내 특정 페이지,섹션,블록의 위치를 지정하여 이동을 합니다.</p><ul><li>페이지 이동 설정을 원하실 경우 섹션과 블록은 선택하지않음 으로 지정합니다.</li></ul><hr><p><strong>SNS 공유하기</strong></p><p>카카오톡, 네이버 카페/블로그, 페이스북, 트위터, 네이버 밴드 중 공유를 원하는 SNS 선택할 수 있습니다.</p><ul><li>버튼 클릭 시 설정한 SNS로 이동이 되어 사이트 공유를 할 수 있습니다.</li></ul><hr><p><strong>현재 URL복사하기</strong></p><p>블록이 적용이 된 페이지의 URL을 복사합니다.</p><hr><p><strong>커스텀 자바스크립트</strong></p><p>CTA 등 블록에 적용을 위한 스크립트를 적용 할 수 있습니다.</p><ul><li>스크립트 입력 시 &#x3C;script> &#x3C;/script> 는 제외한 자바스크립트만 입력을 합니다.</li><li><mark style="color:red;">입력한 코드의 작동 여부 및 코드로 인해 발생하는 현상에 대해서는 조치 및 안내가 어렵습니다.</mark></li></ul><hr><p><strong>전화 걸기</strong></p><p>버튼 클릭 시 입력한 전화번호로 전화걸기를 합니다.</p><ul><li>전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)</li><li>전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.</li></ul><hr><p><strong>문자 보내기</strong></p><p>버튼 클릭 시 입력한 전화번호로 문자 발송을 합니다.</p><ul><li>전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)</li><li>전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.</li></ul><hr><p><strong>이메일 보내기</strong></p><p>버튼 클릭 시 입력한 메일 주소로 메일을 발송합니다.</p><hr><p><strong>페이지 상단 이동</strong></p><p>버튼 클릭 시 페이지 상단으로 이동합니다.</p><ul><li>헤더 숨김 시 기능이 동작하지 않습니다.</li></ul><hr><p><strong>페이지 하단 이동</strong></p><p>버튼 클릭 시 페이지 하단으로 이동합니다.</p><ul><li>푸터 숨김 시 기능이 동작하지 않습니다.</li></ul><hr><p><strong>공통 페이지 이동</strong></p><p>로그인 페이지 / 장바구니 페이지 중 이동 할 페이지 선택이 가능합니다.</p></td></tr></tbody></table>
{% endtab %}
{% endtabs %}