> For the complete documentation index, see [llms.txt](https://help.smallbuilder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smallbuilder.com/ko/smallbuilder-documents/components.md).

# Components

{% hint style="info" %}
**컴포넌트란?**

자주 사용하는 문서 요소를 사전에 구현해 놓은 것으로

사용자는 Drag & Drop 을 통해 컴포넌트를 자유롭게 배치하여 템플릿을 손쉽게 완성할 수 있습니다
{% endhint %}

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

1. `Component`를 클릭하여 Component Panel로 이동합니다.

***

<div align="left"><figure><img src="/files/FnKBDPUD1s83NTQoMky8" alt=""><figcaption></figcaption></figure></div>

2. `Add component`를 클릭하여 Component를 추가합니다.

***

<div align="left"><figure><img src="/files/W5CFFBKDl8vzzIwwEWKE" alt=""><figcaption></figcaption></figure></div>

3. 원하는 컴포넌트를 클릭하여 추가합니다.

<table><thead><tr><th width="272.3333333333333">컴포넌트 명</th><th width="371">기능 소개</th><th data-hidden>비고</th></tr></thead><tbody><tr><td>Title</td><td>문서의 제목</td><td></td></tr><tr><td>Paragraph</td><td>문자열 단락</td><td></td></tr><tr><td>Image</td><td>이미지</td><td></td></tr><tr><td>Empty</td><td>컴포넌트 사이 여백</td><td></td></tr><tr><td>Divider</td><td>가로 구분선</td><td></td></tr><tr><td>Table</td><td>테이블</td><td></td></tr><tr><td>Related List</td><td>테이블 형태의 집합 자료</td><td></td></tr><tr><td>Page Header</td><td>문서 머리글</td><td></td></tr><tr><td>Page Footer</td><td>문서 바닥글</td><td></td></tr><tr><td>Page Break</td><td>페이지 바꿈</td><td></td></tr><tr><td>Attachement</td><td>첨부파일 리스트</td><td></td></tr><tr><td>Signature</td><td>서명 입력 및 업로드</td><td></td></tr><tr><td>Custom Component</td><td>사용자 정의 컴포넌트(VFP) 추가</td><td></td></tr></tbody></table>

***

<div align="left"><figure><img src="/files/c1mtMa6XowWf6vKMsJ5U" alt=""><figcaption></figcaption></figure></div>

4. Component를 옮기고 싶은 위치로 Drag & Drop합니다.