마크다운(Markdown) 이란?

Wikimediahttps://commons.wikimedia.org/wiki/File%3AMarkdown-mark.svg

마크다운이란?

  • 마크다운(Markdown)은 웹상에서 글을 쓰는 모든 사람들을 위한 글쓰기 도구(서식, 포맷, 양식) 입니다.
  • 마크다운(Markdown)은 HTML을 몰라도 약간의 노력으로 글자를 HTML형식으로 변환시켜 줍니다.(단 변환도구는 따로 있어야 합니다. 이건 나중에 따로 글을 적겠습니다.)
  • 마크다운(Markdown)은 쉽게 글을 쓸 수 있도록 해 주고, 읽는 사람에게도 쉽게 읽힐 수 있도록 해 주는 간소한 서식(포맷)입니다.
  • 마크다운(Markdown)은 꾸밈없는 간소한 문법으로 글쓰기에 집중 할 수 있도록 도와줍니다.

단 간단하기에 모든 HTML을 지원하지는 않습니다.

소설책을 예로 들어 보겠습니다.

책에는 제목과 목차(인덱스), 각 장(챕터)와 각 장들을 이루는 소제목 등으로 이루어져있고,
목차에는 페이지로 바로 이동 할 수 있는 쪽수(링크)가 표시되어 있죠.
글을 이해하기 쉽게 삽화(이미지)도 있고, 무언가의 리스트도 있을 수 있겠네요.
강조할 글자도 있을 것이고, 인용한 구문도 있을 것입니다.

이러한 것들을 간소화 시켜둔 것이 마크다운이라고 생각합니다.
기존 HTML에디터에서 글을 작성한다 치더라도 상당히 많고 다양한 옵션들이 있어, 글을 쓰고, 서식을 각각 지정하기란 여간 어려운 일이 아닙니다.
글을 적는게 아니라 서식을 지정하는데 더 많은 시간을 소비하는 아이러니한 일도 생기게 되죠.
그러한 불합리 때문에 생겨난 것이 마크다운이라 생각이 듭니다.

짧은 글을 쓰기 위해 수십개의 HTML태그를 모두 사용하는 것 보다, 마크다운으로 글을 작성하는 것이 얼마나 쉬운일인지 알아봅시다.

마크다운 태그의 종류

제목 : # , =====
인용 : >
강조 : * , _
링크 : [텍스트](주소 "설명 생략가능")
이미지 : ![텍스트](이미지주소 "설명 생략가능")
리스트 : 1 , * , - , +
코드표시 : <code>코드</code> , 한줄 띄우고 스페이스 4칸 , ```코드```
줄바꿈 : 엔터 2번 , 강제 줄바꿈은 문장끝에 스페이스바 2칸
가로선 : ----- , ***** , +++++

가장 많이 사용되는 종류들이 위에 나온 전부입니다.
이제 차례대로 하나씩 알아보도록 할까요?

제목(타이틀)

제목은 크게 1단계부터 6단계까지 표시 할 수 있습니다. 제목의 표시를 담당하는 태그(기호)는 # 입니다.
1개가 있으면 큰제목, 2개가 있으면 그 하위 제목...
이렇게 6개까지 붙일 수 있습니다.

# 제목1 : HTML의 <h1> 태그
## 제목2 : HTML의 <h2> 태그
### 제목3 : HTML의 <h3> 태그
#### 제목4 : HTML의 <h4> 태그
##### 제목5 : HTML의 <h5> 태그
###### 제목6 : HTML의 <h6> 태그
 
제목1
=====
제목2
-----

제목1

제목2

제목3

제목4

제목5
제목6

제목1

제목2

인용구문

HTML의 <blockquote>
인용구문은 > 기호로 나타냅니다.
인용기호는 아래 보시는 것처럼 중첩 이 가능합니다.
또한 인용안에 마크다운 문법을 사용할 수 있습니다.

> ### 제일 바깥의 인용
>> ** 인용의 인용 **
>>> _인용의 인용의 인용_
 
>>인용의 인용

제일 바깥의 인용

인용의 인용

인용의 인용의 인용

인용의 인용

굵은 글씨(bold)와 기울여 쓰기(italic)

HTML의 <bold>
이것은 **굵은 글씨** 입니다.
이것은 __굵은 글씨__ 입니다.
  • 이것은 굵은 글씨 입니다.
  • 이것은 굵은 글씨 입니다.
HTML의 <i>
이것은 *기울여 쓰기* 입니다.
이것은 _기울여 쓰기_ 입니다.
  • 이것은 기울여 쓰기 입니다.
  • 이것은 기울여 쓰기 입니다.
HTML의 <b> 와 <i>를 같이 쓴 것
이것은 ***강조하며 기울여 쓰기*** 입니다.
이것은 ___강조하며 기울여 쓰기___ 입니다.
  • 이것은 강조하며 기울여 쓰기 입니다.
  • 이것은 강조하며 기울여 쓰기 입니다.

링크와 이미지 삽입

HTML의 <a href="http://www.example.com" alt="설명문구 생략가능">링크</a>
 
이것은 [링크](http://www.example.com) 입니다.
이것은 [링크](http://www.example.com "설명문구 생략가능") 입니다.
이것은 [구글 링크][1] 입니다.
이것은 [마이크로소프트 링크][b] 입니다.
이것은 [애플 링크][three] 입니다.
 
[1]: https://www.google.co.kr "구글"
[b]: https://www.microsoft.com/ko-kr/ "마이크로소프트"
[three]: http://www.apple.com/kr/ "애플"
HTML의 <img src="https://guides.github.com/images/logo@2x.png" title="깃헙">
 
1. ![깃헙](https://guides.github.com/images/logo@2x.png "설명문구 생략가능")
2. ![깃허브][imgGithub]
 
[imgGithub]: https://www.google.co.kr/images/nav_logo242.png "설명문구 생략가능"
  1. 깃헙
  2. 깃허브

리스트

  • 순서 있는 리스트 : HTML의 <ol><li>번호</li></ol>
1. 번호1
2. 번호2
3. 번호3
  1. 번호1
  2. 번호2
  3. 번호3
  • 순서 없는 리스트 : HTML의 <ul><li>번호</li></ul>
 - 리스트
 * 리스트
 + 리스트
 
 
 + 리스트
  - 리스트
 * 리스트
 
 
 * 리스트
  * 리스트
 * 리스트
 
 
 1. 번호1
  - 리스트
  - 리스트
 
 2. 번호2
  * 리스트
  • 리스트
  • 리스트
  • 리스트
  • 리스트
    • 리스트
  • 리스트
  • 리스트
    • 리스트
  • 리스트
  1. 번호1

    • 리스트
    • 리스트
  2. 번호2

    • 리스트

박스로 감싸기(마크다운을 그대로 보여줍니다.)

스페이스를 4번 누른 후 글을 씁니다.
또는
```
사이에 글을 씁니다.
```
 
\` 기호는 키보드에서 `숫자 1번 옆`의 글자키 입니다.

+ Recent posts