마크 다운 작성법 (첫 글)

개발자입니당·2020년 9월 20일
1

Markdown 이란?

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

기본 문법

1. 제목

<h1>부터 <h6>까지 제목을 #의 개수로 표현 가능하다.

👉 마크 다운

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

👉 결과

h1

h2

h3

h4

h5
h6

2. 문단 간격

문단의 간격은 <br/> 또는 엔터키를 사용하여 표현 가능하다.

👉 마크 다운

첫번째 문단 입니다<br/><br/>
두번째 문단입니다.

👉 결과
첫번째 문단 입니다

두번째 문단입니다.

3. 목록

순서가 있는 목록과 순서가 없는 목록을 작성할 수 있다.

3.1 순서 있는 목록

숫자 + .을 사용하여 표현합니다.

👉 마크 다운

1. 첫번째
2. 두번째
3. 세번째

👉 결과
1. 첫번째
2. 두번째
3. 세번째

3.2 순서 없는 목록

-, *, +을 사용하여 작성한다. (셋 다 동일)
TABSPACE BAR를 사용하여 들여쓰기가 가능하다.

👉 마크 다운

- 순서 없는 목록 1
	- 목록 1.1
- 순서 없는 목록 2
	Tab 두번 후 엔터 클릭 => 코드 블록으로 변함
* 순서 없는 목록 3
+ 순서 없는 목록 4
	+ `인라인 코드`
    + 들여쓰기를 사용하면 다른 모양으로 표현 가능

👉 결과

  • 순서 없는 목록 1
    • 목록 1.1
  • 순서 없는 목록 2
      Tab 두번 후 엔터 클릭 => 코드 블록으로 변함
  • 순서 없는 목록 3
  • 순서 없는 목록 4
    + 인라인 코드
    • 들여쓰기를 사용하면 다른 모양으로 표현 가능

4. 코드 작성

한 줄 작성 인라인 코드와 여러 줄 작성인 코드 블럭이 있다.

4.1 인라인 코드

백틱(``)을 사용하여 표현한다.

👉 마크 다운

`inline code`

👉 결과
inline code

4.2 코드 블럭

~~~ 또는 ~~~을 첫 줄과 마지막 줄에 삽입하여 작성한다.

👉 마크 다운

``` 
이것은 코드입니다.
이것은 코드입니다.
이것은 코드입니다.
``` 

👉 결과

이것은 코드입니다.
이것은 코드입니다.
이것은 코드입니다.

5. 인용문

인용문을 작성할 때는 >를 사용합니다.

👉 마크 다운

> 인용문
- 출처

> 인용문
>> 인용문 중첩 가능

👉 결과

인용문

  • 출처

인용문

인용문 중첩 가능

6. 링크

인라인 링크, URL 링크로 나타낼 수 있다.

👉 마크 다운

inline link 
[link](url) 
ex. [google](https://www.google.com)

url link
<url/> 
ex. <https://www.google.com/>

👉 결과
inline link
ex. google

url link
https://www.google.com/

7. 수평선

*이나 -, -, _을 3개 이상 입력하면 HTML의 <hr/>과 같이 작성 가능하다.

👉 마크 다운

***
---
___

👉 결과




8. 폰트 관련 설정

Bold체, Italic체, 취소선 등 폰트 속성을 바꿀수 있다.

👉 마크 다운

__BOLD__
**BOLD**
_Italic_
*Italic*
***BOLD Italic***
~~취소선~~

👉 결과
BOLD
BOLD
Italic
Italic
BOLD Italic
취소선

9. 이미지

9.1 일반 이미지 삽입

![설명](이미지 링크)로 이미지 삽입이 가능하다.

👉 마크 다운

![google](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)

👉 결과

9.2 이미지 링크 삽입

[![설명](이미지링크)](이미지 링크 "링크 설명")로 이미지 코드를 링크 코드로 묶어서 사용한다.

👉 마크 다운

[![vue image](https://vuejs.org/images/logo.png)](https://kr.vuejs.org/ "vue 이미지")

👉 결과

profile
Studyingggg Front-End...

0개의 댓글