마크다운 사용법
본 포스팅은 마크다운 사용법을 알아보는 내용입니다.
1. 마크다운 (MarkDown) 이란
- 쉽게 글을 쓸 수 있도록 해 주고 읽는 사람에게도 쉽게 읽힐 수 있도록 해 주는 간소한 서식(포맷)
- 문법이 간결하고 HTML삽입이 가능하다
- 마크다운을 작성한 문서의 표현 방식은 CSS의 설정에 따라 달라진다
1-1. 장점
- 문법이 간결하고 쉽다
- 마크다운은 모든것에 사용할 수 있다 (웹사이트, 문서, 메모, 기술 문서 등)
- 마크다운은 지원하는 플랫폼이 많다 (Github, Discord 등)
- 마크다운은 대부분의 환경에서 편집 및 작성이 가능하다 (메모장도 가능)
- 텍스트로 저장되기 때문에 용량이 적어 보관이 용이하다
1-2. 단점
- 모든 HTML의 문법을 대신하지 못한다
- 표준이 없어 도구에 따라 변환방식 또는 생성물이 다르다
- 마크다운으로 파일 업로드하는 경우 저장한 다음 파일 경로를 입력해야해서 불편하다
- tistory 와 다르게 문법들을 하나하나 입력해야 해서 귀찮다
2. 마크다운 (MarkDown) 문법
1) Headers 헤더
- # 으로 시작하는 텍스트
- # 은 하나부터 여섯개까지 가능
- # 이 늘어날때마다 제목의 스케일이 낮아진다
- H1은 === 로도 만들 수 있다
- H2는 — 로도 만들 수 있다
입력
===
H2
---
# H1
## H2
### H3
#### H4
##### H5
###### H6
출력
출처 : https://vuddus526.tistory.com/494
2) Horizontal Rules 수평선
- ’-‘ 또는 * 또는 _ 을 3개 이상 작성
- 단 ‘-‘ 을 사용할 경우 header로 인식할 수 있어서 전 라인은 비워야한다
입력
***
- - -
-----
_ _ _
___
출력
출처 : https://vuddus526.tistory.com/494
3) Line Breaks 줄바꿈
- <br> 을 활용해서 줄바꿀 수 있다
- 엔터로 칸을 띄면 다음행으로 넘어가게 된다 <br> 은 하나의 문장에서 줄바꿈
입력
안녕
하세요 <br>
반갑
습니다
헬로우 <br>
월드
출력
출처 : https://vuddus526.tistory.com/494
4) Emphasis 강조
- 기울여 쓰기 (italic) : * 또는 _로 감싼 텍스트
- 두껍게 쓰기 (bold) : ** 또는 __로 감싼 텍스트
- 취소선 : ~~로 감싼 텍스트
- 위에 모든걸 같이 사용할 수 있다
입력
**This will also be bold**
~~This is canceled~~
_You **can** ~~combine~~ them_
출력
출처 : https://vuddus526.tistory.com/494
5) Blockquotes 인용
- > 으로 시작하는 텍스트
- > 는 3개까지 사용가능
입력
> 안녕하세요
> 반갑습니다
> > 헬로우
> > > 월드
출력
출처 : https://vuddus526.tistory.com/494
6) Unordered lists 순서가 없는 목록
- * 또는 + 또는 - 를 이용해서 순서가 없는 목록을 만들 수 있다
- 들여쓰기를 하면 모양이 바뀐다
입력
* 여름
* 가을
* 겨울
+ 봄
+ 여름
+ 가을
+ 겨울
- 봄
- 여름
- 가을
- 겨울
출력
출처 : https://vuddus526.tistory.com/494
7) ordered lists 순서가 있는 목록
- 숫자를 기입하면 순서가 있는 목록이 된다
- 들여쓰기를 하면 모양이 바뀐다
입력
1. 리스트 1-1번
2. 리스트 2번
3. 리스트 3번
1. 리스트 3-1번
2. 리스트 3-2번
출력
출처 : https://vuddus526.tistory.com/494
8) 혼합 리스트
입력
* 여름
* 가을
+ 겨울
2. 봄
- 여름
- 가을
1. 겨울
출력
출처 : https://vuddus526.tistory.com/494
9) Backslash Escapes
- 특수문자를 표현할 때 표시될 문자 앞에 \ 를 넣고 특수문자를 쓰면 된다
입력
* 특수문자 출력안됨
- 특수문자 출력안됨
\* 특수문자 출력
\- 특수문자 출력
출력
출처 : https://vuddus526.tistory.com/494
10) 이미지
- 인라인 이미지 
- 링크 이미지 
- 이미지 사이즈 변경 <img width=”OOOpx” height=”OOOpx”></img> 로 표현
입력
<img src=”https://www.aaa.com/aaa.jpg” width=”200” height=”200” />
<a href=”#”>
<img src=”https://aaa.com/images/aaa.jpg” width=”400px” alt=”sample image”>
</a>
11) 외부 링크
입력
[Google](http://www.google.com “구글”)
[Naver](http://www.naver.com “네이버”)
[Github](http://www.github.com “깃허브”)
12) 내부 링크
- 보여지는 내용
- 괄호 안의 링크를 쓸때는 띄어쓰기는 -로 연결, 영어는 모두 소문자로
입력
[1. Headers 헤더](#1-headers-헤더)
[2. Emphasis 강조](#2-emphasis-강조)
[3. Blockquotes 인용](#3-blockquotes-인용)
13) 코드 블럭
- ``` 또는 ~~~ 로 코드를 감싼다
- 코드가 여러줄인 경우 줄 앞에 공백 네칸을 추가한다
- ``` 옆에 언어를 지정해주면 syntax color가 적용된다
입력
`java
void test() {
System.out.println("Hello World");
}
\`
출력
출처 : https://vuddus526.tistory.com/494
14) 테이블
- 헤더와 셀을 구분할 때 3개 이상의 ‘-‘ 기호가 필요하다
- 헤더 셀을 구분하려면 ‘:’ 안에 내용을 정렬 할 수 있다
-
가장 좌측과 우측에 있는 ‘ ’ 은 생략 가능하다
입력
테이블 생성
---|---|---|---
셀1|셀2|셀3|셀4
셀5|셀6|셀7|셀8
셀9|셀10|셀11|셀12
출력
출처 : https://vuddus526.tistory.com/494
마크다운 에디터
마크다운 문법은 메모장에서 작업해도 상관없지만
작업 속도 향상을 위해 에디터를 사용하는것이 좋다
대표적으로 Typora 또는 VSCode를 많이 사용한다