마크다운 사용법

peach·2020년 9월 6일
35

Velog Tip 💡

목록 보기
1/1
post-thumbnail

🌈 마크다운이란?


마크다운(MarkDown)은 일반 텍스트 기반의 경량 마크업 언어이다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다.



🌈 마크다운 문법


⚡ 제목 (Header)

제목은 # 기호를 사용해 구분한다.
# 기호를 1개 사용한 h1부터 # 기호를 6개 사용한 h6까지 사용할 수 있다.

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

⚡ 강조 (Emphasis)

강조하는 방법은 기울임체(Itaric), 굵게(Bold), 취소선(Strikethrough)이 있다.
물론 세 가지를 섞어서 사용할 수도 있다. 이때, 기호의 순서는 상관없다. 양쪽 표기가 대칭이기만 하면 된다.

🔥 강조 효과 하나 적용

*Itaric* or _Itaric_
**Bold** or __Bold__
~~Strikethrough~~

Itaric or Itaric
Bold or Bold
Strikethrough

🔥 강조 효과 여러 개 적용

***Itaric+Bold***
*~~Itaric+Strikethrough~~*
**~~Bold+Strikethrough~~**
***~~Itaric+Bold+Strikethrough~~***

Itaric+Bold
Itaric+Strikethrough
Bold+Strikethrough
Itaric+Bold+Strikethrough


⚡ 목록 (List)

순서가 있는 목록과 순서가 없는 목록으로 나눌 수 있다.
순서가 있는 목록의 경우에는 숫자 뒤에 .(온점)을 찍고 한 칸 띄워주면 된다. 주의할 점은 적힌 숫자가 그대로 적용되는 것이 아니라는 것이다. 처음 쓴 숫자를 기준으로 오름차순으로 적용된다.
순서가 없는 목록의 경우에는 +, -, * 중 골라서 사용하고 한 칸 띄워주면 된다.

🔥 순서가 있는 경우

1. 하나
2. 둘
123. 셋
  1. 하나

🔥 순서가 없는 경우

+ 하나
  + 둘
    + 셋
  • 하나
- 하나
  - 둘
    - 셋
  • 하나
* 하나
  * 둘
    * 셋 
  • 하나


⚡ 인용 (BlockQuote)

인용은 > 기호를 사용한다.
인용구 내에서 다른 문법을 적용하거나 문단을 구분할 수 있으며 중첩 사용도 가능하다.

> 첫 번째 인용
>> 두 번째 인용 첫 번째 문단
>>
두 번째 인용 두 번째 문단 첫 번째 문장
>> 두 번째 인용 두 번째 문단 두 번째 문장
>
다시 첫 번째 인용

첫 번째 인용

두 번째 인용 첫 번째 문단

두 번째 인용 두 번째 문단 첫 번째 문장
두 번째 인용 두 번째 문단 두 번째 문장

다시 첫 번째 인용


⚡ 이미지 (Image)

아래의 두 이미지는 겉으로 보기엔 동일해 보이지만, 두 번째 이미지에 커서를 올리면 지정한 텍스트상자가 나타난다.

![이미지텍스트](이미지경로)
![이미지텍스트](이미지경로 "커서를 올렸을 때 나타낼 텍스트")
![Google](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)

Google

Velog 에서 확인할 수 없다.

![Google](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png "Google")

Google


링크는 주소를 직접 표기할 수도 있고 텍스트나 이미지로 나타낼 수도 있다.

🔥 직접 삽입

https://www.google.com

https://www.google.com

<https://www.google.com>

https://www.google.com

🔥 텍스트로 삽입

[링크텍스트](링크)
[Google](https://www.google.com)

Google

🔥 이미지로 삽입

[![링크텍스트](이미지경로)](링크)
[![Google]
(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)](https://www.google.com)

Google


⚡ 코드 (Code)

코드를 삽입할 때는 ` 기호를 사용한다.
한 줄 코드는 앞뒤로 ` 기호를 붙여주면 되며, 문장 사이에 사용할 수 있다.
여러 줄의 코드는 앞뒤로 ``` 기호를 붙여주면 된다. 이때, 앞쪽의 ``` 다음에 해당 코드의 언어를 명시할 수 있다. 아래 코드에서는 블록 코드 끝부분의 ``` 가 표시되지 않았으니 참고하길 바란다.

변수를 `int val = 45;` 와 같이 선언한다.

변수를 int val = 45; 와 같이 선언한다.

``` cpp
int sum = 0;
for(int i = 0; i < 10; i++) {
    sum += i;
}
int sum = 0;
for(int i = 0; i < 10; i++) {
    sum += i;
}

⚡ 테이블 (Table)

테이블을 만들 때는 | 기호와 - 기호를 사용한다. 직관적으로 | 은 세로선, -- 은 가로선이라고 생각하면 된다. 정렬을 위해서는 : 기호를 사용한다. 기본적으로 제목은 가운데 정렬이고 내용은 왼쪽 정렬이다. 셀의 내용을 비워두고 싶은 경우에는 || 처럼 아무것도 쓰지 않으면 된다. 또한, 기본 텍스트에 적용되는 강조 방법을 사용할 수 있다.

🔥 테이블 생성

|A열|B열|C열|
|----|----|----|
|텍스트|텍스트|텍스트|
A열B열C열
텍스트텍스트텍스트

🔥 셀 정렬

Velog 에서 확인할 수 없다.

|A열|B열|C열|
|:----|:----:|----:|
|왼쪽정렬|가운데정렬|오른쪽정렬|
|정렬을 보기 위한 긴 문장|정렬을 보기 위한 긴 문장|정렬을 보기 위한 긴 문장|
A열B열C열
왼쪽정렬가운데정렬오른쪽정렬
정렬을 보기 위한 긴 문장정렬을 보기 위한 긴 문장정렬을 보기 위한 긴 문장

🔥 셀 비우기

|A열|B열|C열|
|----|----|----|
|비우지 않음|
||한 칸 비우기|
|||두 칸 비우기|
A열B열C열
비우지 않음
한 칸 비우기
두 칸 비우기

🔥 셀 강조

|A열|B열|C열|
|----|----|----|
|*Itaric*|**Bold**|~~Strikethrough~~|
A열B열C열
ItaricBoldStrikethrough

⚡ 수평선 (Line)

수평선을 나타내기 위해서는 - 또는 * 기호를 사용한다. 결과는 동일하니 골라서 사용하면 된다.

---
***




⛄ 참고문헌

3개의 댓글

comment-user-thumbnail
2020년 9월 6일

정리 잘하셨네요! 보기 편해요~~

1개의 답글
comment-user-thumbnail
2021년 5월 14일

너무 유용했어요! 감사합니다~

답글 달기