앞서서
velog의 글을 보기 좋게 작성하려면 마크다운 사용법이 필수다!
마크다운은 아주 간편한 문법으로 문서를 정리할 수 있는 마크업언어다. github에서 README.md라는 파일을 많이 봤을텐데, 이또한 마크다운으로 쓰여진다. 나는 앞으로 velog와 github 둘다 많이 사용해야 되기 때문에 마크다운 사용법에 대해서 정리해 놓으려고 한다.📌
Markdown(마크다운)이란?
Markdown은 텍스트 기반의 마크업언어이며, html로 변환해서 보여준다.
2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 마크다운이 최근 각광받기 시작한 이유는 github 덕분이다. README.md는 깃헙을 사용하는 사람이라면 누구나 가장 먼저 접하게 되는 마크다운 문서였다.
장 / 단점
장점
- 간결하다
- 텍스트기반이므로 용량이 작고, git으로 추적이 가능하다.
- 지원 플랫폼 / 프로그램이 다양하다.
단점
- 표준이 없다.
- 표준이 없기때문에 생성물이 다르다.
- 모든 HTML 태그를 대체하지 못한다.
문법(사용법)
Headers(헤더)
- '#'기호를 사용해서 헤더를 만들 수 있다.
# H1
##H2
### H3
#### H4
##### H5
###### H6
####### H7 ❌7은 지원하지 않음.H1
H2
H3
H4
H5
H6
####### H7 ❌7은 지원하지 않음.
BlockQuote
- '>'기호를 사용해서 인용 블록을 만들 수 있다.
> BlockQuote
>> BlockQutote in BlockQuoteBlockQuote
BlockQuote in BlockQuote
Code Block(코드 블록)
- '`'로 코드 한줄을 감싸서 인라인 코드 블록을 만들 수 있다.
- '```'또는 '~~~'로 코드 여러줄을 감싸서 코드 블록을 만들 수 있다.
-> 첫 ``` 다음에 언어를 지정할 수 있다.
-> 코드에 하이라이팅되서 보기 좋다.
```
`git add .`
```javascript
const a = 1;
console.log(a);
```git add .
const a = 1;
console.log(a);Emphasis(강조)
- '*' 또는 '_'로 감싸서 Italic(기울임)을 표현할 수 있다.
- '**' 또는 '__'로 감싸서 Bold(굵게)을 표현할 수 있다.
- '~~'로 감싸서 선이 그어진 글씨를 표현할 수 있다.
*Italic*
_Italic_
**Bold**
__Bold__Italic
Italic
Bold
Bold
lined
Horizontal Rules(수평선)
- '---', '___' 또는 '***'로 수평선을 표시한다.
---
___
***Links(링크)
External(외부)
- [link](http://example.com "link 설명-마우스 hover시 나타나는 설명 문구") 인라인 링크
- [link1][number] [number]: http://example.com/ "link number 설명" 참조 링크
- <example.com/> example@example.com url
[Google](http://www.google.co.kr 'google')
[Google][1]
[Naver][2]
[1]: http://google.com 'google'
[2]: http://naver.com 'naver'
<https://google.com>
<example@gmail.com>https://google.com
example@gmail.com
Internal(내부)
- html과 css id를 사용해서 내부 링크를 만들 수 있다.
<div id="test">link</div>
\[test](#test)link
Lists
Ordered List
- 'Number. '로 시작한다.
1. first
2. second
3. third- first
- second
- third
Unordered List
- '- ', '* '또는 '+ '로 시작한다.
- list
* list
+ list- list
- list
- list
Tables(표)
- '|'로 표를 생성, ':'의 위치로 정렬할 수 있다.
| 1 | 2 | 3 |
| :-------- | :--------: | --------: |
| Left | Center | Right || 1 | 2 | 3 |
|---|---|---|
| Left | Center | Right |
Images(이미지)
- ''로 이미지를 넣을 수 있다.
![alt text][1]
[1]: /test.png
참고
seungyong HONG