Orchemi

Orchemi

I start where others stop.

[Blog] Markdown 문법 총정리

작성:    

업데이트:

카테고리:

태그: , , , ,

마크다운이란?

  • 텍스트 기반의 경량 마크업(markup) 언어
  • markup을 좀더 쉽고 간단하게 사용하기 위해 만들어짐
  • .md 확장자를 가지는 파일을 작성


Heading

글의 제목을 설정한다. 이를 Heading이라고 한다.


<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>

[결과]

제목 1

제목 2

제목 3

제목 4

제목 5
제목 6


html은 위와 같이 표시하면 각 제목이 나오는데, markdown은 아래처럼 heading을 하면 된다.

# 제목 1

## 제목 2

### 제목 3

#### 제목 4

##### 제목 5

###### 제목 6


[결과]

제목 1

제목 2

제목 3

제목 4

제목 5
제목 6


minimal-mistakes에서는 heading의 sass 속성을 따로 설정하기 때문에 이 블로그에서는 브라우저에서 지원하는 기본 HTML에서의 폰트 사이즈나 색상, 구분선 등과 조금 달라보일 수 있다.


목록

Style 1. -, +, * 사용

  • VSC의 기본 정렬 때문에 자꾸 바뀌지만, 위의 3가지 모두 사용해도 된다.
  • 혼용 해도 된다.
  • tab을 이용해 하위 목록을 구분한다.


- 목록 1

  - 목록 1.1
  - 목록 1.2
  - 목록 1.3

- 목록 2
  - 목록 2.1
  - 목록 2.2
  - 목록 2.3

* 목록 3
  - 목록 3.1
  - 목록 3.2
  - 목록 3.3


[결과]

  • 목록 1

    • 목록 1.1

    • 목록 1.2

    • 목록 1.3

  • 목록 2
    • 목록 2.1
    • 목록 2.2
    • 목록 2.3
  • 목록 3
    • 목록 3.1
    • 목록 3.2
    • 목록 3.3


style 2. 숫자 사용

숫자를 쓸 수도 있다.

1. 목록 1
2. 목록 2
3. 목록 3


[결과]

  1. 목록 1
  2. 목록 2
  3. 목록 3

주의📣 1. 2. 등 숫자로 목록을 지정하는 경우 ‘enter’로 행이 띄워지면 다시 1로 시작한다.


문장 꾸미기

_기울인 문장_
**굵은 문장**
**_기울인 굵은 문장_**
~~취소선~~


[결과]
기울인 문장
굵은 문장
기울인 굵은 문장
취소선


강조 및 코드 표시하기

Inline

  • 물결표시 아래에 있는 ‘`‘로 감싸주어 사용한다.
  • inline display여서 문장 사이에 써도 된다.
- 이렇게 `중요한 내용`을 강조할 때 쓰거나
- `print("hello world")`등의 코드를 표시할 때 쓴다.


[결과]

  • 이렇게 중요한 내용을 강조할 때 쓰거나
  • print("hello world")등의 코드를 표시할 때 쓴다.


Block

  • 역시 물결 표시 아래의 ‘`‘를 사용한다. Block은 3번 반복해 입력한다.
  • ’```‘으로 감싸서 원하는 내용을 넣는다.
  • 블럭의 시작 옆에 원하는 언어(ex. python)를 적으면 해당 언어의 표시 형식으로 하이라이팅이 된다.
  • 아래처럼 웹에서 Block 기호 자체를 표시하고 싶다면 ‘````’ 으로 내용을 감싸면 된다.


```python
a = 'hello world'
print(a)
```


[결과]

a = 'hello world'
print(a)


링크

단순 url 링크

<https://google.com>

[결과] https://google.com


url 숨기고 원하는 문장/단어로 표시

[구글로 이동](https://google.com)

[결과] 구글로 이동


이미지 삽입

예시로 git의 로고를 삽입해보자.

> 간단한 이미지 코드
> ![Git로고](https://git-scm.com/images/logo@2x.png)

> 크기 조절이 가능한 이미지 코드
> <img src="https://git-scm.com/images/logo@2x.png" alt="Git로고" width="50%" height="50%"/>

> 크기 조절과 위치까지 지정하는 이미지 코드

     <p align="center">
        <img src="https://git-scm.com/images/logo@2x.png" alt="Git로고" width="50%" height="50%"/>
     </p>


[결과]

간단한 이미지 코드

Git로고


크기 조절이 가능한 이미지 코드

Git로고


크기 조절과 위치까지 지정하는 이미지 코드

Git로고


인용문 작성

> 표시를 통해 작성한다.


> 인용문 1
>> 인용문 1의 인용문 2
>>> 인용문 1의 인용문 2의 인용문3


[결과]

인용문 1

인용문 1의 인용문 2

인용문 1의 인용문 2의 인용문3


표 작성

  • |와 |---|로 구분해서 만들면 된다.
  • VSC의 자동 편집으로 -의 개수가 많아졌지만, 3개만 있어도 된다.
  • 정렬 방법
    • |:---| : 좌측 정렬
    • |---:| : 우측 정렬
    • |:---:| : 중앙 정렬


| 동물   | 종류   | 다리개수 |
| ------ | ------ | -------- |
| 사자   | 포유류 | 4개      |
| 고등어 | 어류   | 0개      |

| 동물   |  종류  | 다리개수 |
| :----- | :----: | -------: |
| 사자   | 포유류 |      4개 |
| 고등어 |  어류  |      0개 |

[결과]

동물 종류 다리개수
사자 포유류 4개
고등어 어류 0개


동물 종류 다리개수
사자 포유류 4개
고등어 어류 0개


주석

  • <!-- --> 을 이용한다. HTML에서 주석 처리하는 방식이다.
  • 여러 행을 주석 처리할 수도 있다.
<!-- 주석 처리할 내용 -->

<!--
주석 처리할 내용들
주석 처리할 내용들
주석 처리할 내용들
주석 처리할 내용들
-->

주석 처리 안 할 내용


[결과]

주석 처리 안 할 내용


기타

행간 띄우기 : <br>

원하는대로 줄 간격을 설정할 수 있다.


안녕하세요
<br>
<br>
안녕하세요


[결과]

안녕하세요

안녕하세요


줄 바꾸기 : ‘ ‘ * 2

  • 줄바꿈을 원하는 문장 끝에서 space를 2번 누른다.
  • markdown은 enter 한 번은 줄바꿈으로 처리하지 않는다.
  • enter 두번은 행간격이 생기기 때문에 행을 내리면서 띄우지는 않는 상황에서 사용한다.
줄바꿈을' '' '
하자!


[결과]

줄바꿈을
하자!


가로선

  • <hr>
  • ---


참고자료

  1. 이응빈 님의 Github page

  2. SW Developer 님의 Github page

  3. 차곡차곡창고

댓글남기기

참고