markdown(마크다운)블로그에서 활용할 수 있는 문법 정리

January 16, 2020 3 분 소요

해당 포스팅은 지속적으로 업데이트 될 수 있습니다.

들어가며

본 포스트는 실제 블로그를 운영하면서 사용할 혹은 사용했던 문법들을 정리하여 나중에 쉽게 참고하기 위해서 작성한다.

기본적인 마크다운 문법

헤더

# H1

## H2

### H3

#### H4

##### H5

###### H6

헤더의 종류는 1 ~ 6까지 존재하며, 순서대로 크기가 작아진다. 1과 2만 수평선이 그려지고, 3 ~ 6까지는 수평선이 없다.

인용

내용

내용

내용

내용

> 내용
>> 내용
>>> 내용
>>>> 내용

인용 문구를 사용할 때 >를 붙인다.
> 개수를 늘리면 인용 문구 안에서 또 인용 문구를 계속해서 사용할 수 있다.

리스트

항목 1
항목 2
- 요소 1
- 요소 2
항목 3
- 요소 1
- 요소 2
  - 요소 1
    1. 내용 1
    2. 내용 2
    3. 내용 3

- 항목 1
+ 항목 2
	* 요소 1
	- 요소 2
* 항목 3
	* 요소 1
	* 요소 2
		* 요소 1
			1.	 내용 1
			2.	 내용 2
			3.	 내용 3

설명

-, * + 중 어떤 것을 사용해도 동일하다.

-, * +는 원, 빈 원, 네모… 순으로 늘어난다.

항목 밑에 요소를 추가하고 싶으면 같은 라인이 아닌 탭(tap)을 한번 한 뒤에 작성하면 된다.

숫자로 리스트를 만들고 싶으면 탭한뒤 1.을 하면 된다.

코드 강조

def hello():
	print("hello world")

강조

**Bold**

**Bold2**

~~취소선~~

기울임

_기울임2_

링크

<http://facebook.com/> http://facebook.com/

[googlelink](https://google.com) googlelink

이미지

일반적으로 이미지를 가져오는 방법

![alt text](/assets/img/fromis.PNG)

내 Github에 사진 저장 후 가져오는 방법

나의 repository로 이동한다.
상단의 Issues를 클릭한다.
New Issue를 클릭한다.
자신이 구별할 제목을 넣고, 사진들을 드래그 해서 넣은 뒤, Submit new issue를 클릭한다.
내가 쓴 issue에 들어간 뒤 자신이 사용하고 싶은 사진 위치에 우 클릭 후 링크 주소 복사를 클린다.
자신이 원하는 곳에 과 동일하게 사용한다.

표

| Header1 | Header2 | Header3 |
|:--------|:-------:|--------:|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |

Header1	Header2	Header3
cell1	cell2	cell3
cell4	cell5	cell6

테마에 적용될 수 있는 문법

버튼

[Default Button Text](#link){: .btn}
[Primary Button Text](#link){: .btn .btn--primary}
[Success Button Text](#link){: .btn .btn--success}
[Warning Button Text](#link){: .btn .btn--warning}
[Danger Button Text](#link){: .btn .btn--danger}
[Info Button Text](#link){: .btn .btn--info}
[Inverse Button](#link){: .btn .btn--inverse}
[Light Outline Button](#link){: .btn .btn--light-outline}

Default Button Text Primary Button Text Success Button Text Warning Button Text Danger Button Text Info Button Text Inverse Button Light Outline Button

[X-Large Button](#link){: .btn .btn--primary .btn--x-large}
[Large Button](#link){: .btn .btn--primary .btn--large}
[Default Button](#link){: .btn .btn--primary }
[Small Button](#link){: .btn .btn--primary .btn--small}

X-Large Button Large Button Default Button Small Button

설명

{: .btn}기본 형태에서 .btn--primary, .btn--info 등을 붙이면 색상이 변하게 된다.
기본적으로 색에 대한 의미가 있다.
중요, 성공, 주의, 위험, 정보 등 상황에 맞춰서 사용해도 되고, 자기가 사용하고 싶은 색상을 사용해도 된다.

notice (배경 색상)

**Watch out!** This paragraph of text `{: .notice--primary}` class.
{: .notice--primary}

**Watch out!** This paragraph of text `{: .notice--info}` class.
{: .notice--info}

**Watch out!** This paragraph of text `{: .notice--warning}` class.
{: .notice--warning}

**Watch out!** This paragraph of text `{: .notice--success}` class.
{: .notice--success}

**Watch out!** This paragraph of text `{: .notice--danger}` class.
{: .notice--danger}


{% capture notice-text %} 
You can also add the .notice class to a div element.

* Bullet point 1
* Bullet point 2
{% endcapture %}

<div class="notice--info">
  <h4>Notice Headline:</h4>
  {{ notice-text | markdownify }} 
</div>

Watch out! This paragraph of text {: .notice} class.

Watch out! This paragraph of text {: .notice--primary} class.

Watch out! This paragraph of text {: .notice--info} class.

Watch out! This paragraph of text {: .notice--warning} class.

Watch out! This paragraph of text {: .notice--success} class.

Watch out! This paragraph of text {: .notice--danger} class.

Notice Headline:

You can also add the .notice class to a <div> element.

Bullet point 1
Bullet point 2

각주

페이지 최하단에 표시되어집니다.

각주1 ¹, 각주2 ²

각주1 [^1], 각주2 [^2]
 
[^1]: 각주 내용 1
[^2]: 각주 내용 2

reference

본 블로그는 개인이 공부하고, 정리한 걸 기록하는 공간입니다.
오타, 오류가 존재할 수 있습니다. 댓글을 달아주시면 수정할 수 있도록 하겠습니다.
감사합니다 :D

각주 내용 1 ↩
각주 내용 2 ↩

Twitter Facebook LinkedIn

Seonjae Choi