마크다운(MarkDown) 문법 정리

Memory With Me (메윗미)·2024년 1월 24일

#6D50FF Markdown Memory With Me Memory With You velog

MarkDown

목록 보기

1/1

기존 문서에서 글을 적는 것과 다르게 마크다운(MarkDown)은 특별한 문법을 사용한다.
본 글에서는 해당 기능들을 크게 다음의 3가지 섹션으로 구분하여 각각의 예시와 함께 서술하겠다.
또한, 모든 글의 내용은 옵시디언(Obsidian)과 벨로그(Velog)를 기준으로 서술하겠다.

기본 문법
꾸미기
링크

기본 문법

1. 헤더 (Headers)

마크다운에는 작성하는 글자 폰트의 크기 개념이 존재하지 않는다.
이를 다르게 해주기 위해선 #을 사용하여 구분한다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

#(1~6개) [Space] 제목

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

# 제목 1

## 제목 2

### 제목 3

#### 제목 4

##### 제목 5

###### 제목 6

🖥️ OUTPUT

제목 1

제목 2

제목 3

제목 4

제목 5

제목 6

주의할 점은 헤더 즉, 제목이므로 각 헤더 사이의 간격은 사용자가 조절할 수 없다는 것이다.

2. 줄 바꾸기 (Headers)

필자가 사용하는 옵시디언(Obsidian), 벨로그(velog) 등의 경우에는 줄 바꾸기가 지원된다.
하지만 다른 마크다운이 지원되는 플렛폼에서는 줄 바꾸기를 사용자가 직접 해주어야만 한다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

내용 [Space] [Space] [Enter]

내용 <br>

예를 들어, 다음과 같은 문장을 입력하여 줄 바꾸기를 강제로 표현한다면 결과는 그 아래와 같다.

📝 INPUT

첫 번째 줄 내용. <br>
두 번째 줄 내용. [Space] [Space]
세 번째 줄 내용.
네 번째 줄 내용.
다섯 번째 줄 내용.

🖥️ OUTPUT
첫 번째 줄 내용.
두 번째 줄 내용.
세 번째 줄 내용. 네 번째 줄 내용. 다섯 번째 줄 내용.

줄 바꾸기는 대부분 원하는 곳에 [Enter]를 입력했을 경우, 제대로 지원하는 플렛폼이 많으니 신경쓰지 않아도 될 것 같다.

3. 공백 추가 (Add Space)

마크다운에서는 문장 사이에 [Space] 여러 번 넣는다고 하여도, 사이 간격은 딱 한 번만 벌어진다.
하지만 필자와 같이 문장 사이에 [Space]를 크 게 넣는 것을 좋아하는 사용자는 마크다운을 사용하면서 이 문장 사이 공백 추가하는 기능이 절실할 것이다.

마크다운은 HTML을 사용할 수 있기 때문에 문장 사이 공백을 추가하기 위해선 HTML에서 사용하던 것 처럼 공백 문자를 사용해주면 된다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

공 [&nbsp] [&nbsp] [&nbsp] 백

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

공 &nbsp &nbsp &nbsp &nbsp &nbsp 백

🖥️ OUTPUT
공 백

한가지 팁이 있다면, &nbsp와 &nbsp 사이에도 [Space]를 넣으면 이것도 띄어쓰기로 인식되어 더욱 적은 공간에서 더욱 넓은 공백을 창조할 수 있다.

4. 강조 폰트체 (Emphasis)

마크다운에서 지원하는 글자를 강조하는 폰트체는 크게 다음과 같다.
1. 볼드체
2. 이탤릭체
3. ~~가로줄~~
4. 밑줄

볼드체는 많은 이들이 익숙하게 들어왔을 것이다.
바로 한글과 같은 문서창에서 [Ctrl] + [B]로 많이 적용시키던, 글자 폰트를 굵게 하여 강조하는 느낌을 전달하는 폰트체이다.

이탤릭체 는 들어본 적이 별로 없을 것이다.
해당 폰트를 부르는 단어가 익숙하지 않은 것인데, 사실은 이탤릭체 와 같이 글자를 사선으로 눞혀서 강조하는 느낌을 전달하는 폰트체이다.
손 글씨를 기반으로 45° 흘려 쓰는 폰트이다.

~~가로줄~~은 지속적인 업데이트가 이루어지는 문서, 나무위키 등에서 자주 볼 수 있다.
기존에 서술된 내용이 변경, 수정 되었을 경우 가로줄을 추가하여 기존 내용을 볼 수 있는 형태로 변경하는 폰트체이다.

밑줄은 볼드체와 같이 글자 밑에 줄을 덧대어 강조하는 느낌을 전달하는 폰트체이다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

** 볼드체 **

_ 이탤릭체 _

~~ 가로줄 ~~

<u> 밑줄 </u>

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

**볼드체**
_이탤릭체_
~~가로줄~~
<u>밑줄</u>

🖥️ OUTPUT
볼드체
이탤릭체
~~가로줄~~
밑줄

당연하게도, 헤더에 경우 볼드체는 적용이 불가능하며, 이탤릭체, 가로줄, 밑줄은 가능하다.
몇몇 곳에서는 헤더에 볼드체를 적용하면 색상을 바꿔주는 곳도 존재하긴 한다.
추가적으로 밑줄이 타이핑 단계에서는 보이지만, 결과물에서 안보이는 현상이 존재하는 것 같다.

5. 목록 (List)

필자는 PPT, 논문 등을 작성할 때 제일 처음으로 큰 틀의 목차를 작성하고, 제일 마지막으로 목차에 해당 페이지를 부여하면서 작성을 마무리하는 것을 좋아한다.
그때 해당 기능은 필자가 굉장히 좋아하는 기능 중 하나이다.

목록에는 크게 2가지가 존재한다.
1. 순서가 있는 목차
2. 순서가 필요 없는 목차

마크다운은 2가지 모두 사용 가능하다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

[순서가 있는 목차]

[숫자.] 내용

[순서가 없는 목차]

* 내용
- 내용
+ 내용

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

[순서가 있는 목차]

1. 초등학교
2. 중학교
3. 고등학교
[Tab] 1. 일반고 [Enter]   (순서 : 1 > 5 > 9)
5. 특목고 [Enter]
9. 자사고

🖥️ OUTPUT

초등학교
중학교
고등학교 (순서 : 1 > 5 > 9)
1. 일반고
2. 특목고
3. 자사고

📝 INPUT

[순서가 없는 목차]

* 사과
- 딸기
+ 체리
	+ 망고

🖥️ OUTPUT

사과

딸기

체리
+ 망고

순서가 있는 목차에서는 특이점이 2가지 존재한다.
첫 번째로, 순서가 있는 목차에서는 [숫자]. 에 어떠한 숫자를 집어넣어도 1부터 순서대로 번호가 매겨진다.
위에 적힌 예시를 보더라도 1 > 5 > 9 순서로 타이핑 하였지만, 우리에게 보이는 것은 1 > 2 > 3의 순서이다.
두 번째로, 순서가 필요 없는 목차에서는 [Tab]을 통한 들여쓰기가 불가능하다.
필자가 사용하는 옵시디언의 경우는 해당 기능을 지원하지만, 벨로그 등은 불가능하다.

6. 인용문 (BlockQuote)

인용문 기능은 지금까지 해당 글을 작성하면서 가장 많이 사용된 기능 중 하나이다.
박스 안에 글을 작성하여 글을 강조하거나, 본문과는 다른 내용을 담을 때 사용한다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

> 내용
>> 내용
>>> 내용

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

문자
> 한글
>> 자음
>>> ㄱ
>>> ㄴ
>>> ㄷ
>>
>> 모음
>>>ㅏ
>>> ㅑ

🖥️ OUTPUT

문자

한글

자음

ㄱ
ㄴ
ㄷ

모음

ㅏ
ㅑ

필자는 이미 해당 섹션에서 >를 통해 기능을 보여주기 때문에 실제 해당 목록을 구현하기 위한 >의 갯수 차이가 발생할 수 있다.

7. 코드 박스 (Code Box)

글을 작성하다보면, 필자와 같은 공학도들은 프로그래밍 코드를 작성해야할 경우가 있다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

` 코드 `

[Enter]
[Enter]
[Tab] 내용

한 줄짜리 코드를 작성하는 방법은 보는 것과 같이 2가지이다.
[Tab]을 사용할 때는 [Enter]로 이전 줄과 2줄 이상 간격이 존재해야한다.

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

`printf("Hello, world!\n");`

[Enter]
[Enter]
[Tab] printf("Hello, world!\n");

🖥️ OUTPUT
printf("Hello, world!\n");
printf("Hello, world!\n");

해당 기능은 코드 그대로를 보여줄 수 있다는 장점이 있다.

8. 코드 블록 (Code Block)

7번과 같이 특정 코드 한 줄을 보여주어야 할 때도 있지만, 특정 언어에 따른 코드를 블록으로 보여주어야 할 때도 있다.
이때, 아래의 언어들은 사용되는 Syntax Highlighting을 표현해줄 수 있다.

Language	Text
Null	null
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

기본적인 사용 방법은 다음과 같다.

🙋 How To

``` [Language Text]
Code
```

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

``` C
#include <stdio.h>

int main()
{
	printf("Hello, world!\n");
	return 0;
}
```

🖥️ OUTPUT

#include <stdio.h>

int main()
{
	printf("Hello, world!\n");
	return 0;
}

보이는 것과 같이 각 언어에 맞는 Syntax Highlighting이 보여진다.

9. 수식 (Mathematical Expression)

코드와 마찬가지로 특정 수식을 적어야 할때도 존재한다.
이때, LaTex를 사용하면 매우 편리한데, 마크다운은 LaTex를 지원한다.
해당 부분은 너무나도 많은 방법이 존재하므로 간단한 몇가지만을 언급한 채 다음 글에서 다시 다루도록 하겠다.

기본적인 사용 방법은 다음과 같다.

🙋 How To
$ 수식 $
$$ 수식 $$

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

$e^{i \theta} = cos(\theta) + i sin( \theta)$

$I_D = \frac {1}{2}kn(V_{ov})^2$

$I_D = \frac {1}{2} \mu_n \frac {\epsilon_{ox}}{t_{ox}} \frac {W}{L} [2(V_{GS} - V_{TH})V_{DS} - {V_{DS}}^2]$

🖥️ OUTPUT
$e^{i \theta} = cos(\theta) + i sin( \theta)$

$I_D = \frac {1}{2}kn(V_{ov})^2$

$I_D = \frac {1}{2} \mu_n \frac {\epsilon_{ox}}{t_{ox}} \frac {W}{L} [2(V_{GS} - V_{TH})V_{DS} - {V_{DS}}^2]$

수식의 경우는 워낙 다양한 종류가 있어서, 필요할 때마다 LaTex를 검색하거나 후술 할 출처를 통해 확인하면 된다.

10. 수평선 (Horizontal Rule)

글을 쓰다가 특정 주제를 완전히 종료하고 다음 주제로 넘어갈 때 우리는 가로선을 긋고는 한다.
그때, 해당 기능이 매우 유용하다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

[별표]
* * *
***

[대쉬]
- - -
---

[언더바]
_ _ _
___

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

[별표]
* * *
***
[대쉬]
- - -
---
[언더바]
_ _ _
___

🖥️ OUTPUT
[별표]

[대쉬]

[언더바]

각 기호별로 3개 이상 작성되면 가로선이 생성된다.

11. 각주 (Footnotes)

논문 등을 작성할 때, 각주와 미주를 사용하는 경우가 많다.
단어, 내용 등의 자세한 내용을 서술하기에는 해당 글의 맥락과 맞지 않거나 기본적인 개념일 경우 해당 단어, 내용의 우측 상단에 번호를 매겨서 각주와 미주 등을 넣는다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

[옵시디언]

이것은 각주[^각주 이름]입니다.

[^각주 이름]: 이것은 설명입니다.

[벨로그]

이것은 각주<sup>[각주 이름](#각주링크)</sup>입니다.

<a name="각주링크"> 각주 이름 </a>: 이것은 설명입니다.

옵시디언 각주는 나름 쉽고 간결하다.
하지만 벨로그의 경우는 HTML 방식을 인용하는 방식으로 사용하는데, 가장 큰 특징은 각주 이름과 각주 링크가 따로 존재한다는 것이다.
즉, 내가 이것은 각주<sup>[사과](#과일)</sup>입니다.와 같이 사과로 각주 이름을 설정하고 과일로 링크를 걸었을때, 이에 따른 각주는 <a name="과일"> Fruit </a>: 이것은 과일의 한 종류 입니다.와 같이 같은 각주 링크에 링킹할 수 있다.

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT
[옵시디언]

이것은  카카오 콩을 재료로 가공한 식품[^정체]입니다.

[^정체]: 이것은 초콜릿입니다.
🖥️ OUTPUT
이것은 카카오 콩을 재료로 가공한 식품[^정체]입니다.

[^정체]: 이것은 초콜릿입니다.

📝 INPUT
[벨로그]

이것은 포도의 즙을 발효시켜서 만든 알코올성의 양조주<sup>[정체](#뭘까)</sup>입니다.

<a name="뭘까"> 정체 </a>: 이것은 와인입니다.
🖥️ OUTPUT
이것은 포도의 즙을 발효시켜서 만든 알코올성의 양조주정체입니다.

정체 : 이것은 와인입니다.

옵시디언에서는 각주에 대한 설명이 맨 아래에 달리고, 벨로그에서는 각주에 대한 설명이 내가 설정한 곳에 달린다.

12. 이스케이프 (Backslash Escapes)

글을 작성하다보면, 특정 기능이 있는 기호를 표기해야할 경우가 존재한다.
이때, #와 같이 코드 박스를 사용해도 되지만, 본문에서 쭉 이어서 사용하고 싶다면, \와 같은 Backslash를 사용해도 된다.

기본적인 사용 방법은 다음과 같다.

🙋 How To
\ [기호]

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

\# 샵
\_ 언더바
\+ 플러스
\- 대쉬

🖥️ OUTPUT
# 샵
_ 언더바
+ 플러스
- 대쉬

이와 같이 특정 기능이 있는 기호도 문장에서 사용할 수 있다.

꾸미기 문법

13. 가운데 정렬 (Center Aligned)

위에서 언급한 것 처럼 마크다운에는 HTML을 지원한다.
따라서 HTML에서 가운데 정렬을 사용하기 위한 문법을 그대로 사용할 수 있다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

<center> 내용 </center>

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

<center> 가운데 정렬 </center>

🖥️ OUTPUT
가운데 정렬

목차에서의 목차 글자와 구분에 사용하면 유용하다.

14. 글자색 (Font Color)

해당 기능도 HTML 기능을 가져온 것으로 특정 글자를 아래에 서술된 원하는 색상으로 변경시키는 것이 가능하다.

Color	Text
빨간색	Red
주황색	Orange
노란색	Yellow
초록색	Green
파란색	Blue
남색	Indigo
보라색	Purple
마젠타	Magenta
시안	Cyan
갈색	Brown
하얀색	White
밝은 회색	Darkgray
회색	Gray
어두운 회색	Lightgray
검정색	Black

기본적인 사용 방법은 다음과 같다.

🙋 How To

<span style="color:[색상]"> 문장 </span>

<span style="color:[#코드]"> 문장 </span>

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

<span style="color:red"> Red </span>
<span style="color:orange"> Orange </span>
<span style="color:yellow"> Yellow </span>
<span style="color:green"> Green </span>
<span style="color:blue"> Blue </span>
<span style="color:indigo"> Indigo </span>
<span style="color:purple"> Pulple </span>
<span style="color:#FFFFFF"> White </span>
<span style="color:lightgray"> Lightgray </span>
<span style="color:gray"> Gray </span>
<span style="color:darkgray"> DarkGray </span>
<span style="color:#000000"> Black</span>

🖥️ OUTPUT
Red
Orange
Yellow
Green
Blue
Indigo
Pulple
White
Lightgray
Gray
DarkGray
Black

필자가 확인해본 결과, 아래의 표 외에도 대부분의 색상을 지원하는 것 같다.
또한, Color Code를 통해서도 표현할 수 있으므로 거의 모든 색상 표현이 가능할 것이라고 생각한다.

15. 형광펜 (Highlighter)

글자 본연의 색상을 바꾸는 것 외에도 글자의 배경 색상을 바꿀 수도 있다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

<span style="background-color:[색상]"> 문장 </span>

<span style="background-color:[#코드]"> 문장 </span>

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

<span style="background-color:red"> Red </span>
<span style="background-color:orange"> Orange </span>
<span style="background-color:yellow"> Yellow </span>
<span style="background-color:green"> Green </span>
<span style="background-color:blue"> Blue </span>
<span style="background-color:indigo"> Indigo </span>
<span style="background-color:purple"> Pulple </span>
<span style="background-color:#FFFFFF"> White </span>
<span style="background-color:lightgray"> Lightgray </span>
<span style="background-color:gray"> Gray </span>
<span style="background-color:darkgray"> DarkGray </span>
<span style="background-color:#000000"> Black</span>

🖥️ OUTPUT
Red
Orange
Yellow
Green
Blue
Indigo
Pulple
White
Lightgray
Gray
DarkGray
Black

추가적으로 13번과 14번을 혼용해서도 사용할 수 있다.

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

<span style="background-color:red"> <span style="color:blue">  BLUE </span></span>
<span style="background-color:#000000"> <span style="color:#FFFFFF"> WHITE </span></span>

🖥️ OUTPUT
BLUE
WHITE

이렇게 특정 바탕색에 보색으로 글자색을 처리하여 더욱 강조할 수 있다.

16. 이모지 (Emoji)

마크다운에서는 기본적인 이모지 사용이 가능하다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

: [이모지 이름] :

이모지 [복사 (Ctrl+C)] + [붙여넣기 (Ctrl+V)]

1. Windows : [윈도우 키] + [Dot(.)]
2. Max OS : [Command] + [Ctrl] + [Space]

: [이모지 이름] : 방법은 어째서 인지 잘 되지 않으므로 그냥 마음 편하게 [복사 (Ctrl+C)] + [붙여넣기 (Ctrl+V)] 하는게 좋을 것 같다.

사이트 한 곳을 추천하자면, 이모지 사이트 여기를 추천하고 싶다.
이곳이 PC💻, Apple🍎, Android🍏등 같은 이모지를 다양한 플랫폼 형태로 볼 수 있어서 편리하다.👍

17. 표 (Table)

글을 작성하다보면, 표를 사용해야할 상황이 발생한다.
필자도 규격에 맞게 정렬하는 것을 좋아해서 표를 자주 사용한다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

[내용 첨부]

| 내용 | 내용 | 내용 | [연장 가능] |

[줄 구분]

| --- | --- | --- |

[좌우 정렬]

:--  | 좌측 정렬
:--: | 가운데 정렬
 --: | 우측 정렬

표는 행렬 상관없이 무제한으로 늘릴 수 있다.

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT
| 정렬 | 기호 | 결과|
| :-- | :-- | :-- |
| 좌측 정렬 | --: | 얍 |
🖥️ OUTPUT

정렬 기호 결과
좌측 정렬 --: 얍

정렬	기호	결과
좌측 정렬	--:	얍

📝 INPUT
| 정렬 | 기호 | 결과|
| :--: | :--: | :--: |
| 가운데 정렬 | :--: | 얍 |
🖥️ OUTPUT

정렬 기호 결과
가운데 정렬 :--: 얍

정렬	기호	결과
가운데 정렬	:--:	얍

📝 INPUT
| 정렬 | 기호 | 결과|
| --: | --: | --: |
| 우측 정렬 | --: | 얍 |
🖥️ OUTPUT

정렬 기호 결과
우측 정렬 --: 얍

정렬	기호	결과
우측 정렬	--:	얍

한 가지 아쉬운 점은 헤더 구분이 한 번 밖에 안된다는 것이다.

18. 체크박스 (Check-Box)

특정 리스트를 짤 때, 체크박스를 통해 정리하면 내가 한 일과 해야할 일을 구분할 수 있으서 편하다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

- [ ] 빈 칸 리스트
- [x] 체크 리스트

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

- [ ] 아침 먹기
- [x] 점심 먹기
- [x] 저녁 먹기

🖥️ OUTPUT

아침 먹기

점심 먹기

저녁 먹기

벨로그에서는 해당 체크박스가 유지되지 않고 매번 창을 열 때 마다 새로고침 되어있어서 아쉽다.

19. 접기 (Fold)

연인에게 선물을 줄 때, 여러가지 방법이 있지만, 필자는 깜짝 선물을 주는 것을 좋아한다.
그때 가장 중요한 것은 선물을 들기지 않는 것이다.
마크다운에도 이렇게 무언가를 숨겼다가 보여주는 방법이 존재한다.

무엇일까? 접기 기능이 바로 그것이다.

기본적인 사용 방법은 다음과 같다.

🙋 How To

<details><summary> 외부 내용 </summary>
내부 내용
</details>

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

<details> <summary> 🙈 우르르 </summary>
🙉 까꿍!
</details>

🖥️ OUTPUT
🙈 우르르 🙉 까꿍!

이렇게 접기 기능을 써서 퀴즈를 내는 게시물도 만들면 좋을 것 같다.
하지만 벨로그에서는 사용 불가능하다...

링크

20. 링크 (Links)

링크를 거는 방식은 총 3가지가 존재한다.

URL 링크
파워 링크
참조 링크

기본적인 사용 방법은 다음과 같다.

🙋 How To
[URL 링크]

<링크 주소>
[파워 링크]

[링크 제목](링크 주소 "링크 설명")
[참조 링크]

[링크 제목][링크 이름]

[링크 이름]: 링크 주소 "링크 설명"
이때, 괄호 구분을 잘 해야한다.
URL 링크는 <홑화살괄호> 파워 링크는 (소괄호) 참조 링크는 [대괄호] 이다.
링크 설명은 마우스 커서를 해당 링크 위에 올려두었을 때 보여지는 설명이다.

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT
[URL 링크]

<https://www.google.co.kr/>
🖥️ OUTPUT
https://www.google.co.kr/

📝 INPUT

[파워 링크]

[유튜브](https://www.youtube.com/ "YouTube라는 명칭은 사용자를 가리키는 'You(당신)'와 미국 영어에서 텔레비전의 별칭으로 사용되는 'Tube'를 더한 것이다.")

🖥️ OUTPUT
유튜브

📝 INPUT

[참조 링크]

[네이버][초록창]
[녹색창][초록창]

[초록창]: https://www.naver.com/ "네이버(NAVER)는 대한민국의 포털 사이트이다."

🖥️ OUTPUT
네이버
녹색창

출처를 꼭 밝히도록 합시다.

21. 이미지 (Image)

이미지를 업로드하는 방식은 총 4가지가 존재한다.

일반 이미지
크기 조절 이미지 (마크다운)
크기 조절 이미지 (HTML)
참조 이미지
링크 이미지

기본적인 사용 방법은 다음과 같다.

🙋 How To

[일반 이미지]

![대체 텍스트](이미지 주소 "이미지 설명")

[크기 조절 이미지 (마크다운)]

![대체 텍스트|가로x세로](이미지 링크 "이미지 설명")

[크기 조절 이미지 (HTML)]

<img src="이미지 주소" width="가로px" height="세로px" title="이미지 설명" alt="대체 텍스트" align="center">

[참조 이미지]

![대체 텍스트][이미지 링크]

[이미지 링크]: 이미지 주소 "이미지 설명"

[링크 이미지]

[![대체 이미지](이미지 링크)](링크 "링크 설명")

뭔가 많은 것 같은 것은 기분 탓이다...

예를 들어, 다음과 같은 문장을 입력하면 결과는 그 아래와 같다.

📝 INPUT

[일반 이미지]

![꼬까옷](https://velog.velcdn.com/images/memory_with_you/post/78be0e1c-fa37-44b2-b3c3-266a1cfc155b/image.jpg "쇼핑하다 본 너무 귀여운 아기옷")

🖥️ OUTPUT
꼬까옷

📝 INPUT

[크기 조절 이미지 (마크다운)]

![디저트39|500x500](https://velog.velcdn.com/images/memory_with_you/post/82c2c1b3-e655-4309-b92e-6742ea91ecbb/image.jpg "병이 특이한 디저트 프렌차이즈")

🖥️ OUTPUT
디저트39|500x500

📝 INPUT

[크기 조절 이미지 (HTML)]

<img src="https://velog.velcdn.com/images/memory_with_you/post/2d4f613b-02af-413a-867f-409479f11f16/image.jpg" width="500px" height="500px" title="여행지에서 본 너무 귀여운 공룡 장난감" alt="주황색 공룡 장난감" align="center">

🖥️ OUTPUT
주황색 공룡 장난감

📝 INPUT

[참조 이미지]

![포차코][산리오 인형]
![산리오][산리오 인형]

[산리오 인형]: https://velog.velcdn.com/images/memory_with_you/post/c1d42769-31d8-4ea8-890f-05fc4c4fc8cc/image.jpg "여행지에서 본 너무 귀여운 포차코 인형"

🖥️ OUTPUT
포차코
산리오

📝 INPUT

[링크 이미지]

[![녹색 공룡 봉제 인형](https://velog.velcdn.com/images/memory_with_you/post/1bbc7754-9be8-412c-a066-40708506a14b/image.jpg)](https://www.google.com/maps/place/%EC%9D%B4%EB%A7%88%ED%8A%B8+%EC%A3%BD%EC%A0%84%EC%A0%90/data=!3m1!4b1!4m6!3m5!1s0x357b5a1feba4fe1f:0x7e3aa848463c8742!8m2!3d37.3252841!4d127.1098809!16s%2Fg%2F1tc_1_s2?entry=ttu "쇼핑하다 본 너무 귀여운 공룡 인형")

🖥️ OUTPUT

현재 벨로그는 크기 조절이 불가능하므로 간단한 이미지 첨부 방식을 사용하면 될 것 같다.

마무리

99. 참고 문서 (Reference)

yunwoong7 님 : GitHub
ihoneymon 님 : Github
Recorder 님 : Velog
ybkim3603 님 : Velog
cateto 님 : Velog
갓대희 님 : Tistory
JINSTORY 님 : Tistory
이삭 님 : 개인 블로그
HEROPY(박영웅) 님 : 개인 블로그

0. 마무리 글 (Impression)

지금까지 약 3일에 걸려서 마크다운에 관한 거의 모든 문법을 정리하였다.
친구의 권유로 블로그를 시작하게 되면서 네이버 블로그나 시작할 줄 알았던 내가 마크다운이라는 문법을 새로 공부하게 될 줄은 몰랐다.

앞으로 이 블로그에는 크게 3가지가 업로드 될 것이다.

대학원 진학기
일상 일기
감성글

대학원 진학기는 내가 대학원에 진학하는 과정을 비공개로 작성하다가 대학원 입학과 동시에 전체 공개로 바꿀 생각이다.
일상 일기는 비공개로 작성해서 나중에 전체 공개로 바꿀지는 모르겠다.
심지어 매일 쓰는 것을 원칙으로 하겠지만... 할 수 있을지 모르겠다.
감성글은 내가 가끔씩 새벽 감성 터질 때, 전체 공개로 나의 죄를 헤아릴 수 있게 할 예정이다.

정신없을 1년을 보낼 나에게 잘 해보자고 말하고 싶다.
지금까지 잘 해왔고 앞으로도 잘할꺼야

앞으로도 잘 부탁드립니다.

- 블로그 주인장 올림 -

Memory With Me (메윗미)

전자공학도의 대학원 진학기 & 이것저것

마크다운(MarkDown) 문법 정리

MarkDown

기본 문법

1. 헤더 (Headers)

제목 1

제목 2

제목 3

제목 4

제목 5

제목 6

2. 줄 바꾸기 (Headers)

3. 공백 추가 (Add Space)

4. 강조 폰트체 (Emphasis)

5. 목록 (List)

6. 인용문 (BlockQuote)

7. 코드 박스 (Code Box)

8. 코드 블록 (Code Block)

9. 수식 (Mathematical Expression)

10. 수평선 (Horizontal Rule)

11. 각주 (Footnotes)

12. 이스케이프 (Backslash Escapes)

꾸미기 문법

13. 가운데 정렬 (Center Aligned)

14. 글자색 (Font Color)

15. 형광펜 (Highlighter)

16. 이모지 (Emoji)

17. 표 (Table)

18. 체크박스 (Check-Box)

19. 접기 (Fold)

링크

20. 링크 (Links)

21. 이미지 (Image)

마무리

99. 참고 문서 (Reference)

0. 마무리 글 (Impression)

0개의 댓글