📌 마크다운(Markdown)

마크다운은 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되는 경량 마크업 언어다. 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이며, 마크다운을 이용해 작성된 문서는 쉽게 HTML로 변환 가능하다.

그렇다면 마크업 언어는 무엇일까?

마크업 언어(Markup Language)

태그(tag)를 사용해 문서나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 컴퓨터 언어를 뜻한다. 일반적으로 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와는 구별된다.

가장 잘 알려진 마크업 언어는 HTML(Hypertext Markup Language) 이다.

다시 말해서 마크다운은 태그로 이루어진 복잡한 마크업 언어를 대체하기 위해 만들어진 마크업의 파생형이다. 그래서 보통의 마크업 언어보다 이해, 편집, 처리하기가 쉽다.

하지만, 마크다운은 모든 HTML의 문법을 대신하지 못한다.

---

📌 마크다운 문법 + HTML 태그

1. 제목(Header)

제목	마크다운 문법	HTML 태그
h1	# or ==	<h1>…</h1>
h2	## or --	<h2>…</h2>
h3	###	<h3>…</h3>
h4	####	<h4>…</h4>
h5	#####	<h5>…</h5>
h6	######	<h6>…</h6>

💡 설명

제목은 <h1> 부터 <h6> 까지 있다. # 의 개수에 따라 또는 <h> 태그를 이용해 표현할 수 있으며, <h1> 과 <h2> 는 = 와 - 를 각각 2개 이상씩 사용해 대체할 수 있다.

✏️ 입력 예시

# This is a h1.
## This is a h2. 
### This is a h3.
#### This is a h4. 
##### This is a h5.
###### This is a h6. 

This is a h1.
==
This is a h2.
--

<h1>This is a h1.</h1>
<h2>This is a h2.</h2>
<h3>This is a h3.</h3>
<h4>This is a h4.</h4>
<h5>This is a h5.</h5>
<h6>This is a h6.</h6>

✏️ 출력 예시

This is a h1.

This is a h2.

This is a h3.

This is a h4.

This is a h5.

This is a h6.

---

This is a h1.

This is a h2.

---

This is a h1.

This is a h2.

This is a h3.

This is a h4.

This is a h5.

This is a h6.

---

2. 강조(Emphasis)

강조	마크다운 문법	HTML 태그
기울이기	*…* or _…_	<em>…</em>
굵게	**…** or __…__	<strong>…</strong>
취소선	~~…~~	<del>…</del>
글자색		<span style="color:…">…</span>

💡 설명

기울이기(Italic), 굵게(Bold), 취소선(Strikethrough), 글자색 등의 기본적인 스타일을 아래와 같이 작성할 수 있다. 밑줄(Underscore) 은 <u> 태그로 표현할 수 있는데, velog 에서는 적용이 되지않는다.

글자색은 색명, RGB, HEX 코드를 이용해 나타낼 수 있다.
✖️ RGB, HEX 색상 코드를 확인할 수 있는 사이트 ✖️

✏️ 입력 예시

*Italic* 
_Italic_ 
<em>Italic</em>

**Bold** 
__Bold__  
<strong>Bold</strong>

~~strikethrough~~ 
<del>strikethrough</del>

<span style="color:red">red</span>
<span style="color:#2c4861">#2c4861</span>
<span style="color:rgb(91, 33, 158)">rgb(91, 33, 158)</span>

✏️ 출력 예시

Italic
Italic
Italic

---

Bold
Bold
Bold

---

strikethrough
strikethrough

---

red
#2c996e
rgb(91, 33, 158)

---

3. 코드블럭(Code Blocks)

코드블럭	마크다운 문법	HTML 태그
인라인 코드	` … `	<code>…</code>
한 줄 코드블럭	Tab 키
여러 줄 코드블럭	``` … ```	<pre>…</pre>

3-1. 인라인 코드

인라인 코드는 함수 정의 또는 변수 이름과 같이 단락 내에서 짧은 코드 조각을 강조할 때 사용한다. 백틱(`) 또는 <code> 태그를 이용해 표현할 수 있으며, 백틱 문자는 ESC 키 밑에 있는 따옴표를 의미한다.

✏️ 입력 예시

`This is a line.` 

<code>This is a line.</code>

✏️ 출력 예시

This is a line.

---

This is a line.

3-2. 한 줄 코드블럭

한 줄짜리 코드블럭은 Tab 키를 이용해서 표현할 수 있다. 다만, Tab 키 사용시 이전 문장으로부터 Enter 2번 누른 후 표현이 된다.

✏️ 입력 예시

Tab This is a line.

✏️ 출력 예시

This is a line.

3-3. 여러 줄 코드블럭

여러 줄의 코드블럭은 백틱(`) 3개와 <pre></pre>를 이용해서 표현할 수 있다. 백틱 3개 뒤에 언어 이름을 쓰면 코드 하이라이트를 표현할 수 있다.

✏️ 입력 예시

``` 
Inline Code 
for multiple lines.
```

``` c
#include <stdio.h>

int main()
{
	printf("Hello world!\n");

	return 0;
}
```

``` python
num_list = ['one', 'two', 'three']
for num in num_list:
  print(num)
```　

<pre>
Inline Code 
for multiple lines.
</pre>

✏️ 출력 예시

Inline Code 
for multiple lines.

---

#include <stdio.h>
int main()
{
	printf("Hello world!\n");
	return 0;
}

---

num_list = ['one', 'two', 'three']
for num in num_list:
  print(num)

---

Inline Code 
for multiple lines.

---

4. 인용구(BlockQuote)

	마크다운 문법	HTML 태그
인용구	>	<Blockquote>…</Blockquote>

💡 설명

인용구는 꺽쇠괄호(>) 또는 <Blockquote> 태그를 이용해서 표현할 수 있다. 꺽쇠괄호의 개수에 따라서 이중, 삼중 이상으로 사용이 가능하다.

✏️ 입력 예시

> This is a BlockQuote 1.
>> This is a BlockQuote 1-1.
>>> his is a BlockQuote 1-2.

<Blockquote>This is a BlockQuote 2.</Blockquote>

✏️ 출력 예시

This is a BlockQuote 1.

This is a BlockQuote 1-1.

his is a BlockQuote 1-2.

This is a BlockQuote 2.

---

5. 개행(Newline)

	마크다운 문법	HTML 태그
개행		<br/>

💡 설명

문단 간격은 줄 바꿈(Enter) 로 나타내며, 여러 번의 줄 바꿈 은 <br/> 로 표현 할 수 있다.

✏️ 입력 예시

This is the first paragraph. <br/><br/>
This is the second paragraph.

✏️ 출력 예시

This is the first paragraph.


This is the second paragraph.

---

6. 수평선(Horizontal Rules)

	마크다운 문법	HTML 태그
수평선	**** or ____ or -- --	<hr/>

💡 설명

수평선은 *, _, - 를 각각 3개 이상 작성하거나 <hr/> 태그로 표현할 수 있다. 이때, - 는 <h2> 헤더로 인식할 수 있으니 주의해서 사용해야 한다.

✏️ 입력 예시

****
____
-- --

<hr/>

✏️ 출력 예시

---

---

---

---

---

7. 목록(List)

목록	마크다운 문법	HTML 태그
Ordered List	숫자.	<ol><li>…</li></ol>
Unordered List	*, -, +	<ul><li>…</li></ul>

7-1. 순서가 있는 리스트(Ordered List)

순서를 표기하는 목록은 숫자. 또는 <ol> 태그와 <li> 태그의 조합을 이용해서 표현할 수 있다.

HTML 태그를 사용해 시작하는 번호를 지정하려면 <ol start="…"> 로 작성한다. 그리고 특정 목록의 번호를 지정하려면 <li value="…"> 을 사용한다.

✏️ 입력 예시

1. First
2. second

<ol>
	<li> First </li>
	<li> Second </li>
</ol>

<ol start="5">
	<li> Five </li>
	<li value="9"> nine </li>
    <li> ten </li>
</ol>

✏️ 출력 예시

1. First
2. second

---

1. First
2. Second

---

5. Five
6. nine
7. ten

7-2. 순서가 없는 리스트(Unordered List)

순서가 없는 목록은 *, -, + 중 아무거나 이용하면 표현할 수 있다. 또한, <ul> 태그와 <li> 태그의 조합으로 표현할 수 있다.

✏️ 입력 예시

* list
- list
+ list

<ul>
	<li>list</li>
	<li>list</li>
</ul>

✏️ 출력 예시

• list

• list

• list

• list
• list

---

8. 테이블(Table)

테이블은 | 로 구분해 선을 만들고 - 로 제목과 데이터 영역을 나눈다. 정렬은 : 을 이용해 오른쪽/가운데/왼쪽 정렬을 할 수 있지만, velog 에서 적용이 안된다.

✏️ 입력 예시

| Title 1 | Title 2 | Title 3|
| :--- | :---: | ---: |
| Left | Center | Right |
| Data | Data | Data |

✏️ 출력 예시

Title 1	Title 2	Title 3
Left	Center	Right
Data	Data	Data

---

9. 이미지(Image)

	마크다운 문법	HTML 태그
이미지		<img alt="제목" src="링크"/>

💡 설명

이미지를 첨부할 때, ![제목](링크) 또는 <img alt="제목" src="링크"/> 태그를 이용해 표현할 수 있다. 복사/붙여넣기를 사용해도 상관없다(자동으로 표현된다).

✏️ 입력 예시

![Nature](https://cdn.pixabay.com/photo/2021/12/05/10/28/nature-6847175_960_720.jpg)

<img alt="ocean" src="https://cdn.pixabay.com/photo/2021/08/08/10/34/ocean-6530523_960_720.jpg"/>

✏️ 출력 예시

---

10. 링크(Link)

링크	마크다운 문법	HTML 태그
인라인 링크	[제목](링크)	<a href="…">…</a>
URL 링크	<링크>
참조 링크	[제목]:링크 [제목]
이미지 링크	[](연결하고자 하는 링크)

10-1. 인라인 링크(Inline Link)

✏️ 입력 예시

[My velog](https://velog.io/@thwlsdl1202)

<a href="https://velog.io/@thwlsdl1202">My velog</a>

✏️ 출력 예시

My velog
My velog

10-2. URL 링크(URL Link)

✏️ 입력 예시

<https://velog.io/@thwlsdl1202>

✏️ 출력 예시

https://velog.io/@thwlsdl1202

10-3. 참조 링크(Reference Link)

✏️ 입력 예시

[My velog]:<https://velog.io/@thwlsdl1202>
My velog 바로가기 : [My velog] 로 놀러오세요~

✏️ 출력 예시

My velog 바로가기 : My velog 로 놀러오세요~

10-4. 이미지 링크

[![이미지 설명](이미지 링크)](연결할 링크)

✏️ 입력 예시

[![sunset](https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg)](https://velog.io/@thwlsdl1202)

✏️ 출력 예시

---

11. 이스케이프 기호(Backslash Escape)

이스케이프 문자	마크다운 문법
backslash	\\
backtick	\ `
curly braces	\{ , \}
square brackets	\[, \]
hash mark	\#
asterisk	\*
plus	\+
minus	\-

💡 설명

마크다운에서는 *, `, \와 같이 특별한 의미를 가진 마크업 문자 그 자체를 얻기 위해서 백 슬래시로 이스케이프 처리하여 사용한다. 참고로 표에서 마크다운 문법이나 HTML 태그를 사용할 때 백틱으로 감싸도 상관없다.

✏️ 입력 예시

\\
\`
\{ 
\}
\[
\]
\#
\*
\+
\-

✏️ 출력 예시

\
`
{
}
[
]
#
*
+
-

---

📌 마무리

velog 를 본격적으로 시작하기 전 많이 사용할 것 같은 마크다운 문법에 대해 알아보기 위해 작성한 글 이다. '나'를 위해 정리한 글이기 때문에 이미 알고있거나 쓰지 않을 것 같은 이모지, 체크박스 등의 내용은 정리하지 않았다.

[ 참고한 블로그 ]

• 마크업과 마트다운의 차이
• 마크다운 문법(Markdown Syntax, HTML)
• velog 마크다운(markdown) 작성법