마크다운 문법(Markdown Syntax)

23 Mar 2022 in Programming on Frontend

Markdodwn Cheat Sheet

🧾 Prologue (접기/펼치기)

Markdown이란?

정의

Markdown은 문서 작성을 지원하는 태그(Tag) 형식의 문법.

Markup 언어의 일종으로, HTML 경험 없이도 헤더, 글 머리 기호, 테이블, 이미지/ 링크 삽입, 글자 모양 등 다양한 서식을 쉽게 추가하는 방식의 문서 편집 문법.

마크다운(markdown)은 일반 텍스트 문서의 양식을 편집하는 문법이다. README 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쓰인다. 마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능하다. (출처 - 위키백과)

마크다운 (Markdown)은 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었다. 처음 이메일의 글쓰기 형식에 영감받아 python을 이용하여 html변환기를 만드면서 시작되었다. 그루버는 마크다운으로 작성한 문서를 HTML로 변환하는 펄 스크립트도 만들었다.

특징

마크다운 문법은 읽기도 쉽지만 쓰기도 쉽다는 장점이 있다. html보다 간단하고, 마크다운에서는 소스코드를 그대로 입력할 수 있기 때문에 코드를 복사해서 사용하기도 편하고, 코드블록을 사용하면 코딩언어에 따라 하이라이트를 지원하여 가독성이 높아지는 효과가 있다.

생산성 관련하여 작성 속도, 편리성 면에서 Web문서 작성시 유리하다. 다만, 표준이 없어 핵심문법을 제외하고는 편집자에 따라 조금씩 상이하다. Tistory, Naver 블로그가 채택한 WISYWIG 에디터에 익숙한 사용자들에게는 마크다운 문법이 코딩처럼 느껴지실 수 있지만, 조금 익숙해지면 오히려 WISYWIG에디터보다 편하다는 것을 알게 될 것이다. 마크다운 문서의 파일 확장자는 .md를 쓴다.

• Markdown이란?
  • 정의
  • 특징
• 코드 블록
  • 인라인 블록
  • 코드 블록
• 표
• 줄바꿈
• 문단 나누기
• 들여쓰기
• 마크다운 문법 표시
• 텍스트
  • 강조
  • 이탤릭체
  • 취소선
  • 밑줄
  • 글씨 색
    • 적용
• Link
  • 텍스트에 링크 삽입
  • 동일 파일 내에서의 문단(헤더) 이동 링크
  • 이미지에 링크 삽입
  • 텍스트와 이미지 어울림
  • 유튜브 삽입
• 인용문
• 목차
  • Unordered list
  • Ordered list
• 구분선
• 토글 (접기/펼치기)
• 맨 위로 가기 버튼
• Header
• h1
  • h2
    • h3
      • h4
        • h5
          • h6

코드 블록

인라인 블록

`inline 코드`입니다.

inline 코드입니다.

코드 블록

물결표시(Tilde)키에 있는 ` (Grave)를 세 개 쓰고 랭귀지명 입력후 코드 작성.
```언어 이름(소문자)
코드 입력
```

예를 들어,

```c#
public int Score{
   get{
     return Score;
   }
   set{
      if (Score<0){
      Score = 0;
     }
     Score += value;
   }
}
```

     public int Score{
         get{
             return Score;
         }
 
         set{
             if (Score<0){
                 Score = 0;
             }
             Score += value;
         }
     }

표

| (VERTICAL BAR) 와 -를 세 개 이상 입력하여 표를 만들 수 있다.

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

|제목|별점|명대사|
|:---:|---:|---|
|타짜|⭐⭐⭐⭐⭐|"쏠 수 있습니다."|
|범죄와의 전쟁|⭐⭐⭐⭐⭐|"위축 되었습니까?"|
|내부자들|⭐⭐⭐⭐⭐|"몰디브에 가서 모히또를 드시겠습니까?"|

제목	별점	명대사
타짜	⭐⭐⭐⭐⭐	“쏠 수 있습니다.”
범죄와의 전쟁	⭐⭐⭐⭐⭐	“위축 되었습니까?”
내부자들	⭐⭐⭐⭐⭐	“몰디브에 가서 모히또를 드시겠습니까?”

줄바꿈

1️⃣ 줄바꿈을 하고 싶다면 문장 뒤에서 spacebar를 두 번 + Enter 입력합니다.

안녕하세요.  
조연어입니다.

안녕하세요.
조연어입니다.

2️⃣ <br>을 입력합니다.

안녕하세요. <br> 조연어입니다.

안녕하세요.
조연어입니다.

문단 나누기

한 줄의 공백을 입력하여 작성합니다.

안녕하세요.

조연어 입니다.

안녕하세요.

조연어 입니다.

들여쓰기

Tab 또는 spacebar 네 번 입력하여 하위 목록을 표시해 줄 수 있다.

- hi
  - hello
    - 안녕

• hi
  • hello
    • 안녕

마크다운 문법 표시

마크다운 키워드 앞에 \ (Back Slash) 를 붙여준다.

\<u>이렇게</u>

<u>이렇게</u>
밑줄 그어진 형태로 이렇게로 보일텐데 \ (Back Slash) 를 앞에 붙여주어 문법 그대로 <u>가 보여진다.

텍스트

강조

**볼드체**

볼드체

이탤릭체

*기울어진 텍스트*
***굵고 기울어진 텍스트***

기울어진 텍스트 굵고 기울어진 텍스트

취소선

~~취소 표시~~

취소 표시

밑줄

<u>텍스트에 밑줄</u>

텍스트에 밑줄

글씨 색

<span style="color:green"> 녹색입니다.</span>

녹색입니다.

적용

~~***<u>오예스</u>***~~

오예스

Link

텍스트에 링크 삽입

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

[Google](https://www.google.com)

Google

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

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

이미지에 링크 삽입

](이동하려는 링크 주소){:target=”_blank”}

텍스트와 이미지 어울림

html의 img 태그를 이용에서 align의 left 또는 right을 넣어, 이미지를 텍스트속에 배치 가능

<img align='right' width='150' height='100' src='이미지 주소'>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec diam erat. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam posuere libero diam, et egestas est convallis eget. Fusce hendrerit porta erat nec laoreet. Proin a mi mauris. Nullam semper dui ante, quis tincidunt ex posuere id. Donec vulputate, tellus ut fermentum fringilla, diam felis sagittis lacus, sit amet hendrerit urna odio quis quam. Nullam maximus eu ex a efficitur. Vestibulum porttitor lacus at velit tincidunt egestas. Vestibulum non sapien vel nulla euismod mollis quis et mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. In laoreet tincidunt felis non lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis vel rhoncus posuere. Cras in mi semper, pretium ante ut, congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec diam erat. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam posuere libero diam, et egestas est convallis eget. Fusce hendrerit porta erat nec laoreet. Proin a mi mauris. Nullam semper dui ante, quis tincidunt ex posuere id. Donec vulputate, tellus ut fermentum fringilla, diam felis sagittis lacus, sit amet hendrerit urna odio quis quam. Nullam maximus eu ex a efficitur. Vestibulum porttitor lacus at velit tincidunt egestas. Vestibulum non sapien vel nulla euismod mollis quis et mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. In laoreet tincidunt felis non lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis vel rhoncus posuere. Cras in mi semper, pretium ante ut, congue ligula.

유튜브 삽입

iframe 이용하기

<div class="iframe-container">
    <iframe src="유튜브 링크 주소" frameborder="0" allow="accelerometer;  
    autoplay;  
    clipboard-write;  
    encrypted-media;  
    gyroscope;  
    picture-in-picture" allowfullscreen>  
    </iframe>
</div>

인용문

> 로 표현할 수 있다.
>> 두개 쓰면 중첩된 인용문. 중첩시킬땐 앞에 spacebar 두 번 입력한다.

>  인용문입니다.
  >>  인용문 속 인용문입니다.

인용문입니다.

인용문 속 인용문입니다.

목차

Unordered list

- 가나다
  * 라마바
    + 사아자 
  * 차카타
- 파하하

• 가나다
  • 라마바
    • 사아자
  • 차카타
• 파하하

Ordered list

1. 가나다
2. 라마바  
   1. 사아자
      - 차
      - 카
   2. 타파
       - 하하
       - 하하하
3. 알겠쥬   

1. 가나다
2. 라마바
   1. 사아자
      • 차
      • 카
   2. 타파
      • 하하
      • 하하하
3. 알겠쥬

구분선

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

***
---

---

---

토글 (접기/펼치기)

마크다운에서는 지원하지 않으나 HTML의 details 태그로 사용 가능하다.
div markdown=”1” 은 jekyll에서 html사이에 Markdown을 인식 하기위해서 사용.

<details>
<summary>클릭</summary>
<div markdown="1">       

짜잔!

</div>
</details>

클릭(접기/펼치기)

짜잔!

맨 위로 가기 버튼

링크를 #로 설정하면 페이지 맨 위로 이동.

<a href="#" class="btn--primary">맨 위로</a>

맨 위로

Header

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

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

h1

h2

h3

h4

h5

h6

---

👨‍💻 개인 학습자료용 기록 블로그입니다. 오류나 틀린 부분에 대해서는 언제든지 댓글이나 메일로 알려주시면 즉시 수정토록 하겠습니다. 감사합니다.👨‍🔧

🔼TOP

이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.