0. 들어가기에 앞서

Velog를 작성하기 시작한 지 어느새 2주차에 접어들고 있는데, 아직까지도 마크다운 사용법을 제대로 정리하지 않았단 사실이 떠올랐다.
사실은 정리하고 싶다는 생각이 굴뚝 같기는 했는데... 수업 진도를 따라가는 데에만 고작이라 이걸 정리하는 걸 후순위로 미뤄왔던 것 같다.

하지만, 아무래도 TIL을 위한 Velog 작업에 많이 공을 들이는 편인 만큼, 특히 내가 자주 쓰는 기능 위주로 마크다운 사용법을 정리해놓고자 한다.

1. 마크다운이란?

데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 컴퓨터 언어의 일종, 마크업 언어 중 하나이다.
HTML 언어와 비교하여, 읽기도 쓰기도 좋은 문서 양식을 지향한다.
깃허브와 벨로그 등에서 사용하기 위해 마크다운을 공부하기로 했다.

2. 마크다운 문법

2.1) 문단 제목

# 제목 H1
## 제목 H2
### 제목 H3
#### 제목 H4
##### 제목 H5
###### 제목 H6

제목 H1

제목 H2

제목 H3

제목 H4

제목 H5

제목 H6

* 참고로 Velog 기준 이 제목 기준으로 오른쪽의 태그도 달라지니 적절하게 사용하도록 하자

(확실하지는 않지만, 아마 H1~H3부터 저런 바로가기가 붙게 되는 것 같고 H4 이후로는 표시가 안 되는 것 같다. 개인적 선호로는 H2 ~ H4를 섞어쓴다.)

2.2) 인용

>인용1
>>인용2
>>>인용3

인용1

인용2

인용3

2.3) 번호

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

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

참고로 이건 번호 순서를 아무렇게나 써도 처음 쓴 번호 기준으로 내림차순으로 정렬된다.

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

3. 세 번째
4. 두 번째
5. 첫 번째

가끔 마크다운 작성할 때 번호가 원하는 대로 입력되지 않아서 참 불편하다(_ _)

2.4) 글머리 기호

* A
  * B
    * C

• A
  • B
    • C

스페이스 두 번 이상 띄워줘야지 제대로 작동한다. 그리고 별이랑 텍스트가 붙으면 제대로 작동하지 않는다.
"+" 기호랑 "-" 기호로도 똑같은 효과를 보는데, 필자 선호는 별이라서 별로 쓴다.

2.5) 들여쓰기

마크다운은 탭을 치든 스페이스 바를 아무리 쳐도 들여쓰기가 안되니 조금 당황하기도 했었다.
불편하게도 들여쓰기를 따로 입력해주어야 한다.

공백 1개
 들여쓰기

공백 2개
 들여쓰기

공백 4개
 들여쓰기

 들여쓰기

 들여쓰기

 들여쓰기

(너무 미묘해서 안 보일 수도 있겠지만 들여쓰기 된 게 맞다)
대충 8칸을 띄우면 탭 한번 친 것과 비슷한 거리가 된다.

2.6) 엔터

엔터도 참 불편하게도, 아무리 마크다운에서 엔터 쳐 봐도 반영되지 않는다. (다만 한 줄 띄운 미묘한 차이는 있다.)

---
전 문단
후 문단

---
전 문단

후 문단

---
전 문단

</br>
후 문단

---

전 문단
후 문단

---

전 문단

후 문단

---

전 문단

후 문단

다만 가끔 엔터를 붙인 위치에 따라 이상하게 띄어쓰기가 되는 경우가 있으니 주의하도록 하자.

2.7) 코드블럭

아무래도 앞으로 코딩하는 입장에서 가장 많이 쓰게 될 문법이 아닌가 싶다.
선호하는 기호는 "~~~" 두 개 사이에 코드를 작성하는 것이다

여기 코드를 작성했어요

2.8) 수평선

사실은 써 보고 싶기는 한데 아직까지 안 써봤다. 그래도 알아두면 유용할 것 같다.

<hr/>

---

2.9) 강조

*기울이기*
**강조**
~~취소선~~

기울이기
강조
취소선

2.10) 링크, 이미지, 동영상

1. 링크를 바로 복사하면 바로가기가 안 된다. <> 기호 사이에 넣어주면 작동한다.

<https://www.naver.com/>

2. 이미지는 사실 그냥 velog에 드래그 앤 드롭 하면 바로 삽입된다.

사이즈 조절 기능은 없는데 아래 방법을 사용한다
<img width="" height=""></img>		// px, % 로 크기 조절

3. 동영상은 삽입이 안되지만, 꼼수로 동영상을 gif로 변환해서 넣을 수는 있다.

동엉상 gif로 변환하는 사이트 : https://convertio.co/kr/mov-gif/

3. 마크다운 심화(?)문법

(사실 이 부분을 쓰려고 작성한 글이다.)
자주 쓰는 기능인데, 아무래도 코드 길이가 길다 보니 쓰기 귀찮은 것들을 여기에 모아놨다

3.1) 글자색, 배경색

글자색, 배경색을 변경하는 기본 코드 구조는 다음과 같다
<span style="color:(rgb색깔코드); background-color:(rgb색깔코드);">



자주 쓰는 것들 모음

1. 글자색 회색 + 취소선 (주로 잡소리용)
<span style="color:#808080;">~~(그냥 넘어가주세요)~~</span>

2. 글자색 검정 + 배경색 노랑 (강조)
<span style="color:#000000; background-color:#ffff33;">(중요합니다)</span>

3. 글자색 빨강 + 배경색 노랑 + 두껍게 (매우매우강조)
**<span style="color:#ff0000; background-color:#ffff33;">(매우매우중요합니다)</span>**

4. 두껍게 + 밑줄 (주목)
<u>**(봐주세요)**</u>

1. 글자색 회색 + 취소선 (주로 잡소리용)
   (그냥 넘어가주세요)

2. 글자색 검정 + 배경색 노랑 (강조)
   (중요합니다)

3. 글자색 빨강 + 배경색 노랑 + 두껍게 (매우매우강조)
   (매우매우중요합니다)

4. 두껍게 + 밑줄 (주목)
   (봐주세요)

3.2) RGB색 정리

그냥 자주 쓸 것 같은 색상표는 따로 정리해두자

빨강 : #ff0000
주황 : #fe5e00
노랑 : #ffff33
초록 : #1ddb16
파랑 : #0100ff
회색 : #808080
검정 : #000000
흰색 : #ffffff

빨강
주황
노랑
초록
파랑
회색
검정
흰색

3.3) 표

아무래도 표는 꽤 쓰는 편인데 이게 적기가 진짜 귀찮다.

|여기에|열이름|적어요|
| --- | --- | --- |
|위쪽이|경계선|이에요|
|내용을|적으면|되겠죠?|

여기에	열이름	적어요
위쪽이	경계선	이에요
내용을	적으면	되겠죠?

3.4) 표 내에서의 정렬

":" 표시로 정렬 위치를 표시해주면 된다.

|기본값|왼쪽 정렬|가운데 정렬|오른쪽 정렬|
|---|:---|:---:|---:|
|내용 1|내용 2|내용 3|내용 4|
|내용 5|내용 6|내용 7|내용 8|
|내용 9|내용 10|내용 11|내용 12|

기본값	왼쪽 정렬	가운데 정렬	오른쪽 정렬
내용 1	내용 2	내용 3	내용 4
내용 5	내용 6	내용 7	내용 8
내용 9	내용 10	내용 11	내용 12

3.5) 코드 강조

아직까지는 써 보지 않은 것이었는데, 찾던 기능을 드디어 찾았다.

백틱 기호(`) 또는 <code> (내용) </code> 로 사용한다

<code>강조</code>
`중요`

강조
중요

3.6) 특정 문자열 표시하기

마크다운을 쓰다 보면 '*' 이라든지 + 나 - | 등 특정 문자열이 원하는 대로 출력되지 않는 경우가 생긴다. 이럴 때 역슬래시를 문자 앞에 사용하면 된다.

* 이건 별입니다

\* 이견 별입니다

• 이건 별입니다

* 이견 별입니다

-참고자료
(마크다운 사용법)
https://gist.github.com/ihoneymon/652be052a0727ad59601