dev.to 에디터 가이드 🤓
Tags: beginners, productivity, help, meta
Published: 2019-01-11 09:10:44

---
title: dev.to 에디터 가이드 🤓
published: true
description: dev.to 사용 전에 알아 두어야 할 것과 에디터 가이드를 정리한 글입니다.
tags: beginners, productivity, help, meta
canonical_url: https://dev.to/gaerae/editor-guide--d09
cover_image: https://thepracticaldev.s3.amazonaws.com/i/h271h98eu1qkk1b08so8.png
---

dev.to 에디터 가이드 문서를 재편집한 글입니다.
아직은 한글 지원이 부족하여 불편하지만 앞으로 기대되는 서비스입니다.

## **알아 두어야 할 것들**

* [Jekyll 머리말](https://jekyllrb.com/docs/frontmatter/)를 사용합니다.
    * [에디터 v2 베타 버전](https://dev.to/settings/misc)에서는 머리말 태그가 없어졌습니다.
    * 에디터 v1이 기본 설정입니다.
* HTML 문법으로 작성할 수 있습니다.
* Liquid 지원하며 재미있는 사용자 정의 태그가 추가되고 있습니다.
* 비공개 게시물도 피드백/리뷰를 위해 미리보기 주소를 제공합니다.
* 공개할 준비가 되면 머리말의 `published` 값을 `true`로 설정하세요.
* 머리말의 `title` 값으로 URL를 자동 생성하는데 한글은 지원되지 않아 `-`로 표시됩니다.
    * 보기 좋은 URL를 만들고 싶다면 영문으로 공개 후 `title`를 한글로 변경하세요.
* 에디터는 자동 저장되지 않습니다. 주기적으로 저장하세요.

## **머리말**

맨 첫줄에 3개의 대시 문자(`---`) 사이가 머리말 영역이며 각 게시물의 사용자 정의 변수를 설정합니다. 다음은 사용 가능한 목록입니다.

* **title:** 게시물 제목입니다.
* **published:** 게시물을 공개하려면 `true`, 비공개라면 `false`를 사용합니다.
* **description:** 게시물 설명으로 Twitter cards 혹은 open graph cards에서 사용됩니다.
* **tags:** 태그는 쉼표(,)로 구분하며 최대 4개까지 가능합니다.
* **canonical\_url:** 게시물의 표준 URL를 입력합니다.
* **cover\_image:** 게시물 표지 이미지 URL를 넣을수 있으며 권장 크기는 1000x420입니다.
* **series:** 게시물 시리즈 이름입니다.


## **✍ Markdown 기본 문법**

Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out [this cheat sheet.](https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet)

### **글자 강조**

_글자 기울기_: `*asterisks*` 혹은 `_underscores_`
**글자 굵기**: `**글자 굵기**` 혹은 `__글자 굵기__`
~~글자 취소선~~: `~~글자 취소선~~`

### **링크**

[여기가 링크입니다.](https://dev.to): `[여기가 링크입니다.](링크 주소)`

### **이미지**

![샘플 이미지-sloan](https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg)

```
!\[이미지 대체 텍스트\](이미지 주소)
```
HTML `figcaption` 태그를 사용하면 캡션(caption)을 추가할 수 있습니다!

### **제목**

Add a header to your post with this syntax:

```
# 1개의 '#'은 h1 태그와 같습니다.
## 2개의 '#'은 h2 태그와 같습니다.
...
###### 6개의 '#'은 h6 태그와 같습니다.
```

# 1개의 '#'은 h1 태그와 같습니다.
## 2개의 '#'은 h2 태그와 같습니다.
....
###### 6개의 '#'은 h6 태그와 같습니다.


## **🌊 Liquid 기본 문법**

[Liquid](https://shopify.github.io/liquid/) 기본 태그를 지원하지만 사용자 정의 태그도 지원합니다. 다음은 사용자 정의 태그입니다.

### **dev.to Article/Post 퍼가기**

전체 URL를 입력하세요.

```
{% link https://dev.to/kazz/boost-your-productivity-using-markdown-1be %}
```

도메인을 제외한 ID부터의 입력으로도 가능합니다.

```
{% link kazz/boost-your-productivity-using-markdown-1be %}
```

### **dev.to User 퍼가기**

사용자 이름만 입력하세요.

```
{% user gaerae %}
```

### **dev.to Tag 퍼가기**

태그 이름만 입력하세요.

```
{% tag git %}
```

### **dev.to Comment 퍼가기**

댓글의 오른쪽 상단 화살표를 클릭 한 다음 "Permalink"에서 URL의 `ID` 정보를 확인하여 입력하세요.

```
{% devcomment 2d1a %}
```

### **dev.to Podcast Episode 퍼가기**

전체 URL를 입력하세요.

```
{% podcast https://dev.to/basecspodcast/s2e2--queues-irl %}
```

### **Twitter 퍼가기**

게시물 `id`를 입력하세요.

```
{% twitter 834439977220112384 %}
```

### **Glitch 퍼가기**

프로젝트 ID를 입력하세요.

```
{% glitch earthy-course %}
```

몇 가지 [선택 옵션](https://glitch.com/help/how-can-i-customize-a-glitch-app-embed/)이 있습니다. ID 뒤에 공백으로 구분하여 입력하세요.
`app`
* 앱 미리보기만 표시합니다.
* `{% glitch earthy-course app %}`

`code`
* 코드만 표시합니다.
* `{% glitch earthy-course code %}`

`preview-first`
* 앱 미리보기를 화면 왼쪽에 표시합니다. 
* `{% glitch earthy-course preview-first %}`

`no-attribution`
* 제작자 정보를 숨깁니다.
* `{% glitch earthy-course no-attribution %}`

`no-files`
* 파일 목록을 숨깁니다.
* `{% glitch earthy-course no-files %}`

`file`
* 기본 출력 파일을 변경할 수 있습니다. 기본값은 `index.html`입니다.
* `{% glitch earthy-course file=script.js %}`

### **GitHub Repo 퍼가기**

사용자와 저장소 이름을 입력하세요.

```
{% github thepracticaldev/dev.to %}
```

### **GitHub Issue or Comment 퍼가기**

전체 URL를 입력하세요.

```
{% github https://github.com/thepracticaldev/dev.to/issues/9 %}
```

### **GitHub Gist 퍼가기**

전체 URL를 입력하세요.
```
{% gist https://gist.github.com/QuincyLarson/4bb1682ce590dc42402b2edddbca7aaa %}
``` 

### **Video 퍼가기**

ID 값만 입력하세요.

* **YouTube, Vimeo**
```
{% youtube dQw4w9WgXcQ %}

{% vimeo 193110695 %}
```

### **SlideShare 퍼가기**

`key` 값만 입력하세요.

```
{% slideshare rdOzN9kr1yK5eE %}
```

### **CodePen 퍼가기**

전체 URL를 입력하세요.

```
{% codepen https://codepen.io/twhite96/pen/XKqrJX %}
```

`default-tab`
* 기본 탭 옵션을 지원합니다. 기본값은 `result` 입니다.
* `{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}`

### **RunKit 퍼가기**

다음 예제를 참고하여 입력하세요.
```
{% runkit
// 숨겨진 설정 코드를 추가하는 영역입니다.
const hiddenVar = 42
%}
// visible, reader-editable 코드를 추가하는 영역입니다.
console.log(hiddenVar)
{% endrunkit %}
```

### **Stackblitz 퍼가기**

Stackblitz ID 값을 입력하세요.:

```
{% stackblitz ball-demo %}
```

### **CodeSandbox 퍼가기**

Sandbox ID 값을 입력하세요.

```
{% codesandbox ppxnl191zx %}
```

### **repl.it 퍼가기**

URL에서 도메인을 제외한 정보를 입력하세요.

```
{% replit @WigWog/PositiveFineOpensource %}
```

### **Instagram 퍼가기**

게시물 ID 값을 입력하세요.

```
{% instagram BXgGcAUjM39 %}
```

### **Speakerdeck 퍼가기**

Embed link 정보에서 `data-id`를 확인하여 사용자 정의 태그에 입력하세요.
```
# 제공하는 Embed link 정보입니다.
< script async class="speakerdeck-embed"
data-id="7e9f8c0fa0c949bd8025457181913fd0"
data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js">< /script >
```
위에서 확인한 `data-id` 값을 입력하세요.
```
{% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}
``` 

### **Soundcloud 퍼가기**

전체 URL를 입력하세요.

```
{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %}
```

### **데이터 파싱하기**

간단한 사용 방법입니다.
```
`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`
```

`raw` 태그를 사용하는 방법입니다.
```
`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`
```

### **일반적인 결함들**

번호가 지정된 목록 사이에 이미지를 추가해야된다면 이미지 태그 앞에 공백 혹은 탭을 추가해야 번호가 연결됩니다. 그렇지 않으면 이미지 태그 다음 목록 번호가 초기화되어 1부터 시작하게 됩니다.
```
목록 예제
1. 목록 1입니다.
    ![이미지 대체 텍스트](이미지 주소)
2. 목록 2입니다.
```

#### [Markdown 문법을 자세히 알고 싶다면 클릭하세요.](https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet)

즐겁게 게시물을 작성하세요! 📝