마크다운 사용법

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

많이 들어봤지만 들어만 본 마크다운...! 이모티콘 쓰는거 좋아해서 기본모드로 글 쓰곤 했는데 179번 훈련병이 마크다운으로 글 쓰는 연습 해보라고 한다..! 얘 말은 들어야지 음음!

(이모티콘 못쓰는건 조금 사고네)

마크다운(MarkDown)은 파일 확장자가 .md로 된 파일이다...라던가 이런 내용은 굳이 필요 없을 것 같다!

html을 사용해 페이지를 구성하는 대신 쉽고 빠르게 작성하는 용도로 사용된다고 한다!

이것도 문법을 쉽게 정리해 놓은 플랫폼이 있다고 한다.

StackEdit 이라는데 일단 문법을 알아야 뭘 쓰든 말든 하지 않을까?

그래서 일단 문법을 좀 정리해보고 시작하려고 한다!

제목(Header)

<h1>부터 <h6>까지 나타낼 수 있음

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

제목 1

제목 2

제목 3

제목 4

제목 5

제목 6

강조(Emphasis)

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

이텔릭체는 *별표(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)

링크(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."

이미지에 링크

마크다운 이미지 코드를 링크 코드로 묶어 줍니다.

[![Vue](/images/vue.png)](https://kr.vuejs.org/)

코드(Code) 강조

<pre>, <code>로 변환됩니다.
백틱 키로 사용!

인라인 코드 강조

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

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

블록(block) 코드 강조

```html
<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.

```html
<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)

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

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

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

인용문

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

인용문(blockQuote)

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

BREAK!

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

인용문(blockQuote)

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

BREAK!

인용문을 작성하세요!

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

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

수평선

---
(Hyphens)

***
(Asterisks)

___
(Underscores)

--- (Hyphens)

---

(Asterisks)

---

(Underscores)

줄바꿈

동해물과 백두산이  
마르고 닳도록  
하느님이 보우하사  <!--띄어쓰기 2번-->
우리나라 만세<br>
대한사람 대한으로..  

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

우리나라 만세
대한사람 대한으로..

안이쁘다. 마음에 안든다... 익숙해져야 하는 친구지만... 글 쓸때는... 그냥 기본모드로...쓰고싶...다...

대충 우는 이모티콘