작성일자 : 2023-06-19
수정일자 : 2023-09-16
Ver 0.1.2
수정일자 : 2023-09-16
Ver 0.1.2
Markdown Syntax
- 1. 제목
- 2. 구분선 및 줄바꿈
- 3. 글자 속성
- 4. 인용문구
- 5. 들여쓰기
- 6. 이미지
- 7. 외부 링크
- 8. 내부 링크
- 9. 코드 블럭
- 10. 체크리스트
- 11. 표
- 12. 토글버튼
마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.
1. 제목
'#' 기호로 제목 나눔 (1~6개)
# Heading
Heading
===
## Heading
Heading
---
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
2. 구분선 및 줄바꿈
***
---
___
*
줄바꿈
JayJay <br> Just Do It
JayJay
Just Do It
3. 글자 속성
3.1 강조
*Just Do It*
Just Do It
<u>Just Do It</u>
Just Do It
_Just Do It_
Just Do It
**Just Do It**
Just Do It
Just Do~~n't~~ ~~qu~~it
Just Don't quit
Just Do<del>n't</del> <del>qu</del>it
Just Don't quit
**Just Do**~~**n't**~~ ~~**qu**~~**it**
Just Don't quit
==Just Do it==
==Just Do it==
3.2 색상
<span style="color: #CC0000; background-color: #FFFF33;">Just Do It</span>
Just Do It
<span style="color: red; background-color: skyblue;">Just Do It</span>
Just Do It
<span style="color:rgb(245, 235, 13)">rgb(245, 235, 13)</span>
Just Do It
헥스 코드
4. 인용문구
> Just Do It
>> Just Do It
>>> Just Do It
Just Do It
Just Do It
Just Do It
> Nike
>> - Slogan `Just Do It`
Nike
- Slogan
Just Do It
5. 들여쓰기
- *,+,- 를 이용하여 순서가 없는 목록 생성
- 들여쓰기를 하면 모양이 바뀜
- 제목
1. list 1
2. list 2
1. list 3
2. list 4
1. 머리
* 머리카락
* 뚝배기
+ 털
2. 다리
- 다리털
- 발가락
1. 허벅지
*,+,- 를 이용하여 순서가 없는 목록 생성
- 들여쓰기를 하면 모양이 바뀜
- 제목
- 들여쓰기를 하면 모양이 바뀜
list 1
list 2
- list 3
- list 4
머리
- 머리카락
- 뚝배기
- 털
- 다리
- 다리털
- 발가락
- 허벅지
6. 이미지
- 링크와 비슷하지만 앞에 !가 붙는다.
- 인라인 이미지 
- 링크 이미지 
- 사이즈 변경은 <img width="ooopx" height="ooopx"></img>
- 링크와 이미지를 합친 문법
[  ]( 링크URL )
[](https://www.nike.com/kr/)
<img src="https://imgur.com/JUQRe.jpg" width="500" height="200" />
<!-- a태그를 이용한 이미지 링크 생성법-->
<a href="#">
<img src="https://github.com/images/markdown_syntax.jpg" width="400px" alt="sample image">
</a>
- 링크와 비슷하지만 앞에 !가 붙는다.
- 인라인 이미지
- 링크 이미지
- 사이즈 변경은
- 링크와 이미지를 합친 문법
7. 외부 링크
구글 www.google.com 네이버 www.naver.com
[Google](http://www.google.com "구글")
[Naver](http://www.naver.com "네이버")
[Github](http://www.github.com "깃허브")
구글 www.google.com
네이버 www.naver.com
[Nike.com](https://www.nike.com/kr/)
- 방법2
<a href="www.google.com" target="_blank">구글</a>
---
# 8. 내부(해시)링크<a id="chapter-8"></a>
[보여지는 내용](#이동할 헤드(제목))
- 괄호 안의 링크를 쓸 때는 **띄어쓰기는 -로 연결**, 영어는 모두 **소문자**로 작성
### 테이블 구성
* [1장](#chapter-1)
* [2장](#chapter-2)
* [3장](#chapter-3)
1장
1장의 내용은.....
2장
2장의 내용은.....
3장
3장의 내용은.....
---
# 9. 코드 블럭<a id="chapter-9"></a>
- 간단한 인라인 코드는 텍스트를 앞뒤로 `기호로 감싸면 됨
- ` 혹은 ~~~ 코드
- 코드가 여러 줄인 경우, 줄 앞에 공백 네 칸을 추가하면 됩니다.
- ` 옆에 언어를 지정해주면 syntax color가 적용됩니다.
```sql
SELECT a.ename
,a.deptno
,a.job
FROM EMP a
import pandas as pd
import numpy as np
10. 체크 리스트
- 줄 앞에 -[x] 를 써서 완료된 리스트 표시
- 줄 앞에 -[]를 써서 미완료되 리스트 표시
- 체크 안에서 강조 외 여러 기능 사용 가능
- [x] this is a complete item
- [ ] this is an incomplete item
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] this is a complete item
- [ ] this is an incomplete item
- [x] @mentions, #refs, links, formatting, and
tagssupported
11. Table
- 헤더와 셀을 구분 할때 3개 이상의 - 기호 필요
- 헤더 셀을 구분하면서 : 기호로 셀안에 내용을 정렬
- 가장 좌측과 가장 우측에 있는 | 기호는 생략 가능
테이블 생성
헤더1|헤더2|헤더3|헤더4
---|---|---|---
셀1|셀2|셀3|셀4
셀5|셀6|셀7|셀8
셀9|셀10|셀11|셀12
| 헤더1 | 헤더2 | 헤더3 | 헤더4 |
|---|---|---|---|
| 셀1 | 셀2 | 셀3 | 셀4 |
| 셀5 | 셀6 | 셀7 | 셀8 |
| 셀9 | 셀10 | 셀11 | 셀12 |
테이블 정렬
헤더1|헤더2|헤더3
:---|:---:|---:
Left|Center|Right
1|2|3
4|5|6
7|8|9
| 헤더1 | 헤더2 | 헤더3 |
|---|---|---|
| Left | Center | Right |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
12. 토글 버튼
마크다운에서 토글은 지원하지 않는다. 그렇기 때문에 html의 태그를 사용해서 토글 기능을 사용할 수 있다. 이 기능을 제공하는 html의 태그가 바로 details이다. 그리고 div markdown="1"을 꼭 넣어줘야 하는데 이것은 jekyll에서 html사이에 markdown을 인식 하기 위한 코드이다.
<details>
<summary>Nike Slogan</summary>
<div markdown="1">
Just Do It
</div>
</details>
Nike Slogan
Just Do It
