0. TIL 오늘 배운것
오늘은 velog에 더 좋은 글을 작성하기 위해 필수적으로 사용하게 될 Markdown의 사용법을 알아 봤다. 위에 툴바에 있는 기능이 다 인것 처럼 보이지만 그밖에 숨겨진 키워드들도 존재하기때문에 이것 저것 작성해보았다.
그럼 Markdown이 무엇인지 부터 알아보자!
1. Markdown 은 무엇인가?
역사나 서론은 생략한다.(자세한 내용은 위키백과를 참고하자!)
간단하게 설명하자면 일반 텍스트 기반의 경량 Markup 언어이다.
Markup 언어는 또 뭐냐? 일반적으로 홈페이지를 제작하는데 사용하는 HTML과 다양한 서식을 표현하는 RTF(리치텍스트)가 대표적인 Markup 언어이다. Markup 언어의 경우 사용하는 방법이 어렵고 복잡하지만 다양한 서식을 표현할 수 있는 장점이 있다. 그에 비해 Markdown 언어는 Markup 언어에 비해 쉽고 간단하지만 서식을 표현하는 기능과 키워드가 Markup 언어에 비해 적고 제한적인 것이 특징이다.
2. 왜 Markdown 언어를 사용해야하나?
이유는 간단하다. 가독성,범용성,독립성,이식성 모두 좋기때문에 사용한다.
현재 작성하는 글을 추후 다른 블로그에 옮긴다고 했을때 같은 Markdown 문법을 사용한다면 그냥 복사 붙여넣기만 해줘도 바로 옮길 수 있다. 또한 Markdown 문법은 생각보다 훨씬 많은 플랫폼에서 지원한다.
흔히 알고 있는 Reddit이나 Github 등에서도 사용가능하다.
그렇다면 이제 사용하는 방법을 알아보자.
3. 사용하는 방법
3-1. 제목 (Headers)
가장 많이 사용하는 Head 기능
- 글머리: 1~6까지만 지원
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6This is a H1
This is a H2
This is a H3
This is a H4
This is a H5
This is a H6
####### This is a H7(지원하지 않음)
3-2. 인용문 (BlockQuote)
이메일에서 사용하는 > 블럭인용문자를 이용한다.
> This is a first blockqute.
> > This is a second blockqute.
> > > This is a third blockqute.This is a first blockqute.
> This is a second blockqute. > > This is a third blockqute.
이 안에서는 다른 마크다운 요소를 포함할 수 있다.
This is a H3
- List
``` code ```
3-3. 목록(List)
a. 순서있는 목록(번호)
순서있는 목록은 숫자와 점을 사용한다.
1. 첫번째
2. 두번째
3. 세번째- 첫번째
- 두번째
- 세번째
현재까지는 어떤 번호를 입력해도 순서는 내림차순으로 정의된다.
1. 첫번째
3. 세번째
2. 두번째- 첫번째
- 세번째
- 두번째
b. 순서없는 목록(글머리 기호: *, +, - 지원)
* 목록1
* 목록2
* 목록3
+ 목록4
+ 목록5
+ 목록6
- 빨강7
- 녹색8
- 파랑9- 목록1
- 목록2
- 목록3
- 목록2
- 목록4
- 목록5
- 목록6
- 목록5
- 빨강7
- 녹색8
- 파랑9
- 녹색8
velog는 머리글 기호를 따로 구분해서 사용하는 것 같진 않다.
복합적으로 사용해도 똑같이 표현된다.
* 1단계
- 2단계
+ 3단계
+ 4단계- 1단계
- 2단계
- 3단계
- 4단계
- 3단계
- 2단계
3-4. 코드(Code)
아무래도 제일 많이 사용하는 키워드중 하나일 것이다.
``` 나 ~~~ 로 묶어주면 된다.
언어마다 문법 강조가 가능하다.
예를 들어 C# 언어로 강조하고 싶다면
```cs
int a = 0;
```
이런식으로 작성하면 다음과 같이 표시된다.
int a = 0;각 언어마다 강조 키워드는 다음과 같다.
| Language | Markdown |
|---|---|
| Bash | bash |
| JSON | json |
| C# | cs |
| Java | java |
| C++ | cpp |
| JavaScript | javascript |
| CSS | css |
| PHP | php |
| Diff | diff |
| Perl | perl |
| HTML, XML | html |
| Python | python |
| HTTP | http |
| Ruby | ruby |
| Ini | ini |
| SQL | sql |
3-5. 수평선 <hr />
바로 밑에 수평 라인을 긋는다. 주로 페이지 나누기로 많이 사용한다.
* * *
***
*****
- - -
---------------------------------------위에 키워드를 그대로 사용하면 다음과 같다.
3-6. 링크
a. 참조 링크
[link keyword][id]
[id]: URL "Optional Title here"
// code
Link: [Google][googlelink]
[googlelink]: https://google.com "Go google"Link: Google
b. 외부링크
사용문법: [Title](link)
적용예: [Google](https://google.com, "google link")Link: Google
- 자동연결
일반적인 URL 혹은 이메일주소인 경우 적절한 형식으로 링크를 형성한다.
* 외부링크: <http://example.com/>
* 이메일링크: <address@example.com>- 외부링크: http://example.com/
- 이메일링크: address@example.com
3-7. 강조
*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
~~cancelline~~- single asterisks
- single underscores
- double asterisks
- double underscores
cancelline
문장 중간에 사용할 경우에는 **띄어쓰기** 를 사용하는 것이 좋다.
문장 중간에 사용할 경우에는 띄어쓰기를 사용하는 것이 좋다.
3-8. 이미지
사이즈 조절 기능은 없기 때문에 <img width="" height=""></img>를 이용한다.
예
<img src="/path/to/img.jpg" width="450px" height="300px" title="px(픽셀) 크기 설정" alt="이미지 중간"></img><br/>
<img src="/path/to/img.jpg" width="40%" height="30%" title="px(픽셀) 크기 설정" alt="이미지 작게"></img>
3-9. 테이블(표)
테이블은 표 형식으로 작성하는데 필요한 키워드이다.
잘 사용할지는 모르겠지만 이런것도 사용가능하다는 것을 알았으면 한다.
테이블 사용법은 다음과 같이 사용한다.
|head1|head2|head3|head4|
|----|:----|----:|:----:|
|정렬<br>X|왼쪽<br>정렬|오른쪽<br>정렬|가운데<br>정렬|
|내용1|내용2|내용3|내용4|
|__*강조1*__|**_강조2_**|~~내용3~~|~~**_내용4_**~~|표의 정렬을 구분하는 '-'(dash) 의 경우 수는 상관 없다.
테이블 내용에 <br> 태그를 사용하면 줄바꿈을 할 수 있다. 그 밖에 html 태그도 혼용해서 사용할 수 있나 보다.
| head1 | head2 | head3 | head4 |
|---|---|---|---|
| 정렬 X | 왼쪽 정렬 | 오른쪽 정렬 | 가운데 정렬 |
| 내용1 | 내용2 | 내용3 | 내용4 |
| 강조1 | 강조2 |
4. 참조
전체적인 마크다운 작성법
https://gist.github.com/ihoneymon/652be052a0727ad59601
코드 블록 언어 선언문
https://computer-science-student.tistory.com/366
