마크다운(Markdown) 문법 사용하여 글쓰기
개발을 공부하며 자연스레 깃허브(github)를 사용하게 되고 마크다운(Markdown)의 필요성을 느끼게 된다.
깃허브에 자신이 올린 레포지토리에 관한 설명을 적을때나, 도큐멘테이션 작업을 할 때 마크다운을 사용하게 된다.
문서를 정리하는데 깔끔하며 티스토리에도 사용할 수 있다.
이 글에서는 마크다운으로 문서를 작성할 때 꼭 필요한 문법들을 정리해 보겠다.
제목 (Heading)
문서를 작성할 때 가장 기본이 되는 제목은 HTML의 <h1>
~ <h6>
태그와 유사하다. #의 개수에 따라 글자의 크기가 달라진다. # 은 <h1>
, ###은 <h3>
, ###### 은 <h6>
이런 식이다.
# Heading
### Heading
###### Heading
Heading
Heading
Heading
본문(paragraph)
HTML의 <p>
와 같은 본문은 텍스트를 그대로 작성하면 된다.
인용(Blockquotes)
인용은 > 를 넣어서 작성한다.
> 이 글은 인용문 입니다.
>> 이 글을 두번째 인용문 입니다.
이 글은 인용문 입니다.
이 글을 두번째 인용문 입니다.
리스트
순서가 없는 리스트(Undered List)
*또는 - 를 사용해서 순서가 없는 리스트를 작성할 수 있다.
tab 또는 2칸 띄어쓰기를 통해 중첩된 항목을 작성할 수 있다.
* Frontend
* HTML
* CSS
* JavaScript
* Vue.js
- Frontend
- HTML
- CSS
- JavaScript
- Vue.js
Frontend
HTML
CSS
JavaScript
- Vue.js
Frontend
HTML
CSS
JavaScript
- Vue.js
순서가 있는 리스트(Ordered List)
1. HTML
2. CSS
3. JavaScript
- HTML
- CSS
- JavaScript
1. Frontend
1. HTML
2. CSS
3. JavaScript
1. Vue.js
2. Backend
Frontend
HTML
CSS
javaScript
- Vue.js
Backend
코드블럭(Code blocks)
코드블럭은 일반 문장 사이에 단어, 짧은 문장 단위로 표현할 수 있는 방법과 여러줄의 코드를 삽입하는 방법이 있다.
단어나 한줄의 코드를 감싸는 경우 ` 를 앞뒤로 감싼다.
마크다운은 코드블럭을 `<pre>` 와 `<code>` 로 감쌉니다.
마크다운은 코드블럭을 <pre>
와 <code>
로 감쌉니다
여러줄의 코드를 나타내는 코드블럭의 경우 코드블럭의 시작과 끝을 ``` 으로 감싸고 내부에 코드를 작성하면 된다.
function test(n) {
return n;
}
수평선(Horizontal Rules)
문단과 문단 사이를 나눌 때 등 사용되는 수평선은 HTML 의 <hr/>
과 같이 동작한다.
* * *
***
*****
- - -
---------------------------------------
링크(Links)
HTML의 하이퍼링크와 같은 링크는 다음과 같이 작성합니다. title은 생략이 가능합니다.
[example](http://example.com "title")
검색엔진은 [구글](http://www.google.com "구글")을 사용합니다.
검색엔진은 구글을 사용합니다.
강조(Emphasis)
HTML의 <em>
과 같은 동작을 하는 강조는 *, _ 가 있고 <strong>
은 ** 와 __ 를 사용한다.
취소선은 ~~ 를 사용한다.
*강조*한 텍스트
_강조_한 텍스트
강조한 텍스트
강조한 텍스트
**강조**한 텍스트
__강조__한 텍스트
강조한 텍스트
강조한 텍스트
~~취소~~한 텍스트
취소한 텍스트
이미지 삽입(Images)
이미지는 역시 HTML의 <img>
태그와 동일하게 작동한다.
대체 텍스트를 삽입할 수 있으며, 링크 또는 로컬의 이미지파일을 연결할 수 있다.




이상으로 마크다운의 기본 문법들에 대해서 알아보았다.
추가적으로 이 글도 마크다운으로 작성했다.
티스토리에서 여러가지 과정을 거치면 마크다운으로 작성을 할 수는 있지만 깃허브에서처럼 이쁘게 표시되지 않는 것 같다.
다른 방법이 있는지 알아봐야겠다.
'Git' 카테고리의 다른 글
초보자를 위한 깃허브 (0) | 2018.05.10 |
---|