Markdown 문법

By | 2020년 3월 28일
0 Comment
Table of Contents

Markdown 문법

출처 : https://heropy.blog/2017/09/30/markdown/

제목(Header)

<h1> 부터 <h6> 까지 제목을 표현할 수 있습니다.

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

제목 1

제목 2

제목 3

제목 4

제목 5
제목 6

수평선

*, - 을 세개 이상 입력하면 수평선을 표시합니다.

수평선 1
***

수평선 2
---

수평선 1

수평선 2

강조(Emphasis)

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

밑줄을 입력하고 싶다면 <u></u> 태그를 사용하세요.

이텔릭체는 *별표(asterisks)* 혹은 _언더바(underscore)_ 를 사용하세요.
두껍게는 **별표(asterisks)** 혹은 __언더바(underscore)__ 를 사용하세요.
**_이텔릭체와 두껍게_** 를 같이 사용할 수 있습니다.
취소선은 ~~물결표시(tilde)~~ 를 사용하세요.
<u>밑줄</u> 은 `<u></u>` 를 사용하세요.

이텔릭체는 별표(asterisks) 혹은 언더바(underscore) 를 사용하세요.
두껍게는 별표(asterisks) 혹은 언더바(underscore) 를 사용하세요.
이텔릭체와 두껍게 를 같이 사용할 수 있습니다.
취소선은 물결표시(tilde) 를 사용하세요.
밑줄 은 <u></u> 를 사용하세요.

문장 중간에 사용할 경우에, _붙여쓰기_를 하면 작동하지 않는 경우가 있습니다.

띄어쓰기 를 사용하는 것이 좋습니다.

목록(List)

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

1. 순서가 필요한 목록
1. 순서가 필요한 목록
 - 순서가 필요하지 않은 목록(서브)
 - 순서가 필요하지 않은 목록(서브)
1. 순서가 필요한 목록
 1. 순서가 필요한 목록(서브)
 1. 순서가 필요한 목록(서브)
1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록에 사용 가능한 기호
 - 대쉬(hyphen)
 * 별표(asterisks)
 + 더하기(plus sign)
  1. 순서가 필요한 목록
  2. 순서가 필요한 목록
    • 순서가 필요하지 않은 목록(서브)
    • 순서가 필요하지 않은 목록(서브)
  3. 순서가 필요한 목록
    1. 순서가 필요한 목록(서브)
    2. 순서가 필요한 목록(서브)
  4. 순서가 필요한 목록
  • 순서가 필요하지 않은 목록에 사용 가능한 기호
    • 대쉬(hyphen)
    • 별표(asterisks)
    • 더하기(plus sign)

들여쓰기

들여쓰기를 하면 하위 목록을 생성합니다.

- 하나
    + 빨강
        * 삼각형
        * 사각형
    + 노랑
- 둘
    - One
    - Two
- 셋
  • 하나
    • 빨강
      • 삼각형
      • 사각형
    • 노랑
  • 둘
    • One
    • Two
  • 셋

링크(Links)

<a> 로 변환됩니다.

[GOOGLE](https://google.com)

[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")

[상대적 참조](../users/login)

[Dribbble][Dribbble link]

[GitHub][1]

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

다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(`< >`, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: <https://naver.com>

[Dribbble link]: https://dribbble.com
[1]: https://github.com
[참조 링크]: https://naver.com "네이버로 이동합니다!"

GOOGLE

NAVER

상대적 참조

Dribbble

GitHub

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

다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(< >, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.
구글 홈페이지: https://google.com
네이버 홈페이지: https://naver.com

이미지(Images)

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

![대체 텍스트(alternative text)를 입력하세요!](http://www.gstatic.com/webp/gallery/5.jpg "링크 설명(title)을 작성하세요.")

![Kayak][logo]

[logo]: http://www.gstatic.com/webp/gallery/2.jpg "To go kayaking."

대체 텍스트(alternative text)를 입력하세요!

Kayak

이미지에 링크

[![Vue](https://media.vlpt.us/post-images/ashnamuh/9eb2a080-09a2-11ea-8df4-d3fbfc39005c/vuegitlab.png)](https://kr.vuejs.org/)

Vue

코드 블록

4개의 공백문자 또는 하나의 탭문자를 이용해 코드 블록을 생성할 수 있습니다.

This is a normal paragraph:

 This is a code block.

end code block.

This is a normal paragraph:

This is a code block.

end code block.

코드(Code) 강조

<pre>, <code> 로 변환됩니다.
숫자 1번 키 왼쪽에 있는 ` (Grave)를 입력하세요.

인라인(inline) 코드 강조

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

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

블록(block) 코드 강조

` 를 3번 이상 입력하고 코드 종류도 적습니다.

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

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

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

```bash
$ vim ./~zshrc
```

```python
s = "Python syntax highlighting"
print s
```

```
No language indicated, so no syntax highlighting. 
But let's throw in a tag.
```

<a href="https://www.google.co.kr/" target="_blank">GOOGLE</a>
.list > li {
  position: absolute;
  top: 40px;
}
function func() {
  var a = 'AAA';
  return a;
}
$ vim ./~zshrc
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting. 
But let's throw in a tag.

표(Table)

<table> 태그로 변환됩니다.
헤더 셀을 구분할 때 3개 이상의 - (hyphen/dash) 기호가 필요합니다.
헤더 셀을 구분하면서 : (Colons) 기호로 셀(열/칸) 안에 내용을 정렬할 수 있습니다.
가장 좌측과 가장 우측에 있는 | (vertical bar) 기호는 생략 가능합니다.

| 값 | 의미 | 기본값 |
|---|:---:|---:|
| `static` | 유형(기준) 없음 / 배치 불가능 | `static` |
| `relative` | 요소 자신을 기준으로 배치 |  |
| `absolute` | 위치 상 부모(조상)요소를 기준으로 배치 |  |
| `fixed` | 브라우저 창을 기준으로 배치 |  |
값 의미 기본값
static 유형(기준) 없음 / 배치 불가능 static
relative 요소 자신을 기준으로 배치
absolute 위치 상 부모(조상)요소를 기준으로 배치
fixed 브라우저 창을 기준으로 배치

인용문(BlockQuote)

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

> 인용문을 작성하세요!
>   > 중첩된 인용문(nested blockquote)을 만들 수 있습니다.
>   >   > 중중첩된 인용문 1
>   >   > 중중첩된 인용문 2
>   >   > 중중첩된 인용문 3

인용문을 작성하세요!

중첩된 인용문(nested blockquote)을 만들 수 있습니다.

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

Post Views: 1,066

답글 남기기