> For the complete documentation index, see [llms.txt](https://supportcenter.creatorlink.net/migration/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://supportcenter.creatorlink.net/migration/site-building/edit_block/text_block/quick_insert_menu.md).

# 빠른 삽입 버튼 활용하기

빠른 삽입 버튼은 텍스트 박스에서 제공하는 기능으로 이미지, 동영상, 표, 버튼, 구분선 등을 텍스트 박스 안에 삽입할 수 있습니다.

1\. 텍스트 박스 속의 '빈 줄'을 클릭하여 **빠른 삽입** 버튼을 활성화해 주세요.

<figure><img src="/files/9AKklQWnh5iRISPcXQhD" alt=""><figcaption></figcaption></figure>

2\. **빠른 삽입** 버튼을 클릭해 주세요.

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

3\. 원하는 항목을 클릭해 주세요.

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

**\[각 항목별 세부기능]**

1\. **이미지**

이미지, 갤러리, 컨텐츠 블럭처럼 이미지 보관함에서 이미지를 업로드 할 수 있습니다.

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

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

&#x20; 1\) **이미지 교체** : 다른 이미지로 교체합니다.

&#x20; 2\) **크기 변경** : 픽셀값을 수정하여 이미지를 원하는 크기로 조절합니다. 이미지의 모서리를 드래그하여 이미지의 크기를 조절할 수 있습니다.

&#x20; 3\) **배치**\
&#x20;   a. **어울림** : 이미지가 텍스트 정렬 상태와 동일하게 배치됩니다.\
&#x20;   b. **자리 차지** : 이미지가 문단 사이에 한 줄씩 공백을 두고 중앙 배치됩니다.

&#x20; 4\) **스타일** : 이미지에 둥근 모서리, 테두리, 그림자 효과를 부여합니다. 효과는 3개 모두 중첩 가능합니다.

&#x20; 5\) **링크** : 이미지에 URL을 링크합니다. 클릭 시 해당 URL로 이동합니다.

&#x20; 6\) **엔터** : 클릭 시 해당 이미지 아래로 한 번 줄 바꿈 합니다.

&#x20; 7\) **삭제** : 이미지를 삭제합니다.

2\. **동영상**\
동영상 링크를 붙여넣어 사이트에서 재생할 수 있습니다. 유튜브, 비메오, 사운드 클라우드, 카카오TV 링크를 사용할 수 있습니다.

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

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

&#x20; 1\) **크기 변경** : 픽셀값 수정은 불가능하지만 동영상의 모서리를 드래그하여 동영상 크기를 조절할 수 있습니다.

&#x20; 2\) **동영상 교체** : 다른 동영상으로 교체합니다.

&#x20; 3\) **배치**\
&#x20;   a. **어울림** : 동영상이 텍스트 정렬 상태와 동일하게 배치됩니다.\
&#x20;   b. **자리 차지** : 동영상이 문단 사이에 한 줄씩 공백을 두고 중앙 배치됩니다.

&#x20; 4\) **엔터** : 클릭 시 해당 동영상 아래로 한 번 줄바꿈 합니다.

&#x20; 5\) **삭제** : 동영상을 삭제합니다.

3\. **표**\
원하는 디자인의 표를 생성할 수 있습니다.

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

* **표 삽입 시 설정창**&#x20;

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

&#x20; 1\) **행, 열** : 각각의 셀 수를 지정합니다.

&#x20; 2\) **스타일 선택** : 기본 제공 스타일 중 원하는 디자인을 선택합니다.

&#x20; 3\) **직접 꾸미기** : 선 스타일, 굵기, 색상, 배경 색상 등 표를 세부적으로 디자인합니다.

* **표 삽입 후 설정창**

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

&#x20; 1\) **행, 열** : 선택한 셀을 기준으로 원하는 위치에 칸을 추가/삭제합니다.

&#x20; 2\) **셀** : 선택한 셀을 분할/병합합니다.

&#x20; 3\) **컬러** : 선의 색상을 변경합니다.

&#x20; 4\) **수평 정렬** : 텍스트를 왼쪽/중앙/오른쪽으로 정렬합니다.

&#x20; 5\) **수직 정렬** : 텍스트를 상단/중앙/하단으로 정렬합니다.

&#x20; 6\) **선 굵기** : 선의 굵기를 변경합니다.

&#x20; 7\) **선 모양** : 선의 모양을 변경합니다.

&#x20; 8\) **엔터** : 클릭 시 해당 표 아래로 한 번 줄바꿈합니다.

&#x20; 9\) **삭제** : 표를 삭제합니다.

**4. 버튼**\
원하는 디자인의 버튼을 생성할 수 있습니다.

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

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

&#x20; 1\) **링크** : 버튼 클릭 시 이동할 URL을 적용합니다.

&#x20; 2\) **버튼 컬러** : 버튼의 배경색상을 변경합니다. 텍스트의 색상은 텍스트를 드래그 하여 '텍스트 에디터'를 통해 변경할 수 있습니다.

&#x20; 3\) **버튼 외곽 곡선** : 버튼의 모서리를 둥글게 변경합니다. 왜곡 정도는 0 \~ 20 중에 선택할 수 있습니다.

&#x20; 4\) **선 굵기** : 선의 굵기를 변경합니다.

&#x20; 5\) **버튼 정렬** : 버튼을 왼쪽/중앙/하단으로 정렬합니다.

&#x20; 6\) **버튼 여백(가로/세로)** : 버튼에 가로/세로 여백을 부여합니다. 버튼의 크기를 조절한다고 보시면 됩니다.

&#x20; 7\) **버튼 복제** : 동일한 디자인의 버튼을 복제합니다.

&#x20; 8\) **엔터** : 클릭 시 해당 버튼 아래로 한 번 줄바꿈합니다.

&#x20; 9\) **삭제** : 버튼을 삭제합니다.

{% hint style="info" %}
버튼 안의 텍스트를 마우스로 범위 지정하면 텍스트 디자인을 변경할 수 있는 텍스트 에디터가 활성화됩니다.&#x20;
{% endhint %}

5\. **구분선**\
원하는 디자인의 구분선을 생성할 수 있습니다.

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

<figure><img src="/files/5S5IuGMFGMoBx8ILuen8" alt=""><figcaption></figcaption></figure>

&#x20; 1\) **길이 변경** : 구분선 양 끝을 드래그하여 구분선의 길이를 조절할 수 있습니다.

&#x20; 2\) **선 컬러** : 선의 색상을 변경합니다.

&#x20; 3\) **선 굵기** : 선의 굵기를 변경합니다.

&#x20; 4\) **선 정렬** : 선을 왼쪽/중앙/오른쪽으로 정렬합니다.

&#x20; 5\) **선 여백** : 선의 위 아래 여백을 변경합니다. 여백 크기는 0 \~ 20 중에 선택할 수 있습니다.

&#x20; 6\) **엔터** : 클릭 시 해당 구분선 아래로 한 번 줄바꿈합니다.

&#x20; 7\) **삭제** : 구분선을 삭제합니다.&#x20;

{% hint style="info" %}

* 크리에이터링크에서 제공되는 모든 블럭은 반응형 웹 디자인을 고려하여 제작되었기 때문에  **임의적인 텍스트 박스 추가 및 위치 이동은 불가능해요!**
* **Space Bar와 Enter도 문자에 해당하기 때문에 PC에서 Space Bar와 Enter를 이용하여 줄 바꿈을 하시는 경우, 모바일 버전에서는 PC와 동일하게 구현되지 않을 수 있어요.**
* 모바일 디스플레이도 그 크기가 각각 다르기 때문에 특정 기기에서는 모바일 텍스트 디자인이 원하는 대로 구현되지 않을 수 있어요.
  {% endhint %}
