Velog 마크다운(Markdown) 사용법

마크다운이란

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

📖마크다운 사용법

1. 제목 (Header)

h1 부터 h6까지 표현할 수 있고, #의 개수로 h1 ~ h6 표현이 가능하다.

🖊 마크다운 작성 방법

# h1
## h2
### h3
#### h4
##### h5
###### h6

👉 결과

h1

h2

h3

h4

h5
h6

❗ h1과 h2는 다음과 같은 방법으로도 사용가능하다.

=, -를 각각 2개 이상 사용하면 h1, h2#을 대신해서 사용할 수 있다.

  • 여러 개를 사용해도 h1, h2 효과가 적용됩니다.

🖊 마크다운 작성 방법

h1
==
h2
--
hyphen 여러 개
----------

👉 결과

h1

h2

hyphen 여러 개

2. 문단 간격

기본적으로 문단 간격은 <br/>을 사용하여 줄 바꿈으로 나타내고, 여러 번 줄 바꿈<br/>을 여러번 사용하면 됩니다.

🖊 마크다운 작성 방법

문단<br/>
문단<br/><br/>
문단

👉 결과
문단

문단


문단

3. 목록(리스트)

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

3.1 순서를 표기하는 목록

순서있는 목록은 숫자을 사용한다.

🖊 마크다운 작성 방법

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

👉 결과
1. 첫 번째
2. 두 번째
3. 세 번째

3.2 순서가 없는 목록(글머리 기호)

-, *, +를 사용하여 작성한다. (셋 다 모두 동일한 기능)

  • 인라인 코드와 블럭 코드도 작성할 수 있고, Tab, Space bar를 통해 들여쓰기할 수 있다.

🖊 마크다운 작성 방법

- 목록 1
    - 목록 1.1
        - 목록 1.2
- 목록 2
		
        Tab 두번 하여 코드 블럭 생성
* 목록 3
+ 목록 4
	+ `인라인 코드`
    	+ Tab키를 하면 다른 모양으로 표현 가능
        
        ``` 
		블럭 코드
		``` 

👉 결과

  • 목록 1

    • 목록 1.1
      • 목록 1.2
  • 목록 2

      Tab 하여 코드 블럭 생성
  • 목록 3
  • 목록 4
    + 인라인 코드
    + Tab키를 사용하면 다른 모양으로 표현 가능
      ``` 
    		블럭 코드
    		``` 

4. 폰트 강조(스타일)

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

🖊 마크다운 작성 방법

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

👉 결과
굵게
굵게
기울여 쓰기
기울여 쓰기
취소선

5. 인용문

인용문은 >를 사용하여 작성한다.

🖊 마크다운 작성 방법

> 인용문
- 작성자

> 인용문 작성
>> `>`의 갯수에 따라
>>> 중중첩문 가능

👉 결과

인용문

  • 작성자

인용문 작성

>의 갯수에 따라

중중첩문 가능

6. 인라인 코드

을 사용하여 인라인 코드를 작성할 수 있다.

🖊 마크다운 작성 방법

`인라인 코드 블럭`

👉 결과

인라인 코드 블럭

7. 코드 블럭

을 세 개 사용하여 인라인 코드를 작성할 수 있다.

🖊 마크다운 작성 방법

``` 
위 아래 3개로 코드 블럭 생성
``` 

👉 결과

위 아래 3개로 코드 블럭 생성

❗ 구문 강조(Syntax Highlighting)

🖊 마크다운 작성 방법

아래와 같이 3개 뒤에 컴퓨터 언어 이름을 넣으면 해당 언어 형식으로 변환해 준다.

```javascript
let sum = (Num1, Num2) => {
  return Num1 + Num2;
};
sum(100, 200);
``` 

```python
list = ['1', '2', '3']
for num in list:
  print(num)
``` 

👉 결과

let sum = (Num1, Num2) => {
  return Num1 + Num2;
};
sum(100, 200);
list = ['1', '2', '3']
for num in list:
  print(num)

8. 링크(Link)

인라인 링크URL 링크, 참조 링크로 나타낼 수 있다.

🖊 마크다운 작성 방법

인라인 링크는 다음과 같다.
[인라인 링크](https://velog.io/@daekyeong)

url 링크는 다음과 같다.
<https://velog.io/@daekyeong>

참조 링크는 다음과 같다.
[참조 한 링크 사용함][Dekay]
[Dekay]: https://velog.io/@daekyeong

👉 결과
인라인 링크는 다음과 같다.
인라인 링크

url 링크는 다음과 같다.
https://velog.io/@daekyeong

참조 링크는 다음과 같다.
참조 한 링크 사용함

9. 이미지 링크(Image Link)

이미지 링크는 아래와 같이 사용할 수 있다.

🖊 마크다운 작성 방법

![이미지 설명](이미지 링크)
![Dekay Blog](https://media.vlpt.us/images/velog/profile/9aa07f66-5fcd-41f4-84f2-91d73afcec28/green%20favicon.png?w=240)

👉 결과

❗ 이미지에 링크를 걸고 싶은 경우는 아래와 같이 사용할 수 있다. (Image Size는 10MB 이하만 가능하다)

🖊 마크다운 작성 방법

[![이미지 설명](이미지 링크)](연결하고자하는 url "마우스 오버 시 나타낼 Title")

👉 결과

10. 수평선(Horizontal Rules)

*,-,_ 등 3개 이상 입력하여 사용한다.
띄어쓰기를 중간에 사용해도 정상적으로 사용할 수 있지만, -은 헤더로 인식할 수 있기 때문에 주의해야한다.

🖊 마크다운 작성 방법

***
------
-- -- -- -- -- -- --

👉 결과




11. 탈출 문자(Escaping Chracters)

텍스트 형식에 사용되는 문자나 기호들을 표현하기 위해서는 \ 백슬래시(Backslash)를 사용한다.

🖊 마크다운 작성 방법

\* 백슬래시를 사용하면 정렬되지 않은 목록의 글머리 기호를 표현할 수 있다.

👉 결과
* 백슬래시를 사용하면 정렬되지 않은 목록의 글머리 기호를 표현할 수 있다.

12. HTML

마크다운(Markdown)에서 HTML 태그 또한 사용할 수 있다.

🖊 마크다운 작성 방법

<strong>굵은 제목</strong>
<h3>제목1</h3>
<a href="http://velog.io/@daekyeong">Dekay Blog</a><br>
<font color="blue">Blue</font>

👉 결과
굵은 제목

제목1

Dekay Blog
Blue

13. 표(Table)

테이블은 아래와 같이 작성합니다.
| 파이프(Pipe)로 구분하며, 4. 폰트 강조(스타일) 에서 다루었던 스타일 적용이 가능하다.
또한 -하이픈(hyphen)으로 구분된 곳 각각 왼쪽, 양쪽, 오른쪽에 :세미콜론을 붙이면 순서대로 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬이 가능하다.

🖊 마크다운 작성 방법

|왼쪽 정렬|가운데 정렬|오른쪽 정렬|
|:---|:---:|---:|
|**Header**|_Title_|Title|
|`Paragraph`|Text|Text|

👉 결과

왼쪽 정렬가운데 정렬오른쪽 정렬
HeaderTitleTitle
ParagraphTextText

14. 체크박스(Check Box)

-, *, + 뒤에 띄어쓰기 후 빈 공간을 가진 [ ]대괄호를 사용한다.
박스에 체크하고 싶다면 [x] 빈 공간 대신 x키를 입력하면 된다.

🖊 마크다운 작성 방법

- [ ] 꾸준하게 공부하기
- [x] 강의 듣기
- [ ] 코딩 연습

👉 결과

  • 꾸준하게 공부하기
  • 강의 듣기
  • 코딩 연습

15. 이모티콘 모음 👍

작성된 글 중간에 사용되는 이모티콘은 아래와 같이 사용하거나 사이트에서 복사하여 사용할 수 있다.

단축키

  • Window 10: Window Key(윈도우 키) + .(마침표)
  • Mac: Command + Control + Space Bar

사이트


앞으로 Velog 글을 쓰기 위한 마크다운 작성법에 대해 알아봤다. 마크다운을 처음 사용 해보았는데, 적용하기 어렵지는 않았다. 그리고 점점 마크다운에 적응될 때마다 글쓰기 페이지에서 사용할 수 있는 기능이 늘어나면서 상당한 재미를 느낄 수 있었다.🙂

end.

좋은 웹페이지 즐겨찾기