[Markdown] 마크다운 문법 총 정리 1

11 Dec 2021 • BLOG

마크다운 문법 총정리

시리즈: Index

목차

  1. 마크다운(Markdown)이란?
  2. 제목(Header)
  3. 내용(Context)
    1. 강조(Emphasize)
    2. 정렬
    3. 첨자
    4. 주석
    5. 다음 줄로 넘어가기(New Line)
    6. 하이하이트
  4. 수평선(Horizon)
  5. 인용문(Block Quote)
  6. 목록(List)
    1. Unordered List
    2. Ordered List
    3. Definition List
    4. Task List
    5. Toggle List
  7. 링크(Link)

1. 마크다운(Markdown)이란?

마크다운(Markdown)은 문서를 쉽고 빠르게 작성하기 위한 경량 마크업 언어이다. 텍스트에 몇 가지 기호를 붙여서 제목, 목록, 코드, 링크 같은 서식을 표현하고, 이를 GitHub, 블로그, 노트앱 등이 HTML 같은 형태로 렌더링해서 보여준다.

마크업 언어(Markup Language): 문서의 내용(텍스트)에 구조, 의미, 표현 정보를 태그(표식)로 덧붙여 컴퓨터가 문서를 해석, 표시, 가공할 수 있게 하는 형식이다.

2. 제목(Header)

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

h1

h2

h3

h4

h5
h6

3. 내용(Context)

3.1. 강조(Emphasize)

이탤릭체: *이탤릭체*, _italic letters_, <i>이탤릭체</i>, <em>italic letters</em>  
두껍게: **두껍게**, __bold letters__ , <b>두껍게</b>, <strong>bold letters</strong>  
이탤릭체와 두껍게 같이: ***같이 사용하기***
취소선: ~~취소선~~ , <del>strikethrough</del>  
밑줄: <u>밑줄</u>, <ins>underline</ins>  
<acronym title="텍스트 가리키면 나오는 텍스트">텍스트</acronym>  
<abbr title="텍스트 가리키면 나오는 텍스트">줄 쳐진 텍스트</abbr>

이탤릭체: 이탤릭체, italic letters, 이탤릭체, italic letters
두껍게: 두껍게, bold letters , 두껍게, bold letters
굵은 이탤릭체: 같이 사용하기
취소선: 취소선 , strikethrough
밑줄: 밑줄, underline
텍스트 가리키면 나오는 텍스트 1
텍스트 가리키면 나오는 텍스트 2

3.2. 정렬

<center>중앙</center>  
<div style="text-align: center"> 중앙 </div>  
<div style="text-align: left"> 왼쪽 </div>  
<div style="text-align: right"> 오른쪽 </div>
중앙
중앙
왼쪽
오른쪽

3.3. 첨자

Jekyll에서 적용 안 되는 듯

H~2~O
X^2^

H~2~O
X^2^

텍스트<sup>윗첨자</sup>  
텍스트<sub>밑첨자</sub>

텍스트윗첨자
텍스트밑첨자

3.4. 주석

<!-- 주석 -->

3.5. 다음 줄로 넘어가기(New Line)

C/C++  <!-- 스페이스 두 번 -->
JAVA  <!-- 스페이스 두 번 -->
PYTHON  <!-- 스페이스 두 번 -->
R  <!-- 스페이스 두 번 -->
JAVA SCRIPT<br>
HTML<br>
CSS<br>
GO<br>

C/C++ JAVA PYTHON R JAVA SCRIPT
HTML
CSS
GO

3.6. 하이하이트

안녕하세요. ==jekyll==에서는 적용 안 되는 듯하다.

안녕하세요. ==jekyll==에서는 적용 안 되는 듯하다.

안녕하세요. 이 부분에 <mark>하이라이트</mark>를 할 겁니다.

안녕하세요. 이 부분에 하이라이트를 할 겁니다.

4. 수평선(Horizon)

***
--- (보통 이걸 쓴다)
___

5. 인용문(Block Quote)

> text
>> text
>>> text
> # text

text

text

text

  • text

6. 목록(List)

6.1. Unordered List

* non-ordered list
    * 순서 없는 서브 목록
    + 순서 없는 서브 목록
    - 순서 없는 서브 목록
+ 순서 없는 목록
- 순서 없는 목록
  • non-ordered list
    • 순서 없는 서브 목록
    • 순서 없는 서브 목록
    • 순서 없는 서브 목록
  • 순서 없는 목록
  • 순서 없는 목록
<ul>
    <li>Coffee</li>
    <li>Tea
        <ul>
        <li>Black tea</li>
        <li>Green tea</li>
        </ul>
    </li>
    <li>Milk</li>
</ul>
  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

6.2. Ordered List

1. ordered sub list
    1. 순서 있는 서브 목록
    2. 순서 있는 서브 목록
    3. 순서 있는 서브 목록
10. 순서 있는 목록 <!-순서가 차례대로 자동으로 매겨짐>
  1. ordered sub list
    1. 순서 있는 서브 목록
    2. 순서 있는 서브 목록
    3. 순서 있는 서브 목록
  2. 순서 있는 목록
<ol>
    <li>Coffee</li>
    <li>Tea
        <ol>
        <li>Black tea</li>
        <li>Green tea</li>
        </ol>
    </li>
    <li>Milk</li>
</ol>
  1. Coffee
  2. Tea
    1. Black tea
    2. Green tea
  3. Milk

6.3. Definition List

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.
First Term
This is the definition of the first term.
Second Term
This is one definition of the second term.
This is another definition of the second term.
<dl>
    <dt>First Term</dt>
    <dd>This is the definition of the first term.</dd>
    <dt>Second Term</dt>
    <dd>This is one definition of the second term. </dd>
    <dd>This is another definition of the second term.</dd>
</dl>
First Term
This is the definition of the first term.
Second Term
This is one definition of the second term.
This is another definition of the second term.

6.4. Task List

- [x] 순서없는 리스트에서
- [ ] 대괄호를 추가하고
- [ ] 체크는 X로 하면 된다.
  • 순서없는 리스트에서
  • 대괄호를 추가하고
  • 체크는 X로 하면 된다.

6.5. Toggle List

마크다운에서는 토글을 지원하지 않아 html을 사용한다. markdown="1"을 넣어줘야 jekyll에서 html 사이에 존재하는 markdown을 인식할 수 있다.

<details>
    <summary>토글 접기/펼치기</summary>
    <div markdown="1">
        내용
    </div>
</details>
토글 접기/펼치기 
    내용
</div>

</details>

* 주소를 보여주고만 싶을 때: https://google.com  
* 링크만 있는 inline 링크: <http://www.naver.com>  
* [설명 있는 inline 링크 1](https://google.com)  
* <a href="http://www.youtube.com">설명 있는 inline 링크 2</a>  
* [갖다 대면 텍스트 뜨는 inline 링크 1](https://www.youtube.com "유튜브")  
* <a href="http://www.youtube.com" title="Youtube">갖다 대면 텍스트 뜨는 inline 링크 2</a>  
* [내가 작성한 다른 post로 넘어가고 싶을 때](./2021-11-30-github%EB%B8%94%EB%A1%9C%EA%B7%B8_%EB%8A%90%EB%82%80%EC%A0%90.md)  
* [갖다 대면 텍스트 뜨는 설명 있는 inline 링크인데 링크를 다른 곳에 빼 놓음]  
* [링크 다른 곳에 써놓기 1][Naver Link]  
* [링크 다른 곳에 써놓기 2][1]  

[Naver Link]: https://www.naver.com/
[1]: https://github.com/
[갖다 대면 텍스트 뜨는 설명 있는 inline 링크인데 링크를 다른 곳에 빼 놓음]: https://google.com "구글"
 BLOG  MARKDOWN

Comments

Newest Posts