⌨️ 마크다운 ?

마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다. - 위키백과

README 파일 작성과 벨로그 등 온라인 문서 작성을 하기위해 마크다운 문법을 익힐 필요가 있어 튜토리얼 문서를 작성하였다.

제목 (Header)

---

• h1~h6 표현 가능, #의 갯수로 크기 조절
• 또는 h1과 h2는 하이픈 사용해 크기 조절 가능

⌨️ 마크다운 작성

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

h1
==
h2
__

🖨 화면 출력

title(h1)

title(h2)

title(h3)

title(h4)

title(h5)

title(h6)

title(h1)

title(h2)

문단 간격

---

• 문단과 문단 사이는 빈줄(엔터키 두번)로 구분
• 한 줄 이상 간격을 조절하고 싶을 때는 <br />을 사용

⌨️ 마크다운 작성

1번 문단 <br /><br />
2번 문단

🖨 화면 출력

1번 문단


2번 문단

폰트 강조

---

• Bold(굵게), Italic(기울여진), 취소선 등으로 폰트를 강조

⌨️ 마크다운 작성

__Bold__
**Bold**
_Italic_
*Italic*
~~del~~

🖨 화면 출력

Bold
Bold
Italic
Italic
del

폰트 컬러

---

• html style tag를 사용해 폰트 컬러, 하이라이트 삽입 가능

⌨️ 마크다운 작성

<span style="color: red">빨강</span>
<span style="color: blue">파랑</span>
<span style="color: green">초록</span>
<span style="color: #808080">그레이</span>
<span style="color: #2D3748; background-color:#fff5b1;">HighLight</span>

🖨 화면 출력

빨강
파랑
초록
그레이
HighLight

목록(List)

---

1. 순서가 있는 목록

• 숫자와 .을 사용해 작성
• 순서를 바꿔 입력해도 자동으로 내림차순 표시

⌨️ 마크다운 작성

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

🖨 화면 출력

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

2. 순서가 없는 목록

• 불릿 기호 *, -, +을 사용해 작성
• Space bar과 Tab를 통해 들여쓰기

⌨️ 마크다운 작성

* 순서없는 목록 1
  * 순서없는 목록 1.1
    * 순서없는 목록 1.1.1

🖨 화면 출력

• 순서없는 목록 1
  • 순서없는 목록 1.1
    • 순서없는 목록 1.1.1

인용(Blockquotes)

---

• > 사용, > 갯수에 따라 중첩인용 가능

⌨️ 마크다운 작성

> 1번 인용문
>> 2번 인용문
>>> 3번 인용문

🖨 화면 출력

1번 인용문

2번 인용문

3번 인용문

코드블럭

---

• 코드블럭 시작점에 사용하는 언어를 선언하면 Syntax Highlighting이 가능

  언어 이름	작성 방식
  Bash	bash
  C	c
  Java	java
  JavaScript	javascript
  Python	python
  JSON	json
  CSS	css
  HTML, Xml	html
  HTTP	http
  그외 ...

1. 인라인 코드

• 백틱(`) 1개를 사용해 작성

⌨️ 마크다운 작성

`console.log(인라인 코드);`

🖨 화면 출력

console.log(인라인 코드);

2. 여러줄 코드

• 백틱(`) 3개를 사용해 작성
• <pre><code>{code}</code></pre> 로도 작성 가능

⌨️ 마크다운 작성

```javascript
console.log(여);
console.log(러);
console.log(줄);

```

<pre>
	<code>
    console.log(여~);
	console.log(러~);
	console.log(줄~);
	</code>
</pre>

🖨 화면 출력

console.log(여);
console.log(러);
console.log(줄);

console.log(여~);
console.log(러~);
console.log(줄~);

테이블(Table)

---

• 열은 수직선 기호|로 표현
• 행은 하이픈 기호-으로 표현, -의 개수로 th와 tr을 구분
• 콜론 기호 :로 정렬 표현

⌨️ 마크다운 작성

|    |col1 |col2 |col3
|----|:----|:----:|----:
|align|left |center |right
|row1| c11 | c21 | c31
|row2| c12 | c22 | c32
|row3| c13 | c23 | c33

🖨 화면 출력

	col1	col2	col3
align	left	center	right
row1	c11	c21	c31
row2	c12	c22	c32
row3	c13	c23	c33

체크박스(Check Box)

---

• 불릿 기호 *, -, + 뒤에 띄어쓰기 후 대괄호[ ]를 넣어 사용
• 대괄호 안에 공란(띄어쓰기)를 하면 체크되지 않은 상태, x를 입력하면 체크 상태

⌨️ 마크다운 작성

- [ ] unchecked
- [x] checked

🖨 화면 출력

• unchecked
• checked

링크(Link)

---

• 언라인 링크, url링크, 참초 링크 세가지 표현 가능

⌨️ 마크다운 작성

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

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

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

🖨 화면 출력

인라인 링크
인라인 링크

url 링크
https://velog.io/

참조 링크 velog

이미지(Image)

---

1. 링크없는 이미지

• ![이미지 설명](이미지 링크)

⌨️ 마크다운 작성

![컴냥이](https://cdn.pixabay.com/photo/2021/01/30/03/33/video-call-5962733_1280.jpg)

🖨 화면 출력

2. 링크있는 이미지

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

⌨️ 마크다운 작성

[![컴냥이](https://cdn.pixabay.com/photo/2021/01/30/03/33/video-call-5962733_1280.jpg)](https://cdn.pixabay.com/photo/2021/01/30/03/33/video-call-5962733_1280.jpg)

🖨 화면 출력

수평선

---

• *, -, _ 등을 세개 이상 입력시 표현 가능하며, 다양한 방법이 있다.

⌨️ 마크다운 작성

아래는 모두 동일한 가로선입니다.
***
* * *
*****
---
- - -
___
______

🖨 화면 출력

---

---

---

---

---

---

---

기호 표시

---

• 마크다운 문법에 있는 기호를 그대로 출력하고 싶다면, 역방향 슬래쉬 \를 붙여준다.

⌨️ 마크다운 작성

\*
\_
\()
\{}
\[]
\#
\+
\-
\.
\!
\\

🖨 화면 출력

*
_
()
{}
[]
#
+
-
.
!
\

참고 사이트
https://velog.io/@ybkim3603/Velog벨로그-사용법-튜토리얼
https://velog.io/@nsunny0908/MarkDown-마크다운-문법-정리
https://velog.io/@yuuuye/velog-마크다운MarkDown-작성법
https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4

---