마크다운이란?

마크다운(Markdown)은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다.
HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.

---

Eelemets(block)

제목(title)
h1텍스트부터 h6을 이용해서 제목을 표현할 수 있다.

💻Code

# title h1..
## title h2..
### title h3..
#### title h4..
##### title h5..
###### title h6..

✔Result

title h1..

title h2..

title h3..

title h4..

title h5..

title h6..

---

인용문(Blockquotes)

본문 안에서 인용된 내용을 표시하고자 할 때 사용한다.

💻Code

> ## title1
 text
 text
>> ## title2
text
text
>>> ### title3
text

✔Result

title1

text
text

title2

text
text

title3

text

---

목록(List)

* + - 중 아무 기호나 사용하여 표현을 하거나 1. 2. 순차적인 목록을 나타내기도 한다.

💻Code

* LIST
+ LIST
- LIST
1. LIST1
2. LIST2
3. LIST3

✔Result

• LIST

• LIST

• LIST

1. LIST1
2. LIST2
3. LIST3

---

코드(Code Block)

tab 키를 이용하여 한줄로된 코드 블록을 만들거나 여러줄의 코드 블록의 경우 백틱(`) 3개로 감싸서 작성한다.

💻Code

function helloworld(){
	console.log('Hello World !');
}

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

Bash	bash
C#	cs
C++	cpp
CSS	css
Diff	diff
HTML, XML	html
HTTP	http
Ini	ini
JSON	json
Java	java
JavaScript	javascript
PHP	php
Perl	perl
Python	python
Ruby	ruby
SQL	sql

출처: 마크다운 왕초보 코드블록 사용가능한 언어 목록

선 삽입

가로선을 넣어서 맥락을 구분해줄 수 있다.

💻Code

* * *
***
*****
- - -
---
-----
_ _ _
___
_____

✔Result

---

---

---

---

---

---

---

---

Eelemets(Inline)

링크(HyperLinkText)

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

💻Code

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

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

참조 링크
[velog]:https://velog.io/ --> 선언을 해두고

[velog] --> 호출하여 사용

✔Result

인라인 링크

https://velog.io/

velog

---

Style TEXT

볼드, 이탤릭, 취소선

💻Code

*이탤릭*
_이탤릭_
**볼드**
__볼드__
~~취소선~~

✔Result

이탤릭
이탤릭
볼드
볼드
취소선

---

이미지 삽입(Images)

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

1. 일반 이미지 삽입하기: ![대체 텍스트](이미지 링크)
예시: ![PlaceHolder](https://via.placeholder.com/200x200)

2. 이미지에 설명 삽입하기: ![대체 텍스트](이미지 링크 "이미지 설명 문구")
예시: ![PlaceHolder](https://via.placeholder.com/200x200"이미지 예시입니다.")
** 참고: 이미지에 마우스를 올렸을 때 나타나는 설명을 의미함

3. 이미지에 링크 걸기: [![대체 텍스트](이미지 링크)](연결할 url "url 설명 문구")
예시: [![CloudScape]((https://via.placeholder.com/200x200)](https://via.placeholder.com "Via Image")

1. 일반 이미지 삽입하기: 
   예시:

2. 이미지에 설명 삽입하기: 
   예시:
   ** 참고: 이미지에 마우스를 올렸을 때 나타나는 설명을 의미함

3. 이미지에 링크 걸기: [](연결할 url "url 설명 문구")
   예시:

---

기호 표시(Backslash Escapes)

마크다운 문법에 있는 기호를 그대로 출력하고 싶다면, 역방향 슬래시를 앞에 붙여주면 된다.

💻Code

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

✔Result

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

---

테이블(Table)

수직선 기호(|)로 열을 구분할 수 있다
하이픈 기호(-)를 여러 개 붙여서 th와 tr을 구분할 수 있다.
콜론 기호(:)로 정렬을 표현할 수 있다.

💻Code

|    |left |center|right
|----|:----|:----:|----:
|row1|l1   |  c1  |   r1
|row2|l2   |  c2  |   r2
|row3|l3   |  c3  |   r3

✔Result

	left	center	right
row1	l1	c1	r1
row2	l2	c2	r2
row3	l3	c3	r3

---

END

벨로그를 잘 작성해보자는 의미로 마크다운언어를 정리해보았다.
업무할때 구글 체팅을 이용하여 사내에서 체팅을 사용하고 있는데 구글 체팅에서도 사용이가능 했었다.
알아두면 참 요긴하게 쓸 것으로 보인다 !

참고 사이트

내가 보려고 정리한 Velog(벨로그) 사용법 튜토리얼