[Github Blog] 마크다운(Markdown) 문법

Mathematics

• jekyll의 md 포스트 파일 상단에 math : true로 설정해야 됩니다.
• hexo 의 경우 mathjax: true`로 설정 (config파일에서 자동으로 설정 되있으면 안해도 됩니다)

$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$

When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$

When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

• 밑줄 넣기 <u> 입력 </u>
• 글자 색(노란색) 넣기 `입력` 맥북에서는 option + ₩(~) 버튼
• 줄바꿈을 하고 싶다면 문장 뒤에 스페이스바를 두번 + Enter 해준다.

copy가 가능한 셀(코드블럭) 만들기

```markdown
입력은 여기에 해주세요.
```

안녕하세요.  
저는 조인환 이라고 합니다.

안녕하세요.
저는 조인환 이라고 합니다.

<br> 또한 줄바꿈을 해주는 HTML 태그이다.

안녕하세요. <br> 저는 조인환 이라고 합니다.

안녕하세요.
저는 조인환 이라고 합니다.

문단 나누기

한 줄의 공백을 두어 작성 하면 된다. (총 두 줄)

안녕하세요.

저는 조인환 합니다.

안녕하세요.

저는 조인환 합니다.

중첩된 구조

아래와 같이 중첩된 구조를 만드려면 두번째 줄을 스페이스바 2번 눌러 띄어준 후 작성한다. 세번 중첩된 줄을 만드려면 스페이스바 4번.

- hi
  - hello
    - 안녕

• hi
  • hello
    • 안녕

마크다운 문법을 그대로 보여주고 싶을 때

마크다운 문법 앞에 \를 붙여준다.

\<u>안녕</u>

<u>안녕
원래 같으면 밑줄 그어진 형태로 안녕으로 보일텐데 \를 앞에 붙여주어 문법 그대로 <u>가 보여진다.

Header

글의 제목이 된다. 각 제목마다 permalink가 있는 것이 특징! # ~ ###### 로 제목 크기에 따라 h1 ~ h6을 나타낸다.

# h1
## h2
### h3
#### h4
##### h5
###### h6

h1

h2

h3

h4

h5

h6

텍스트

강조

**강조된 텍스트입니다**

기울임

*기울여진 텍스트입니다*
***굵고 기울여진 텍스트입니다***

기울여진 텍스트입니다
굵고 기울여진 텍스트입니다

취소선

~~취소된 텍스트입니다~~

취소된 텍스트입니다

밑줄

<u>밑줄 있는 텍스트입니다</u>

밑줄 있는 텍스트입니다

글씨 색

<span style="color:yellow">노란 글씨입니다.</span>
```  

<span style="color:yellow">노란 글씨입니다.</span>

<br>

## 링크

### 링크만 있는 inline 링크

\<링크주소>

```html
<https://www.google.com>

https://www.google.com

설명 있는 inline 링크

[링크설명](링크주소)

[구글 홈페이지](https://www.google.com)

구글 홈페이지

동일 파일 내에서의 문단(헤더) 이동 링크

[설명어](문단의 주소)

문단의 주소 따는 방법 theorydb님 블로그 참고

1. 헤더 제목 문자열을 복사하고 (문단의 주소)에 복사한다.
2. 특수 문자를 제거한다.
3. 공백을 -로 변경한다.
4. 대문자는 소문자로 변경한다.
   예시) “#Markdown! 장점” > “#markdown-장점”

[마크다운 문법을 그대로 보여주고 싶을 때](#마크다운-문법을-그대로-보여주고-싶을-때)

마크다운 문법을 그대로 보여주고 싶을 때

동영상 삽입

<video controls width="800">
    <source src="/assets/videos/attention.mp4" type="video/mp4">
</video>

그림 링크 삽입

로컬 파일 경로도 가능하다.

{: width=”70%” height=”70%”}{: .align-center}

*사진 출처 : 우리집 꾸미 ^^

그림 자체에 링크 걸기

](이동하려는 링크 주소)

인용문

>로 표현할 수 있다. >> 두개 쓰면 중첩된 인용문.
중첩시킬땐 앞에 스페이스바 2번 !

> 이건 인용문이에요.
  >> 이건 인용문 속 인용문이에요.

이건 인용문이에요.

이건 인용문 속 인용문이에요.

<cite> --- 태그와 {{: .small}}를 함께 써서 인용문 출처 남기기

<cite>Steve Jobs</cite> --- Apple Worldwide Developers' Conference, 1997
{% raw %}{: .small}{% endraw %}

Steve Jobs — Apple Worldwide Developers’ Conference, 1997
{: .small}

리스트

unordered list

- 순서가
  * 없는
    + 목록 
  * 순서가
- 없어용
```  

- 순서가
  - 없는
    - 목록
  - 순서가
- 없어용

### ordered list

```html
1. 순서가
2. 있는  
   1. 목록
      - 하나
      - 둘
   2. 목록
       - 하나
       - 둘
3. 목록   

1. 순서가
2. 있는
   1. 목록
      • 하나
      • 둘
   2. 목록
      • 하나
      • 둘
3. 목록

check list

- [ ] 체크 안됨
- [X] 체크 됨

• 체크 안됨
• 체크 됨

구분선

***와 ---로 나타낼 수 있다.

***
---

---

---

테이블

|와 - (3개 이상)의 조합으로 테이블을 만들 수 있다.

• 정렬
  • 왼쪽 정렬 |:—|
  • 오른쪽 정렬 |—:|
  • 가운데 정렬 |:—:|

|**제목**|평점|감상평|
|:---:|---:|---|
|Avatar1|⭐⭐⭐⭐⭐|나비|
|Avatar2|⭐⭐⭐⭐⭐|물|
|아바타|⭐⭐⭐⭐⭐|안녕|
```  

|**제목**|평점|감상평|
|:---:|---:|---|
|Avatar1|⭐⭐⭐⭐⭐|나비|
|Avatar2|⭐⭐⭐⭐⭐|물|
|아바타|⭐⭐⭐⭐⭐|안녕|

<br>

## 토글 리스트 (접기/펼치기)

마크다운에선 지원하지 않고 HTML의 `details` 태그로 사용 가능하다.  `div markdown=”1”` 은 jekyll에서 html사이에 markdown을 인식 하기 위한 코드이다.

```html
<details>
<summary>여기를 눌러주세요</summary>
<div markdown="1">       

숨겨진 내용

</div>
</details>

여기를 눌러주세요

숨겨진 내용

버튼

<a href="#" class="btn--success">Success Button</a>

Success Button

[Default Button](#){% raw %}{: .btn .btn--primary }{% endraw %}

Default Button{: .btn .btn--primary }

맨 위로 이동하기{: .btn .btn–primary }{: .align-right}