마크다운(MarkDown) 문법 정리

Hyeonsoo Lee·2024년 5월 22일

마크다운(MarkDown)이란?

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

마크다운(MarkDown)은 일반 텍스트 기반의 경량 마크업 언어이다.
문법이 간결하고 HTML삽입이 가능하다.
.md, .markdown의 확장자명을 가진다.
(* 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지)

#로 시작하는 텍스트.
1~6의 여섯개 단계로 지정 가능.
#이 늘어나면 제목의 스케일이 낮아짐.
H1은 =으로도 가능.
H2는 --으로도 가능.

❓ 사용법

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 4
###### Header 6

Header 1,과 2는 '#' 외에도 '=', '--' 기호도 사용 가능합니다.
Header 1
=
Header 2
--

✅ 결과

Header 1

Header 2

Header 3

Header 4

Header 6

Header 1,과 2는 # 외에도 =, -- 기호도 사용 가능합니다.

Header 1

Header 2

2. Emphasis 강조 (폰트)

글자의 굵기, 기울임, 취소선 등을 변경 가능합니다.
기울여 쓰기(italic) : * 또는 _로 감싼 텍스트.
두껍게 쓰기(bold) : ** 또는 __로 감싼 텍스트.
취소선 : ~~로 감싼 텍스트.
기울임과 볼드체를 같이 사용 가능.

❓ 사용법

*italic 입니다.*
_italic 입니다._
**bold 입니다.**
__bold 입니다.__
~~취소선 입니다.~~
*italic **bold** 함께 사용 가능.*

✅ 결과

italic 입니다.
italic 입니다.
bold 입니다.
bold 입니다.
~~취소선 입니다.~~
italic bold 함께 사용 가능.

3. Blockquotes 인용

>으로 시작하는 텍스트.
>는 3개까지 가능.(velog는 더 가능...?)
중첩해서 사용 가능.

❓ 사용법

> 헬로우
>> 중첩입니다.
>>> 중첩의 중첩입니다.
.
.
.

✅ 결과

헬로우

중첩입니다.

중첩의 중첩입니다.

4. Lists 목록

4-1. Unordered lists 순서가 없는 목록

*, +, -를 이용해서 순서없는 목록을 만들 수 있다.
들여쓰기를 하면 모양이 바뀐다.(스페이스 두번, 텝은 안먹힘)
<ul>태그

4-2. Ordered lists 순서가 있는 목록

숫자를 기입하면 순서가 있는 목록이 된다.
숫자에 상관없이 연속적으로 숫자가 표기된다.(ex. 125 -> 123)
들여쓰기를 하면 모양이 바뀐다.
<ol>태그

❓ 사용법

* 한식
- 중식
+ 양식
   - 파스타
     - 알리오 올리오
     + 까르보나라
   + 피자
  
1. 한식
	1. 김치
    	1. 총각김치
        2. 갓김치
        6. 배추김치
    2. 장아찌
    3. 찌개
2. 중식
4. 양식


1. 도형
   * 삼각형
   * 사각형
      + 사다리꼴
      - 마름모
2. 동물
   - 포유류
   - 파충류
      1. 도마뱀
      2. 거북이

✅ 결과

한식

중식

양식
- 파스타
  - 알리오 올리오
  - 까르보나라
- 피자

한식
1. 김치
  1. 총각김치
  2. 갓김치
  3. 배추김치
2. 장아찌
3. 찌개
중식
양식

도형
- 삼각형
- 사각형
  - 사다리꼴
  - 마름모
동물
- 포유류
- 파충류
  1. 도마뱀
  2. 거북이

5. Backslash Escapes

특수문자를 표현할 때, 표시될 문자 앞에 \를 넣고 특수문자를 쓰면 됩니다.
\ + #,_,*,[],{},<> 등등...

❓ 사용법

* 특수문자 출력안됨
- 특수문자 출력안됨

\* 특수문자 출력됨
\- 특수문자 출력됨

\*literal asterisks\*
\#hash mark\#
\[squre brackets\]

✅ 결과

특수문자 출력안됨

특수문자 출력안됨

* 특수문자 출력됨
- 특수문자 출력됨

*literal asterisks*
#hash mark#
[squre brackets]

6. 이미지

링크와 비슷하지만 앞에 !가 붙는다.
인라인 이미지 : ![텍스트](이미지파일경로)
링크 이미지 : ![텍스트](이미지파일URL)
이미지의 사이즈 변경을 위해서는 <img width="OOOpx" height="OOOpx"></img>와 같이 표현.
![텍스트](이미지파일경로 "이미지이름") : 이미지에 마우스를 올렸을때 나오는 이미지 이름을 지정해줄 수 있다.

❓ 사용법

<!-- 이미지파일 -->
![텍스](https://velog.velcdn.com/images/h_nso_o/post/30e82cb7-86c4-4dc3-9679-5b46a52fe09e/image.jpg "물총새")
<!-- 이미지URL -->
![텍스트](https://images.unsplash.com/photo-1715673558305-21709a9b2553?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D "나무나무나무나무")

✅ 결과

텍스트

7. Links (Anchor) 링크

7-1. External Links 외부 링크

인라인 링크 : [링크](http://example.com "링크 제목")
url 링크 : <example.com>, <example@example.com>;
- <>꺽쇠 괄호 없어도 자동으로 링크를 사용

❓ 사용법

[Google](http://www.google.com "구글")
[Naver](http://www.naver.com "네이버")
[Github](http://www.github.com "깃허브")
<!-- <꺽쇠 괄호  -->
구글 https://www.google.com
네이버 <https://www.naver.com>

✅ 결과

Google
Naver
Github

구글 https://www.google.com
네이버 https://www.naver.com

7-2. Internal Links 내부 링크

[보여지는 내용](#이동할 헤드의 제목)
괄호 안의 링크를 쓸 때는 띄어쓰기는 -로 연결
영어는 모두 소문자로 작성.
특수문자, 이모지는 생략하고 작성.

❓ 사용법

[1. 헤더(Header)](#1-헤더header)
[2. Emphasis 강조 (폰트)](#2-emphasis-강조-폰트)
[3. Blockquotes 인용](#3-blockquotes-인용)

✅ 결과

1. 헤더(Header)
2. Emphasis 강조 (폰트)
3. Blockquotes 인용

8. Fenced Code Blocks 코드 블럭

간단한 인라인 코드는 텍스트를 앞뒤로 `기호로 감싸면 된다.
``` 혹은 ~~~코드.
코드가 여러 줄인 경우, 줄 앞에 공백 네 칸을 추가하면 됩니다.
``` 옆에 언어를 지정해주면 syntax color가 적용됩니다.

❓ 사용법

```
This is code blocks.
```
~~~
This is code blocks.
~~~
	4 spaces
```javascript
function test() {
 console.log("look ma’, no spaces");
}
```

✅ 결과

This is code blocks.

This is code blocks.

4 spaces

function test() {
 console.log("look ma’, no spaces");
}

9. Task List 체크 리스트

줄 앞에 - [x]를 써서 완료된 리스트 표시.
줄 앞에 - [ ]를 써서 미완료된 리스트 표시.
체크 안에서 강조 외에 여러가지 기능 사용 가능

❓ 사용법

- [x] 체크된 박스입니다.
- [ ] 체크되지 않은 박스입니다.

- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported

✅ 결과

체크된 박스입니다.
체크되지 않은 박스입니다.
@mentions, #refs, links, formatting, and ~~tags~~ supported

10. Horizontal Rules 수평선

- 또는 * 또는 _ 을 3개 이상 작성.
단, -을 사용할 경우 header로 인식할 수 있으니 이 전 라인은 비워두어야 합니다.

❓ 사용법

* * *
***
*****
- - -
-------------------

✅ 결과

11. Table 테이블

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

❓ 사용법

테이블 생성

헤더1|헤더2|헤더3|헤더4
---|---|---|---
셀1|셀2|셀3|셀4
셀5|셀6|셀7|셀8
셀9|셀10|셀11|셀12

테이블 정렬

헤더1|헤더2|헤더3
:---|:---:|---:
Left|Center|Right
1|2|3
4|5|6
7|8|9

✅ 결과

테이블 생성

헤더1	헤더2	헤더3	헤더4
셀1	셀2	셀3	셀4
셀5	셀6	셀7	셀8
셀9	셀10	셀11	셀12

테이블 정렬

헤더1	헤더2	헤더3
Left	Center	Right
1	2	3
4	5	6
7	8	9

12. Line Breaks 줄바꿈

<br>를 활용해서 줄바꿈이 가능합니다.
(원래는 엔터를 두 번 해야 줄바꿈이지만 velog에서는 한 번만 해도 줄바꿈 되는듯.)

❓ 사용법

Su-su-su-supernova<br><br>사건은 다가와 ah, oh, ayy
거세게 커져가 ah, oh, ayy
질문은 계속돼 ah, oh, ayy<br>우린 어디서 왔나 oh, ayy

✅ 결과

Su-su-su-supernova

사건은 다가와 ah, oh, ayy
거세게 커져가 ah, oh, ayy
질문은 계속돼 ah, oh, ayy
우린 어디서 왔나 oh, ayy

✋🏻마치며

개발 공부 내용을 정리할 목적으로 velog를 시작합니다.
본격적인 시작에 앞서 Markdown 문법에 대해 정리해 보았습니다.
공부하면서 글을 작성하려고 하니 시간이 좀 걸렸지만, 정리해 놓으니 뿌듯하네요.
읽어주셔서 감사합니다.🙂

📚참고 자료

https://inpa.tistory.com/entry/MarkDown-%F0%9F%93%9A-%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%EB%AC%B8%EB%B2%95-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC

https://github.com/jinkyukim-me/markdown_ko?tab=readme-ov-file

https://velog.io/@joohe11/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%EB%AC%B8%EB%B2%95-%EB%AC%B8%EC%84%9C-%EB%82%B4%EB%B6%80-%EB%A7%81%ED%81%AC-%EB%84%A3%EA%B8%B0

Hyeonsoo Lee

매일 조금씩 성장해가자!

마크다운(MarkDown) 문법 정리

마크다운(MarkDown)이란?

1. 헤더(Header)

❓ 사용법

✅ 결과

Header 1

Header 2

Header 3

Header 4

Header 4

Header 6

Header 1

Header 2

2. Emphasis 강조 (폰트)

❓ 사용법

✅ 결과

3. Blockquotes 인용

❓ 사용법

✅ 결과

4. Lists 목록

4-1. Unordered lists 순서가 없는 목록

4-2. Ordered lists 순서가 있는 목록

❓ 사용법

✅ 결과

5. Backslash Escapes

❓ 사용법

✅ 결과

6. 이미지

❓ 사용법

✅ 결과

7. Links (Anchor) 링크

7-1. External Links 외부 링크

❓ 사용법

✅ 결과

7-2. Internal Links 내부 링크

❓ 사용법

✅ 결과

8. Fenced Code Blocks 코드 블럭

❓ 사용법

✅ 결과

9. Task List 체크 리스트

❓ 사용법

✅ 결과

10. Horizontal Rules 수평선

❓ 사용법

✅ 결과

11. Table 테이블

❓ 사용법

✅ 결과

12. Line Breaks 줄바꿈

❓ 사용법

✅ 결과

✋🏻마치며

📚참고 자료

0개의 댓글