> For the complete documentation index, see [llms.txt](https://help.reflow.cx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.reflow.cx/minipage/story.md).

# 스토리

## 스토리 블록 이해하기 <a href="#what_is_story" id="what_is_story"></a>

![Photo by https://unsplash.com/@artboardstudio](/files/Q5gdrS3r873SQ274GB8u)

스토리는 미니페이지에서 가장 자유롭게 편집할 수 있는 블록입니다. 스토리 블록에는 블로그나 게시판의 글쓰기 기능에서 흔히 볼 수 있는 서식 있는 텍스트 편집기(Rich Text Editor)가 들어가 있습니다. 이 편집기를 이용해, 원하는 내용을 자유롭게 표현할 수 있습니다.

## 편집기 기능 알아보기 <a href="#understanding_editor" id="understanding_editor"></a>

![](/files/xfH7jLfUe2WBwTmmcy2W)

### 1. 단락 스타일 <a href="#paragraph_style" id="paragraph_style"></a>

텍스트를 입력한 뒤 단락별로 사전 정의된 스타일을 적용할 수 있습니다. 스타일은 총 4종류로, `문단`, `제목 1`, `제목 2`, `제목 3`이 있습니다.

* 각 스타일에 적용되어 있는 글자 크기, 굵기 등은 임의로 수정할 수 없습니다.
* 이 스타일은 단락 단위로만 적용할 수 있으며, 단락 안의 특정 부분만 선택해 적용할 수 없습니다.

### 2. 텍스트 크기, 색깔 <a href="#text_property" id="text_property"></a>

지정한 영역의 크기, 색깔을 바꿀 수 있습니다. 단락 스타일과는 달리, 서식을 적용할 부분을 마우스로 드래그해 영역을 지정해야 합니다.

### 3. 단락 정렬 <a href="#text-alignment" id="text-alignment"></a>

단락의 정렬 방식을 `왼쪽`, `오른쪽`, `가운데`, `양쪽` 중 선택해 바꿀 수 있습니다.

### 4. 텍스트 꾸미기 <a href="#text_decoration" id="text_decoration"></a>

지정한 영역의 텍스트에 `굵게`, `기울임꼴`, `취소선`, `밑줄` 등의 스타일을 적용할 수 있습니다.

### 5. 특수문자 <a href="#symbols" id="symbols"></a>

클릭하면 본문에 삽입할 수 있는 특수문자의 목록을 표시합니다. 목록에서 원하는 특수문자를 클릭하면 현재 커서 위치에 바로 삽입됩니다.

### 6. 수평선 <a href="#horizontal_line" id="horizontal_line"></a>

클릭하면 현재 커서 위치에 수평선을 삽입합니다. 영역을 구분하는 데 사용할 수 있습니다.

### 7. 불릿 목록 <a href="#unordered_list" id="unordered_list"></a>

현재 커서가 위치한 단락을 불릿 목록으로 전환합니다. 버튼 오른쪽의 `▼`을 클릭하면 목록의 스타일을 변경할 수 있습니다.

### 8. 번호 목록 <a href="#ordered_list" id="ordered_list"></a>

현재 커서가 위치한 단락을 번호 목록으로 전환합니다. 버튼 오른쪽의 `▼`을 클릭하면 목록의 스타일을 변경할 수 있습니다.

* 불릿 목록과 번호 목록 모두 두번째 항목부터 `Tab`을 누르면 들여쓰기 단계가 증가하고, `Shift + Tab`을 누르면 들여쓰기 단계가 감소합니다.
* 별표(`*`)나 대시(`-`)를 입력하고 `스페이스바`를 입력하면 자동으로 불릿 목록이 만들어집니다.
* `1.`을 입력하고 `스페이스바`를 입력하면 자동으로 번호 목록이 만들어집니다.

{% hint style="info" %}
이 아래의 메뉴부터는 더보기 버튼(**`⋮`**) 을 클릭해야 표시됩니다.
{% endhint %}

### 9. 들여쓰기 늘리기/줄이기 <a href="#indentation" id="indentation"></a>

현재 커서가 위치한 단락의 들여쓰기 수준을 한 단계 늘리거나 줄입니다.

### 10. 사진(이미지) 삽입 <a href="#insert_image" id="insert_image"></a>

컴퓨터에 있는 이미지 파일을 현재 커서 위치에 삽입합니다.

혹은 다음과 같은 방식으로도 넣을 수 있습니다.

{% tabs %}
{% tab title="드래그 앤 드롭" %}
파일 탐색기에서 편집기 안으로 드래그 앤 드롭합니다.

![](/files/0af7GMSNjA97OiThobZG)
{% endtab %}

{% tab title="파일 복사 후 붙여넣기" %}

1. 파일 탐색기에서 이미지 파일을 선택합니다.
2. `Ctrl+ C`를 누르거나, `우클릭 - 복사(C)`를 클릭합니다.
3. 편집기에서 원하는 위치에 붙여 넣습니다.
   {% endtab %}

{% tab title="인터넷에 있는 이미지 붙여넣기" %}

1. 인터넷에 있는 이미지를 우클릭합니다.
2. `이미지 복사`를 클릭합니다(메뉴의 이름은 브라우저마다 다를 수 있습니다).
3. 편집기에서 원하는 위치에 붙여 넣습니다.
   {% endtab %}
   {% endtabs %}

### 11. 미디어(동영상) 삽입 <a href="#insert_media" id="insert_media"></a>

YouTube 등의 플랫폼에 게재되어 있는 동영상의 URL을 입력하여 동영상을 삽입할 수 있습니다. 지원되는 플랫폼은 YouTube, Dailymotion, Vimeo의 3개입니다.

미디어 삽입 버튼을 누를 필요 없이, 스토리의 아무 곳에 동영상의 URL을 붙여넣기만 해도 영상을 삽입할 수 있습니다.

{% hint style="info" %}
![](/files/iYBTDGHsc8gJWkCgxja9)\
삽입된 이미지나 동영상 위에 마우스 포인터를 올린 뒤, 왼쪽 아래와 오른쪽 아래에 표시되는 **단락 삽입** `⏎` 버튼을 클릭해 손쉽게 위와 아래에 내용을 추가할 수 있습니다.
{% endhint %}

### 12. 링크 삽입 <a href="#insert_link" id="insert_link"></a>

원하는 텍스트를 마우스로 드래그해 영역을 지정한 뒤, 연결할 URL을 입력해 링크로 만들 수 있습니다.

* 링크를 클릭했을 때 새 탭이 열리게 할지 여부를 선택할 수 있습니다.
* 링크가 적용된 텍스트를 클릭한 뒤 나오는 메뉴에서 링크를 수정하거나 삭제할 수 있습니다.

### 13. 테이블(표) 삽입 <a href="#insert_table" id="insert_table"></a>

마우스 포인터를 움직여 행과 열의 개수를 지정한 뒤 클릭하면 표를 삽입할 수 있습니다.

* 셀의 너비는 셀 내용의 길이에 따라 자동으로 조절됩니다.
* 표의 셀 안에 다른 표를 삽입할 수 있습니다.
* 표의 맨 마지막 셀에 마우스 커서를 둔 뒤 Tab을 누르면 새로운 행이 자동으로 생성됩니다.

### 14. 인용 단락 삽입 <a href="#insert_quote" id="insert_quote"></a>

다른 사람의 말이나, 참고자료에서 발췌한 부분을 나타내기 위해 인용 단락을 삽입할 수 있습니다.

### 15. 실행 취소 및 다시 실행 <a href="#undo_and_redo" id="undo_and_redo"></a>

마지막으로 실행한 동작을 취소하거나 다시 실행할 수 있습니다.

### 16. 찾아 바꾸기 <a href="#find_and_replace" id="find_and_replace"></a>

본문에서 특정 문자열을 검색하거나, 검색해서 나온 결과를 다른 문자열로 바꿉니다.