Markdown, 사용법 정리

1. Markdown

 

・ Markdown Guide를 참고하여 포스트를 작성했습니다.

 

What's Markdown?

2004년 존 그루버가 만든 Markdown은 일반 텍스트 문서에 format 요소를 추가하는 데 사용할 수 있는 가벼운 마크업 언어입니다. Markdown은 일반적으로 사용하는 WYSIWYG 편집기와는 다르기 때문에, 일정한 형식을 지켜서 작성해야 합니다.

 

・ WYSIWYG(What You See Is What You Get, 위키백과)이란, 문서 편집 과정에서 화면에 포맷된 낱말 문장이 출력물과 동일하게 나오는 방식을 말합니다. 한글, Microsoft Word 등을 예시로 들 수 있습니다.

 

・ 즉, Markdown은 텍스트를 작성하는 방법입니다. 경량 마크업 언어이며, 간단히 HTML형식으로 표현할 수 있는 특징이 있습니다.

 

・ 그리고 직관적으로 읽기 쉽다는 장점이 있으며, 대표적으로 GitHub에서 README.md 파일을 작성할 때 자주 사용합니다. (회사 내부의 Wiki에서 Markdown형식을 사용하는 곳도 있습니다!)

 

 

 

・ Visual Studio Code에서 파일을 .md 확장자로 저장한 뒤, 위쪽의 버튼을 누르면, 미리보기를 이용할 수 있습니다.

2. Markdown 사용 방법

 

・ Dillinger에서 온라인 Markdown 편집기를 이용하여 실시간으로 확인할 수 있습니다.

 

・ 해당하는 편집기에 따라서 약간 차이가 있을 수도 있습니다.

 

1) 제목(Headings)

 

・ 제목을 만들기 위해서는 글 앞에 #를 추가하면 됩니다. #의 개수에 따라서, 크기가 달라집니다. #뒤에 공백을 추가해야 합니다!

 

Markdown	HTML	결과
# Heading level 1	<h1>Heading level 1</h1>	Heading level 1
## Heading level 1	<h2>Heading level 2</h2>	Heading level 2
### Heading level 1	<h3>Heading level 3</h3>	Heading level 3
#### Heading level 1	<h4>Heading level 4</h4>	Heading level 4
##### Heading level 1	<h5>Heading level 5</h5>	Heading level 5
###### Heading level 1	<h6>Heading level 6</h6>	Heading level 6

 

・ 다른 방법으로, 텍스트 아래에 === 또는 ----를 추가하여 <h1> 태그와 <h2> 태그를 사용할 수 있습니다.

 

Markdown	HTML	결과
Heading level 1 ================	<h1>Heading level 1</h1>	Heading level 1
Heading level 2 ---------------------------	<h2>Heading level 2</h2>	Heading level 2

 

2) 단락 구분(Paragraphs)

 

・ 단락 구분은 엔터를 두 번 입력합니다.

 

Markdown	HTML	결과
Markdown으로 작성시 엔터를 한 번만 입력한 경우	<p>Markdown으로 작성시 엔터를 한 번만 입력한 경우</p>	Markdown으로 작성시 엔터를 한 번만 입력한 경우
Markdown으로 작성시   엔터를 두 번 입력한 경우	<p>Markdown으로 작성 시</p> <p>엔터를 두 번 입력한 경우</p>	Markdown으로 작성 시 엔터를 두 번 입력한 경우

 

3) 개행(Line Breaks)

 

・ 개행은 스페이스 두 번을 입력하면 됩니다. (두 개 이상의 공백이 필요합니다.)

 

Markdown	HTML	결과
개행은 두 개 이상의 공백이 필요합니다.   드래그를 해보시면 스페이스가 보여요!	<p>개행은 두 개 이상의 공백이 필요합니다.<br> 드래그를 해보시면 스페이스가 보여요!</p>	개행은 두 개 이상의 공백이 필요합니다. 드래그를 해보시면 스페이스가 보여요!

 

4) 강조 표현(Emphasis)

 

① 기울임 꼴(Italic)

 

・기울임 꼴을 표현하고 싶은 글자 앞 뒤로 * 또는 _ 를 사용합니다. 

 

Markdown	HTML	결과
*기울임꼴*	<em>기울임꼴</em>	기울임꼴
_기울임꼴_	<em>기울임꼴</em>	기울임꼴

 

② 굵게(Bold)

 

・ 굵게는 표현하고 싶은 글자 앞 뒤로 ** 또는 __를 사용합니다.

 

Markdown	HTML	결과
**굵게**	<strong>굵게</strong>	굵게
__굵게__	<strong>굵게</strong>	굵게

 

③ 기울임 꼴과 굵게(Bold and Italic)

 

・ 물론 기울임 꼴과 굵게를 동시에 적용할 때는 *** 또는 ___를 사용합니다.

 

Markdown	HTML	결과
***굵게와 기울임꼴***	<strong><em>굵게와 기울임꼴</em></strong>	굵게와 기울임꼴
___굵게와 기울임꼴___	<strong><em>굵게와 기울임꼴</em></strong>	굵게와 기울임꼴

④ 음영(Shading effect)

 

・ 음영을 주고 싶은 글자 앞 뒤로 `를 사용합니다.

 

5) 리스트(List)

 

① 순서가 있는 리스트

 

・ 순서가 있는 리스트는 1. 2. 3. 또는 1) 2) 3) 을 사용합니다.

 

Markdown	HTML	결과
1. 첫 번째 아이템 2. 두 번째 아이템 3. 세 번째 아이템	<ol> <li>첫 번째 아이템</li> <li>두 번째 아이템</li> <li>세 번째 아이템</li> </ol>	첫 번째 아이템 두 번째 아이템 세 번째 아이템
1. 하지만, 숫자를 3. 이렇게 써도 5. 같은 결과입니다.	<ol> <li>하지만, 숫자를</li> <li>이렇게 써도</li> <li>같은 결과입니다.</li> </ol>	하지만, 숫자를 이렇게 써도 같은 결과입니다.

 

② 순서가 없는 리스트

 

・ 순서가 없는 리스트는 -, *, + 를 사용합니다.

 

Markdown	HTML	결과
- 첫 번째 아이템 - 두 번째 아이템 - 세 번째 아이템	<ul> <li>첫 번째 아이템</li> <li>두 번째 아이템</li> <li>세 번째 아이템</li> </ul>	첫 번째 아이템 두 번째 아이템 세 번째 아이템

 

6) 블록(Blockquotes)

 

・블록은 >를 사용합니다.

 

Markdown	HTML	결과
>블록	<blockquote>블록</blockquote>	블록
>블록속의 >>블록도 가능합니다.	<blockquote>블록속의<blockquote>블록도 가능합니다.</blockquote></blockquote>	블록속의 블록도 가능합니다.
>**블록**안에서도 스타일 적용이 가능합니다.	<blockquote><strong>블록안에서도 스타일 적용이 가능합니다.</strong></blockquote>	블록안에서도 스타일 적용이 가능합니다.

 

7) 코드 블록(Code Blocks)

 

・ 코드 블록은 4칸의 공백 또는 Tab 한 번을 사용합니다.

 

코드블록입니다.

 

8) 수평선(Horizontals)

 

・ 수평선은 ***, ---, ___를 사용합니다.

 

・ ***

---

・ ---

---

・ ___

---

9) 링크(Links)

 

・ 링크는 [텍스트](주소)의 형식으로 사용합니다.

 

・ 구글

 

---

3. 끝

・ 자세한 내용은 Markdown Guide에서 확인할 수 있습니다.

 

・ 글을 작성하면서, 마크다운과 HTML형식을 왔다 갔다 해서, 결과물이 조금 다른 것도 있습니다.

 

・ 또한, 제 블로그에 적용된 CSS들의 영향도 있네요. 참고하셔서 봐주세요!

 

・ 그럼 끝!