개발자에게 블로그는 필수라고 하길래 드디어 블로그를 시작하게 되었다.
나는 직접 글을 보고 정리하며 익히는 스타일이기에 여기에 마크다운(markdown) 작성법을 정리해보고자 한다.
시작!
📘 [시작하기 전에] 마크다운이란?
마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.
-위키백과
- 쉽게 읽을 수 있고, 쉽게 작성할 수 있게 만들어짐
- 가독성이 제일 중요
- 웹상에서 사용할 수 있는 글쓰기 도구
- html을 완전하게 대체하지는 못함
📖 마크다운 작성법
📌 제목(Headers)
h1부터 h6을 이용해서 제목을 표현할 수 있다.
#의 개수로 표현이 가능하다.
✍ 입력
# h1
## h2
### h3
#### h4
##### h5
###### h6💻 결과
h1
h2
h3
h4
h5
h6
🧐 h1과 h2는 이렇게도 작성 가능하다.
=, -를 각각 2개 이상 사용하면 아래와 같이 h1, h2의 #을 대체할 수 있다.
여러 개를 사용해도 마찬가지이다.
✍ 입력
h1
==
h2
--
하이픈을 여러 개 사용한 제목
----------💻 결과
h1
h2
하이픈을 여러 개 사용한 제목
📌 문단 간격(Line Breaks)
문단의 간격은 줄 바꿈으로 나타내며, 여러 번 줄 바꿈시 <br/>을 사용하면 가능하다.
✍ 입력
첫 번째 문단<br/><br/>
두 번째 문단💻 결과
첫 번째 문단
두 번째 문단
📌 목록(List)
순서를 표기하는 목록 / 순서가 없는 목록 두 가지를 작성할 수 있다.
✅ 순서를 표기하는 목록
숫자와 .을 사용하여 작성한다.
✍ 입력
1. 첫 번째 목록
2. 두 번째 목록
3. 세 번째 목록💻 결과
1. 첫 번째 목록
2. 두 번째 목록
3. 세 번째 목록
✅ 순서가 없는 목록
-, *, +을 사용하여 작성한다. (셋 다 동일하게 작성됨)
인라인 코드, 블럭 코드를 작성할 수 있으며 Tab키나 스페이스 바를 이용해 들여쓰기가 가능하다.
✍ 입력
- 순서 없는 목록 1
- 목록 1.1
- 목록 1.2
- 순서 없는 목록 2
Tab 두번 하면 코드 블럭을 만들 수 있어요.
* 순서 없는 목록 3
+ 순서 없는 목록 4
+ `인라인 코드 가능`
+ 들여쓰기(tab키 이용)를 하면 다른 모양으로 표현 됩니다.
```
블럭 코드 가능
``` 💻 결과
-
순서 없는 목록 1
- 목록 1.1
- 목록 1.2 -
순서 없는 목록 2
Tab 두번 하면 코드 블럭을 만들 수 있어요.
- 순서 없는 목록 3
- 순서 없는 목록 4
+인라인 코드 가능-
들여쓰기(tab키 이용)를 하면 다른 모양으로 표현 됩니다.
블럭 코드 가능
-
📌 폰트 스타일
굵게, 기울이기, 취소선 등 기본적인 스타일을 아래와 같이 작성할 수 있다.
✍ 입력
__굵게__
**굵게**
_기울여 쓰기_
*기울여 쓰기*
~취소선~
~~취소선~~💻 결과
굵게
굵게
기울여 쓰기
기울여 쓰기
~취소선~
취소선
📌 인용문
인용문을 작성할 때에는 >를 사용한다.
1개는 인용문.2개는 인용문 안에 인용문.3개는 인용문 안에 인용문 안에 인용문.
✍ 입력
> 인용문 작성하기
-작성자
> 인용문 작성하기
>> (>)의 갯수에 따라
>>> 중첩문 가능💻 결과
인용문 작성하기
-작성자
인용문 작성하기
(>)의 갯수에 따라
중첩문 가능
📌 기호 표시(Backslash Escapes)
- 특수문자를 표현할 때, 표시될 문자 앞에
\를 넣고 특수문자를 쓰면 된다. - 주의할 점은 앞과 뒤에가 형식이 똑같이 백슬래쉬 뒤에 특수문자라는 것이다.
감싸는 형태가 아니다. - 백슬래쉬는 아래의 특수문자를 표현할 수 있다.
\backslash,\backtick, * asterisk, _ underscore, {} curly braces, [] square brackets, () parentheses, # hash mark, + plus sign, - minus sign (hyphen), . dot, ! exclamation mark
✍ 입력
\*literal asterisks\*
\#hash mark\#
\[squre brackets\]
\*
\_
\()
\{}
\[]
\#
\+
\-
\.
\!
\\💻 결과
*literal asterisks*
#hash mark#
[squre brackets]
*
_
()
{}
[]
#
+
-
.
!
\
📌 코드 블럭(Code Block)
코드 블럭은 작성한 코드를 정리하거나 강조하고 싶은 부분을 나타낼 때 사용한다.
인라인과 블럭 단위로 구분할 수 있다.
✅ Inline
- 인라인 블럭으로 처리하고 싶은 부분을 `(백틱)으로 감싸준다.
✍ 입력
`인라인 블럭`💻 결과
인라인 블럭
✅ Block
- `(백틱)을 3번 입력하고
enter를 눌러 생성한다. - 첫 줄과 마지막 줄에 ```혹은 ~~~코드를 입력한다.
- 코드가 여러 줄인 경우, 줄 앞에 공백 네 칸을 추가하면 된다.
- ```옆에 언어를 지정해주면 syntax color가 적용된다.
- 작성하기 클릭 → 추가설정 → 코드블록 테마 선택에서 변경 가능하다.
- 마크다운 코드블록 사용가능한 언어 목록
| 언어 이름 | 작성 방식 |
|---|---|
| Bash | bash |
| C | c |
| C# | cs |
| C++ | cpp |
| CSS | css |
| Diff | diff |
| HTML, XML | html |
| HTTP | http |
| Ini | ini |
| JSON | json |
| Java | java |
| JavaScript | javascript |
| PHP | php |
| Perl | perl |
| Python | python |
| Ruby | ruby |
| SQL | sql |
✍ 입력
\```
This is code blocks.
\```
~~~
This is code blocks.
~~~
4 spaces
```javascript
function test() {
console.log("look ma’, no spaces");
}
\```실제로 사용할 때는 `(백틱)앞에 있는 백슬래쉬 없애고 사용!!
💻 결과
This is code blocks.This is code blocks.4 spacesfunction test() {
console.log("look ma’, no spaces");
}📌 수평선(Horizontal Rules)
- -또는 *또는 _을 3개 이상 작성
- 단, -을 사용할 경우 header로 인식할 수 있으니 이 전 라인은 비워둬야 한다.
- 아래의 입력 방식은 모두 동일한 수평선을 만들어준다.
✍ 입력
* * *
***
*****
- - -
---------------💻 결과
📌 링크(Link)
외부 링크(External Links)와 내부 링크(Internal Links)로 나뉜다.
✅ 외부 링크(External Links)
인라인 링크 : [링크](http://example.com "링크 제목") URL 링크 : <example.com>, <example@example.com>; - 꺽쇠 괄호 없어도 자동으로 링크를 사용
✍ 입력
[Google](http://www.google.com "구글")
[Naver](http://www.naver.com "네이버")
[Github](http://www.github.com "깃허브")
구글 www.google.com; 꺽쇠없음
네이버 <www.naver.com>; 꺽쇠있음
My mail : <judy.hayoung.shin@gmail.com>💻 결과
Google
Naver
Github
구글 www.google.com; 꺽쇠없음
네이버 <www.naver.com>; 꺽쇠있음
My mail : judy.hayoung.shin@gmail.com
✅ 내부 링크(Internal Links)
[보여지는 내용](#이동할 헤드(제목)) - 괄호 안의 링크를 쓸 때는 띄어쓰기는 -로 연결 - 영어는 모두 소문자로 작성 - velog에서는 사용 안되는 것 같다.
✍ 입력
[1. 제목(Headers)](##제목(Headers))
[3. 링크(Link)](##링크(Link))💻 결과
1. 제목(Headers)
2. 링크(Link)
📌 강조(Emphasis)
볼드, 이탤릭, 취소선을 사용할 수 있다.
✍ 입력
*이탤릭*
_이탤릭_
**볼드**
__볼드__
~~취소선~~💻 결과
이탤릭
이탤릭
볼드
볼드
취소선
📌 이미지 삽입(Images)
링크 삽입 방식과 유사하나, 맨 앞에 !를 붙인다.
✍ 입력
1. 일반 이미지 삽입하기 : 
예시: 
2. 이미지에 설명 삽입하기 : 
예시: 
** 참고: 이미지에 마우스를 올렸을 때 나타나는 설명을 의미함
3. 이미지에 링크 걸기 : [](연결할 url "url 설명 문구")
예시: [](https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_1280.jpg "Pixabay Image")💻 결과
1. 일반 이미지 삽입 예시:
-
이미지에 설명 삽입 예시:
-
이미지에 링크 걸기 예시:
📌 테이블(Table)
수직선 기호(|)로 열을 구분할 수 있다.하이픈 기호(-)를 3개 이상 붙이고,세미콜론(:)을 붙일 경우 순서대로 왼쪽 절렬, 가운데 정렬, 오른쪽 정렬이 가능하다.- 가장 좌측과 가장 우측에 있는
수직선 기호(|)는 생략 가능하다.
✍ 입력
테이블 생성
헤더1|헤더2|헤더3|헤더4
----|----|----|----
셀01|셀02|셀03|셀04
셀05|셀06|셀07|셀08
셀09|셀10|셀11|셀12
테이블 정렬
헤더1|헤더2|헤더3
:----|:----:|----:
Left|Center|Right
셀01|셀02|셀03
셀04|셀05|셀06
셀07|셀08|셀09💻 결과
테이블 생성
| 헤더1 | 헤더2 | 헤더3 | 헤더4 |
|---|---|---|---|
| 셀01 | 셀02 | 셀03 | 셀04 |
| 셀05 | 셀06 | 셀07 | 셀08 |
| 셀09 | 셀10 | 셀11 | 셀12 |
테이블 정렬
| 헤더1 | 헤더2 | 헤더3 |
|---|---|---|
| Left | Center | Right |
| 셀01 | 셀02 | 셀03 |
| 셀04 | 셀05 | 셀06 |
| 셀07 | 셀08 | 셀09 |
📌 체크박스(Check Box)
*,+,-기호 뒤에 띄어쓰기 이후대괄호[]를 넣어 작성한다.- 줄 앞에 - [x]를 써서 완료된 리스트 표시.
- 줄 앞에 - [ ]를 써서 미완료된 리스트 표시.
✍ 입력
- [ ] 체크되지 않은 박스
- [X] 체크된 박스💻 결과
- 체크되지 않은 박스
- 체크된 박스
📌 이모지(Emoji)
- 링크에서 복사 + 붙여넣기 :
- 단축키
- window10:
윈도우 키+마침표(.) - mac:
Command+Control+스페이스 바
📌 글자 색상
html 태그를 이용하여 작성이 가능하다.
✍ 입력
<span style="color:red">red</span>
<span style="color:#d3d3d3">#d3d3d3</span>
<span style="color:rgb(245, 235, 13)">rgb(245, 235, 13)</span>💻 결과
red
#d3d3d3
rgb(245, 235, 13)
📘 마치며
velog를 처음 접하게 되면서 마크다운 언어를 정리해보았다.
어서 체화시키고 자유자재로 사용해야겠다.
다음은 마크다운 문법을 정리하면서 참고한 사이트들이다.
https://velog.io/@hotoron/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4Markdown-%EC%82%AC%EC%9A%A9%EB%B2%95
