Markdown이란?

Markdown은 텍스트 기반의 마크업 언어로, 특수 기호를 사용해 일반 텍스트로 서식이 있는 문서를 작성하는데 사용되며 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징입니다.

웹 개발을 하면서 아마 README.md라는 이름의 파일을 본 적이 있을 것입니다. 이 파일의 .md로 된 확장자가 바로 마크다운 문법으로 작성된 파일입니다.

마크다운의 장점

1. 문법이 쉽고 간결하다

2. 관리가 쉽다.

3. 자원 가능한 플랫폼과 프로그램이 다양하다.

마크다운의 단점

1. 표준이 없다.

2. 표준이 없기 때문에 도구에 따라 변환방식이나 생성되는 것이 다르다.

3. 모든 HTML 마크업을 대신하지 못한다.

---

마크다운 사용법(문법)

제목(header)

<h1> ~ <h6>까지 제목을 나타낼 수 있습니다.

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

제목 1

제목 2

제목 3

제목 4

제목 5

제목 6

문장(Paragraph)

특수기호없이 글씨를 작성하면 된다.

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세

줄바꿈(Line Breaks)

줄바꿈하고 싶은 곳에서 띄어쓰기 2번 또는 <br>태그를 붙여준다.

동해물과 백두산이 마르도록 닳도록••(띄어쓰기 표시로 • 두개를 나타냄)
하느님이 보우하사 우리나라 만세  
무궁화 삼천리 화려 강산<br/>대한 사람 대한으로 길이 보전하세

동해물과 백두산이 마르도록 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세

강조(Emphasis)

<em>, <strong>, <del> 태그로 변환됩니다.

밑줄은 태그를 사용하면 됩니다.

_이텔릭_ or *이텔릭*
**두껍께** or __두껍게__
**_이텔릭 + 두껍게_** or ***이텔릭 + 두껍게***
~~취소선~~  
<u>밑줄</u>

이텔릭 or 이텔릭
두껍께 or 두껍게
이텔릭 + 두껍게 or 이텔릭 + 두껍게
취소선
밑줄

목록(List)

<ol>, <ul> 목록 태그로 변환됩니다.

순서가 필요한 목록의 경우 1.만 입력해도 1. 2. 3. 순서대로 나타난다.

순서가 필요한 목록

1. 순서가 필요한 목록
1. 순서가 필요한 목록
    1. 순서가 필요한 목록(서브)
    2. 순서가 필요한 목록(서브)
1. 순서가 필요한 목록
	1. 순서가 필요한 목록(서브)
    	1. 순서가 필요한 목록(서브)
    	1. 순서가 필요한 목록(서브)
    2. 순서가 필요한 목록(서브)

순서가 필요한 목록

1. 순서가 필요한 목록
2. 순서가 필요한 목록
   1. 순서가 필요한 목록(서브)
   2. 순서가 필요한 목록(서브)
3. 순서가 필요한 목록
   1. 순서가 필요한 목록(서브)
      1. 순서가 필요한 목록(서브)
      2. 순서가 필요한 목록(서브)
   2. 순서가 필요한 목록(서브)

순서가 필요없는 목록

순서가 필요하지 않은 목록에 사용 가능한 기호

- 대쉬(hyphen)
* 별표, 에스터리스크(asterisks)
+ 더하기(plus sign)

- 빨강
  - 녹색
    - 파랑

* 빨강
  * 녹색
    * 파랑

+ 빨강
  + 녹색
    + 파랑
   
혼합해서 사용 가능하다.

* 빨강
  - 녹색
    + 파랑

순서가 필요하지 않은 목록에 사용 가능한 기호

• 대쉬(hyphen)

• 별표, 에스터리스크(asterisks)

• 더하기(plus sign)

• 빨강
  • 녹색
    • 파랑

• 빨강
  • 녹색
    • 파랑

• 빨강
  • 녹색
    • 파랑

혼합해서 사용 가능하다.

• 빨강
  • 녹색
    • 파랑

링크(Links)

참조 링크

[내용][아이디]
[아이디]: 링크 주소

문서 안에서 [참조 링크]를 그대로 사용할 수 있습니다.
[참조 링크]: https://naver.com  "Naver로 이동!"

Google

문서 안에서 참조 링크를 그대로 사용할 수 있습니다.

외부 링크

[내용](링크)

[내용](링크 "타이틀 내용")

Google

Naver

자동 연결

문서 내 일반 URL이나 꺾쇠 괄호(< >, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.

구글 홈페이지: https://google.com

네이버 홈페이지: <https://naver.com>

구글 홈페이지: https://google.com

네이버 홈페이지: https://naver.com

이미지(Images)

<img>로 변환됩니다.
링크와 비슷하지만 앞에 !가 붙습니다.

![대체 텍스트](이미지링크)

![대체 텍스트][아이디]
[아이디]: 링크 "링크 설명"

이미지에 링크

[![대체 텍스트](이미지링크)](링크 "링크 설명")

구글 사이트:

인용문(BlockQuote)

<blockquote>태그로 변환됩니다.

>를 사용

> 남의 말이나 글에서 직접 또는 간접으로 따온 문장.  
> (네이버 국어사전)

남의 말이나 글에서 직접 또는 간접으로 따온 문장.
(네이버 국어사전)

중첩 가능

> 인용문을 작성하세요!
>> 중첩된 인용문
>>> 중첩된 인용문 1  
>>> 중첩된 인용문 2  
>>> 중첩된 인용문 3

인용문을 작성하세요!

중첩된 인용문

중첩된 인용문 1
중첩된 인용문 2
중첩된 인용문 3

인라인(inline) 코드 강조

• `` 사용

CSS에서 background 혹은 background-image 속성으로 요소에 배경 이미지를 삽입할 수 있습니다.

블록(block) 코드 강조

백틱 3개(```)를 위 아래로 코드를 감싼다.

맨 위 백틱 오른쪽에 나타낼 언어를 적어준다.

• 개발 언어를 사용하는 블록 코드 강조가 아니라면 plaintext를 적어준다.

    ```html
    <a href="https://google.co.kr/" target="_blank">GOOGLE</a>
    ```

    ```css
    .list > li {
      position: absolute;
      top: 40px;
    }
    ```

    ```javascript
    function func() {
      let a = 'AAA';
      return a;
    }
    ```

    ```bash
    $ git commit -m 'Study Markdown'
    ```

    ```plaintext
    동해물과 백두산이 마르고 닳도록  
    하느님이 보우하사 우리나라 만세
    ```

<a href="https://google.co.kr/" target="_blank">GOOGLE</a>

.list > li {
  position: absolute;
  top: 40px;
}

function func() {
  let a = 'AAA';
  return a;
}

$ git commit -m 'Study Markdown'

동해물과 백두산이 마르고 닳도록  
하느님이 보우하사 우리나라 만세

표(Table)

<table> 태그로 변환됩니다.

• 행을 버티컬 바(|) 로 구분
• |--|--|--|로 표의 머리와 몸통부분을 나눔
• 가장 왼쪽, 오른쪽 |(vertical bar) 기호는 생략 가능합니다.
• 콜론(:)의 위치에 따라 정렬 기준이 달라진다.
  • 기본은 왼쪽 정렬
  • |:--:| : 가운데 정렬
  • |--:| : 오른쪽 정렬
• 복잡한 구조의 표는 마크다운으로 만들 수 없습니다.

position 속성

| 값 | 의미 | 기본값 |
|--|:--:|--:|
| static | 기준 없음 | O |
| relative | 요소 자신 | X |
| absolute | 위치 상 부모 요소 | X |
| fixed | 뷰포트 | X |

position 속성

값	의미	기본값
static	기준 없음	O
relative	요소 자신	X
absolute	위치 상 부모 요소	X
fixed	뷰포트	X

원시 HTML(Raw HTML)

마크다운 문법이 아닌 원시 HTML 문법을 사용할 수 있습니다.

마크다운에서 지원하지 않는 기능을 사용할 때 유용합니다.

동해물과 <span style="text-decoration: underline;">백두산</span>이 마르고 닳도록<br>
<u>하느님</u>이 보우하사 우리나라 만세

<a href="https://naver.com" title="네이버로 이동!" target="_blank">NAVER</a>

<img width="100" src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="google">

동해물과 백두산이 마르고 닳도록

하느님이 보우하사 우리나라 만세

NAVER

수평선(Horizontal Rule)

-, *, _ 각 기호를 3개 이상 입력하면 됩니다.

--- 
(Hyphen)

*** 
(Asterisks)

___ 
(Underscores)

1. --- (Hyphen)

---

2. *** (Asterisks)

---

3. ___ (Underscores)

---