[Practice] Markdown 문법 정리

onlybox·2021년 5월 2일
0

Tool

목록 보기
1/1
post-thumbnail

Markdown 작성법

아직 Markdown문법에 익숙치 않기 때문에 연습하면서 나중에 velog작성할 때 참고할 페이지를 만들기 위해 마크다운 문법을 정리했습니다.


0. 개요

Markdown이란?

일반 텍스트로 서식이 있는 문서를 작성할 수 있는 경량 마크업 언어입니다.
(출처-위키백과)
쉽게 설명하자면 간단한 문법을 활용해 쉽고 빠르게 문서양식을 편집할 수 있는 도구로, 흔히 github의 README.md와 같이 확장자가 md인 파일이 마크다운으로 작성된 문서입니다.


1. 헤더(Header)

1~6 의 여섯개 단계로 헤더(제목)을 지정 가능합니다.
velog에서는 헤더를 바탕으로 우측에 목록이 생성되니, 헤더를 이용하면 보기 편한 글을 작성할 수 있어요.

사용법

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Header 1,과 2는 `#` 외에도 `=`, `-` 기호도 사용 가능합니다.
Header 1
=
Header 2
--

결과

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Header 1,과 2는 # 외에도 =, - 기호도 사용 가능합니다.

Header 1

Header 2


2. 폰트

글자의 기본적인 굵기, 기울임, 취소선, 색상 등을 변경할 수 있습니다.

사용법

*기울여 쓰기*
_기울여 쓰기_
__굵게 쓰기__
~~취소선~~
<u>밑줄</u>

<span style="color:red">빨간색</span>
<span style="color:#00FF00">Green</span>  (`#`을 넣은 뒤 16진수로 R, G, B 값을 입력해서 지정할 수 있다.)
<span style="color:rgb(0, 255, 0)">rgb(245, 235, 13)</span>

결과

기울여 쓰기
기울여 쓰기
굵게 쓰기
취소선
밑줄
Red
Green
Blue(245, 235, 13)


3. 목록

List 형태가 필요한 경우 순서를 표기하거나 점으로 목록 생성이 가능합니다.

사용법

- 순서가 필요 없이 점으로 목록 생성 시
  * -, *, + 기호가 사용 가능
  + 들여쓰면 서브목록을 붙일 수 있음
    - 두 칸을 띄어쓰면
    + 서브 목록을 붙일 수 있음

1. 순서대로 번호를 붙일 경우 
2. 앞에 숫자와 점을 붙인 뒤 한칸 띄기
 	1. 서브목록에서도 
 	2. 가능

3. 숫자와 기호는 
	- 섞어서
      + 사용 가능

결과

  • 순서가 필요 없이 점으로 목록 생성 시
    • -, *, + 기호가 사용 가능
    • Tab으로 들여쓰면 서브 목록을 붙일 수 있음
      • 두 칸을 띄어쓰면
      • 2단계 이상 서브 목록을 붙일 수 있음
        • 목록없는 기호는
        • 혼합해서도 사용 가능
  1. 순서대로 번호를 붙일 경우

  2. 앞에 번호와 점을 붙인 뒤 한칸 띄기

    1. 서브 목록에서도
    2. 가능
  3. 숫자와 기호는

    • 섞어서
      • 사용 가능

4. 인용문

인용문을 블록 형태로 추가할 수 있습니다.

사용법

> 블럭 인용 문자를 사용할 수 있다. 
> 이것은 인용문이다. - 작성자
>> 내부에 다시 한번 사용 가능하다. 이것은 이중 인용문이다. - 작성자

결과

블럭 인용 문자를 사용할 수 있다.

내부에 다시 한번 사용 가능하다.

> 개수에 따라

중첩이 가능하다.


5. 코드 블럭

코드 작성 시 기호를 사용하여 인라인 코드를 작성할 수 있습니다.
여러줄의 코드를 작성 할 때는 기호 또는 ~를 세번 쓴 코드 블럭을 사용 할 수 있습니다.

또, 코드에 하이라이트를 넣으려면 ```기호 뒤에 언어 이름을 쓰면 됩니다.

사용법

`인라인 코드 표현 시`
`void function(){}`
~~~cpp
블럭으로 표현 시
void function(){}
~~~
```python
또는 물결로도 표시 가능
def function():
	pass
```

결과

인라인 코드 표현 시
void function(){}

블럭으로 표현 시
void function(){}
또는 물결로도 표시 가능
def function():
	pass

6. 수평선 넣기

수평선을 넣어 페이지 구분이 가능합니다.

사용법

- 또는 * 또는 _ 기호를 3개 이상 작성하여 구현 가능

---
***
___



7. 문단 나누기

문단은 줄 바꿈으로 나타내며, 줄 바꿈을 두 번 하면 (문장과 문장 사이에 빈 줄이 있을 때) 문단을 나눌 수 있습니다.
여러번 줄 바꿈을 사용할 땐 <br/> 기호를 사용하거나 문장 끝에 세 칸 이상 띄워서 사용할 수 있습니다.

사용법

문장 1
(빈 줄)
문장 2<br/><br/>
또는 마지막에   
세 칸 이상 띄우기    

결과

문장 1

문장 2


또는 마지막에

세 칸 이상 띄우기


8. 링크

인라인 링크, url링크, 참조링크 기능을 활용해 웹페이지 주소, 이메일 주소를 추가할 수 있습니다.

사용법

참조링크 - [id]: URL "Option Title"
인라인 - [Title](Link)
url링크: <URL/>, E-mail: <abc@abc.com>
예시
[Google]: https://www.google.com "Google Link"
[Google]: (https://www.google.com)
[Google]: <https://www.google.com/>
<email@abc.com>

결과

Google
https://www.google.com/
email@abc.com


9. 이미지 넣기

이미지 삽입

사용법

1. 이미지만 삽입할 경우
![이미지](이미지 링크)

2. 사이즈를 조절할 경우 - HTML 태그로 처리
<img src=이미지링크, width="450px" or "40%" height="300px" title="크기변경">
(velog에서는 사이즈 변경은 반영이 안되는거 같네요...)

3. 이미지 삽입 후 링크 걸기
[![이미지](링크)](연결할 링크)

결과


10. 표 삽입

간단한 표 생성이 가능하고, 표 안에서는 폰트 스타일을 적용할 수 있습니다.
또한 왼쪽, 가운데, 오른쪽 정렬 적용이 가능합니다.

사용법

| 기호로 셀을 구분하며 작성할 수 있으며 2.강조 에서 설명했던 글꼴 사용이 가능
하이픈(-)과 세미콜론(:)을 이어붙이면 오른쪽, 왼쪽, 가운데 정렬이 가능

| 표 | 셀1 | 셀2 |
|:-|:-:|-:|
|왼쪽 정렬|가운데정렬|오른쪽정렬|

결과

셀1셀2
왼쪽 정렬가운데정렬오른쪽정렬

11. 체크박스

-, *, + 뒤에 한칸 띄어쓴 후 대괄호([, ])를 추가하면 체크박스 생성이 가능합니다.
대괄호([ ]) 사이에 x를 넣으면 체크된 체크박스가 생성됩니다.

사용법

- [ ] 공부
* [x] 놀기

결과

  • 공부
  • 놀기

참고

위키백과
ihoneymon님 github
TheoryDB
yuuuye

profile
ML하는 개발자

0개의 댓글