Velog 포스팅 튜토리얼

마크다운이란?

마크다운(markdown)은 일반 텍스트 문서의 양식을 편집하는 문법이다. README 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쓰인다. 마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능하다.
-위키백과- https://ko.wikipedia.org/wiki/마크다운

• 쉽게 읽을 수 있고, 쉽게 작성할 수 있게 만들어짐
• 가독성이 제일 중요
• 웹상에서 사용할 수 있는 글쓰기 도구
• html을 완전하게 대체하지는 못함

---

❔ 마크다운 작성법

1. 제목(h1~h6)

h1부터 h6를 #의 개수로 제목을 표현할 수 있다.
참고) 회색 박스로 감싸진 부분(인라인 코드)은 백틱(backtick)(`)으로 감싸서 작성하면 된다.

💛 입력

# 첫 번째 수준 제목 (h1)
## 두 번째 수준 제목 (h2)
### 세 번째 수준 제목 (h3)
#### 네 번째 수준 제목 (h4)
##### 다섯 번째 수준 제목 (h5)
###### 여섯 번째 수준 제목 (h6)

💚 출력

첫 번째 수준 제목 (h1)
두 번째 수준 제목 (h2)
세 번째 수준 제목 (h3)
네 번째 수준 제목 (h4)
다섯 번째 수준 제목 (h5)
여섯 번째 수준 제목 (h6)

참고) Markdown에서 글자 폰트는 <span style="font-size: 16px>와 같은 <span> 태그의 style속성을 이용한다.

2. 인용문(>)

본문 안에서 인용된 내용을 표시하고자 한다면 > 기호를 사용한다.
참고) 인용문 안에서 제목 수준(h1~h6)을 표현할 수도 있다.

💛 입력

> # 1단
> 인용문 작성하기
-작성자

> 인용문 작성하기
>> (>)의 갯수에 따라
>>> 중첩문 가능

💚 출력

인용문 작성하기
-작성자

인용문 작성하기

>의 갯수에 따라

중첩문 가능

3. 리스트(-, *, +)

순서를 표기하는 목록 / 순서가 없는 목록 두 가지를 작성할 수 있다.

3.1 ordered list
숫자와 .을 사용하여 작성한다.

💛 입력

1. 첫 번째
2. 두 번째
3. 세 번째

💚 출력

1. 첫 번째
2. 두 번째
3. 세 번째

3.2 unordered list
-, *, + 중 아무거나 사용해서 작성해도 된다.
인라인 코드, 블럭 코드를 작성할 수 있으며 Tab키나 Space bar를 이용해 들여쓰기가 가능하다.

💛 입력

- 순서 없는 목록 1
    - 목록 1.1
        - 목록 1.2
- 순서 없는 목록 2
		
        Tab 두번 하면 코드 블럭을 만들 수 있어요.
* 순서 없는 목록 3
+ 순서 없는 목록 4
	+ `인라인 코드 가능`
    	+ 들여쓰기(tab키 이용)를 하면 다른 모양으로 표현 됩니다.
        
        ```　
		블럭 코드 가능
		```　

💚 출력

• 순서 없는 목록 1
  • 목록 1.1
    • 목록 1.2
• 순서 없는 목록 2

    Tab 두번 하면 코드 블럭을 만들 수 있어요.

• 순서 없는 목록 3

• 순서 없는 목록 4
  + 인라인 코드 가능
  + 들여쓰기(tab키 이용)를 하면 다른 모양으로 표현 됩니다.

    ```　
  		블럭 코드 가능
  		```　

4. 폰트 스타일

굵게, 기울이기, 취소선 등 기본적인 스타일을 아래와 같이 작성할 수 있다.

💛 입력

__굵게__
**굵게**
_기울여 쓰기_
*기울여 쓰기*
~취소선~
~~취소선~~

💚 출력

굵게
굵게
기울여 쓰기
기울여 쓰기
~취소선~
취소선

또한 글꼴 색상이나 하이라이트는 HTML태그를 이용해서 작성한다.

4.1 글꼴 색상

💛 입력

<span style="color:red">red</span>
<span style="color:#d3d3d3">#d3d3d3</span>
<span style="color:rgb(245, 235, 13)">rgb(245, 235, 13)</span>

💚 출력

red
#d3d3d3
rgb(245, 235, 13)

4.2 글꼴 하이라이트

💛 입력

<span style='background-color: #ffdce0'> 연한 빨강 </span>
<span style='background-color: #fff5b1'> 연한 노랑 </span>
<span style='background-color: #dcffe4'> 연한 초록 </span>

💚 출력

연한 빨강
연한 노랑
연한 초록

5. 인라인 코드

백틱(`)으로 텍스트를 감싸서 인라인 코드를 작성할 수 있습니다.

💛 입력

`인라인 코드는 이렇게 작성해요.`

💚 출력

인라인 코드는 이렇게 작성해요.

6. 코드 블럭

여러 줄의 코드 블럭은 백틱(`) 3개로 감싸서 작성한다.
물결(~) 3개도 가능한 것으로 보인다. -> 코드 블럭 중첩 시 사용

💛 입력

```　
위 아래 3개로 감싸면 블럭으로 만들 수 있어요.
```　

💚 출력

위 아래 3개로 감싸면 블럭으로 만들 수 있어요.

6.1 Syntax Highlighting
시작 백틱 3개 뒤에 언어 이름을 선언하면 된다.

💛 입력

```javascript
let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);
```

💚 출력

let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);

7. 링크

아래 3가지 방식으로 링크를 나타낼 수 있다.
1. 인라인 링크
2. url 링크
3. 참조 링크

💛 입력

인라인 링크: [인라인 링크](https://velog.io/)

url 링크: <https://velog.io/>

참조 링크: [velog]
[velog]:https://velog.io/

💚 출력

인라인 링크: 인라인 링크

url 링크: https://velog.io/

참조 링크: velog <- 키워드를 참조하는 방식

8. 수평선(hr)

*이나 -, _ 등을 3개 이상 입력하면 작성할 수 있다.
띄어쓰기를 중간에 삽입하여도 가능합니다. 다만, 하이픈(-)은 헤더로 인식할 수도 있으니 주의해서 사용할 필요가 있다.

💛 입력

***
-----
__ __ __ __ __ __ __

💚 출력

---

---

---

9. 이미지 삽입

링크 삽입 방식과 유사하나, 맨 앞에 !를 붙인다.

💛 입력

![이미지 설명 or 대체 텍스트)](이미지 링크)
![고양이들](https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg)

💚 출력

만약 이미지에 링크를 걸고 싶을 경우에는 아래와 같이 작성한다.

💛 입력

[![이미지 설명](이미지 링크)](연결하고자하는 url "마우스 오버 시 나타낼 링크 title")
[![고양이들](https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg)](https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg"이미지 무료 사이트 pixabay")

💚 출력

이미지 크기 조절은 <img>태그로 이미지를 첨부하고, width 및 height 속성을 주는 방법밖엔 없다.

<img src="image_src" height="100px" width="300px">

10. 테이블(table)

테이블은 아래와 같이 작성한다.
| 로 구분하며, <4. 폰트 스타일> 에서 이야기 했던 기본적인 스타일 적용이 가능하다. 또한 -(하이픈)으로 구분된 곳 각각 왼쪽, 양쪽, 오른쪽에 :(세미콜론)을 붙일 경우 순서대로 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬이 가능하다.

💛 입력

| 드라마 제목 | 주연 배우 | 방영일 |
|:----------|:----------:|----------:|
| **호텔 델루나** | 이지은, 여진구 | ~~2019.07.13. ~ 2019.09.01.~~ |
| 타인은 지옥이다 | 임시완, 이동욱, 이현욱, 이정은 | 2019.08.31. ~ |
| 멜로가 체질 | 천우희, 안재홍, 전여빈, 공명 | 2019.08.09. ~ |

💚 출력

드라마 제목	주연 배우	방영일
호텔 델루나	이지은, 여진구	2019.07.13. ~ 2019.09.01.
타인은 지옥이다	임시완, 이동욱, 이현욱, 이정은	2019.08.31. ~
멜로가 체질	천우희, 안재홍, 전여빈, 공명	2019.08.09. ~

11. 체크박스(Check Box)

-, *, + 뒤에 띄어쓰기 후 대괄호[]를 넣어 작성해주자. 대괄호안에 띄어쓰기를 하면 빈 체크박스, x를 넣으면 체크된 체크박스가 생긴다.

💛 입력

- [ ] 운동 하기
- [x] 강의 듣기

💚 출력

• 운동 하기
• 강의 듣기

12. 이모티콘(이모지)

작성된 글 중간중간에 보이는 이모지는 트위터 이모지입니다.
https://kr.piliapp.com/twitter-symbols/
아래 주소의 트위터 이모지를 복사 ➜ 붙여넣기 해서 사용하시면 됩니다.

단축키
window10: 윈도우 키 + 마침표(.)
mac: Command + Control + 스페이스 바