마크다운(MarkDown) 작성법

sk97kang·2020년 8월 10일
Markdown마크다운
0

기초

목록 보기
1/1

MarkDown이란?

마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.
출처 : 위키백과

MarkDown특징

확장자

.md

MarkDown 장점

  1. 문법이 쉽다.
  2. 관리가 쉽다.
  3. 지원 가능한 플랫폼과 프로그램이 다양하다.

MarkDown 단점

  1. 표준이 없어 사용자마다 문법이 상이할 수 있다.
  2. 모든 HTML 마크업을 대신하지 못한다.

MarkDown 문법(Syntax)


1. 제목(Header)

h1 ~ h6까지 표현할 수 있다.

1.1. #을 이용한 방법

  • 마크다운 작성 시
# h1
## h2
### h3
#### h4
#### h5
##### h6
  • 결과

h1

h2

h3

h4

h5
h6

1.2. =, -을 이용한 방법

  • 마크다운 작성 시
h1
==
h2
--
하이픈을 여러 개 사용한 제목
-----
  • 결과

h1

h2

하이픈을 여러 개 사용한 제목


2. 문단 간격

2.1. Enter를 이용한 방법

Enter를 이용하여 문단을 구분할 수 있다.

  • 마크다운 작성 시
첫 번째 문단

두 번째 문단
  • 결과

첫 번째 문단

두 번째 문단

2.2. <br/>을 이용한 방법

여러 번 줄 바꿈 시 `
을 사용하면 가능하다.

  • 마크다운 작성 시
첫 번째 문단<br/><br/>
두 번째 문단
  • 결과

첫 번째 문단


두 번째 문단


3. 목록(List)

순서가 있는/없는 목록 두 가지를 작성할 수 있다.

3.1 순서가 있는 목록(번호)

숫자와 .을 사용하여 작성한다.

  • 마크다운 작성 시
1. 첫 번째
2. 두 번째
3. 세 번째
  • 결과
  1. 첫 번째
  2. 두 번째
  3. 세 번째

3.2 순서가 없는 목록(글머리 기호)

-, *, + 중 하나를 사용하여 작성한다.(셋 다 동일하게 표현된다.)
인라인 코드, 블럭 코드를 작성할 수 있으며 Tab키나 Spacebar를 이용해 들여쓰기가 가능하다.

  • 마크다운 작성 시
- 순서가 필요하지 않은 목록에 사용 가능한 기호
  - 대쉬(hyphen)
  * 별표(asterisks)
  + 더하기(plus sign)

  • 결과

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

    • 대쉬(hyphen)
    • 별표(asterisks)
    • 더하기(plus sign)

4. 폰트 스타일

굵게, 기울이기, 취소선 등 기본적인 스타일을 적용할 수 있다.

  • 마크다운 작성 시
__굵게__
**굵게**
_기울여 쓰기_
*기울여 쓰기*
~취소선~
~~취소선~~
  • 결과

굵게
굵게
기울여 쓰기
기울여 쓰기
~취소선~
~~취소선~~


5. 인용문

>을 이용하여 인용문을 작성할 수 있다.

  • 마크다운 작성 시
> 인용문 작성하기
-작성자

> 인용문 작성하기
>> `>`의 갯수에 따라
>>> 중첩문 가능
  • 결과

인용문 작성하기
-작성자

인용문 작성하기

>의 갯수에 따라

중첩문 가능


6. 인라인 코드

백틱()`을 사용하여 인라인 코드를 작성할 수 있다.

  • 마크다운 작성 시
`인라인 코드는 이렇게 작성한다.`
  • 결과

인라인 코드는 이렇게 작성한다.


7. 코드 블럭

백틱(`), ~ 세 개를 사용하여 코드 블럭을 작성할 수 있다.

  • 마크다운 작성 시
```
위 아래 3개로 감싸면 블럭으로 만들 수 있다.
블럭으로 작성하면 여러 줄을 작성할 수 있다.
```
~~~
위 아래 3개로 감싸면 블럭으로 만들 수 있다.
블럭으로 작성하면 여러 줄을 작성할 수 있다.
~~~
  • 결과
위 아래 3개로 감싸면 블럭으로 만들 수 있다.
블럭으로 작성하면 여러 줄을 작성할 수 있다.
위 아래 3개로 감싸면 블럭으로 만들 수 있다.
블럭으로 작성하면 여러 줄을 작성할 수 있다.

코드 하이라이트

  • 마크다운 작성 시
```아래와 같이 백틱 3개 뒤에 언어 이름을 넣어주세요.

```javascript
let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);
```　

```python
num_list = ['one', 'two', 'three']
for num in num_list:
  print(num)
```　

  • 결과

let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);
```　

```python
num_list = ['one', 'two', 'three']
for num in num_list:
  print(num)

인라인 링크와 Url 링크, 참조 링크로 표현할 수 있다.

  • 마크다운 작성 시
[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


9. 수평선(Horizontal Line)

*, -, _ 등을 3개 이상 사용하여 작성할 수 있다.
띄어쓰기를 중간에 삽입하여도 가능하다.
다만, 하이픈-은 헤더로 인식할 수도 있으니 주의해서 사용할 필요가 있다.

  • 마크다운 작성 시
---
(Hyphens)

***
(Asterisks)

___
(Underscores)
  • 결과

(Hyphens)

(Asterisks)

(Underscores)


10. 이미지(Image)

이미지를 표현할 수 있다.

  • 마크다운 작성 시
![이미지 설명](이미지 링크)

![고양이애옹](https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg)
  • 결과

이미지에 링크 걸기

  • 마크다운 작성 시
[![이미지 설명](이미지 링크)](연결하고자하는 url "마우스 오버 시 나타낼 링크 title")

[![고양이애옹](https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg)](https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg)
  • 결과

사이즈 조절

사이즈 조절 기능은 없기 때문에 img 태그를 사용하여 조절할 수 있다.

  • 마크다운 작성 시
<img src="https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg" width="450px" height="300px" title="고양이" alt="고양이"/>
<img src="https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg" width="40%" height="30%" title="고양이" alt="고양이"/>
  • 결과

11. 테이블(Table)

테이블은 |로 구분하며, 폰트 스타일을 적용할 수 있다.
또한, -으로 구분된 곳 각각 왼쪽, 양쪽, 오른쪽에 :을 붙일 경우 순서대로 왼쪽정렬, 가운데 정렬, 오른쪽 정렬이 가능하다.
헤더 셀을 구분할 때 3개 이상의 - 기호가 필요하다.

  • 마크다운 작성 시
| 제목 | 제목 | 제목 |
|:---|:---:|---:|
| **제목** | 제목 | ~~제목~~ |
| 제목 | 제목 | 제목 |
| 제목 | 제목 | 제목 |
  • 결과

| 제목 | 제목 | 제목 |
|:---|:---:|---:|
| 제목 | 제목 | ~~제목~~ |
| 제목 | 제목 | 제목 |
| 제목 | 제목 | 제목 |


12. 체크박스(Check Box)

-, *, + 뒤에 띄어쓰기 후 [ ](대괄호)를 넣어 작성할 수 있다. 대괄호안에 띄어쓰기를 하면 빈 체크박스, x를 넣으면 체크된 체크박스가 생긴다.

  • 마크다운 작성 시
- [ ] 운동 하기
- [x] 강의 듣기

  • 결과

  • [ ] 운동 하기

  • [x] 강의 듣기


13. 이모지

이모지를 사용할 수 있다.
😀👨🎈🍕🚓❤

유용한 사이트

  • [트위터 이모지] (https://kr.piliapp.com/twitter-symbols/)

단축키

  • Window : 윈도우 키 + 마침표(.)
  • Mac : Command + Control + Spacebar

14. 글자 색상

Html 태그를 이용하여 작성한다.

  • 마크다운 작성 시
<span style="color:red">red</span>
<span style="color:#d3d3d3">#d3d3d3</span>
<span style="color:rgb(245, 235, 13)">rgb(245, 235, 13)</span>
  • 결과

red
#d3d3d3
rgb(245, 235, 13)


참고

profile
Kan
주니어 개발자 Kan

0개의 댓글