마크다운 문법 정리

sanbondeveloper·2022년 9월 1일
0

기록

목록 보기
1/3
post-custom-banner

마크다운 (MarkDown)

마크다운은 일반 텍스트 기반의 경량 마크업 언어이다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다.

깃허브의 README 파일, 마크다운을 지원하는 블로그 서비스 등에서 사용 가능하다. 다만, 플랫폼마다 약간의 문법적인 차이가 있을 수 있다.

🔎제목 작성하기


<h1>부터 <h6> 까지 표현할 수 있다.

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

🔎글자 스타일


🎯강조

**텍스트 강조하기**

텍스트 강조하기

🎯기울임

*텍스트 기울이기*
*** 텍스트 강조하고 기울이기***

텍스트 기울이기
텍스트 강조하고 기울이기

🎯취소선

~~텍스트 취소선~~

텍스트 취소선

🎯밑줄

<u>텍스트 밑줄</u>

텍스트 밑줄

🎯글자 크기 및 색상

<span style="font-size: 12px; color: green">크기는 12px이고 색상은 초록색인 텍스트</span>

크기는 12px이고 색상은 초록색인 텍스트


🔎줄바꿈


마크다운에서 줄바꿈하는 방법에는 2가지가 있다.

1. 문장 뒤에 스페이스바를 2번 + Enter 를 입력한다.

줄바꿈을 <!-- 스페이스바 2번 -->  
해봅시다.

2. HTML 줄바꿈 태그인 <br> 태그 를 사용한다.

줄바꿈을 <br> 해봅시다.

🔎구분선


***
---
둘 중 아무거나 사용하자



🔎기호 출력


마크다운에서 약속되어 있는 기호를 그대로 출력하려면 역방향 슬래시을 앞에 같이 작성해주면 된다.

\\
\*
\+
\-
  • \

  • *

  • +

  • -


🔎리스트


순서가 없는 리스트는 * + - 중 아무 기호를 사용하여 작성한다.

* 리스트 1
+ 리스트 2
- 리스트 3
  • 리스트 1
  • 리스트 2
  • 리스트 3

순서가 있는 리스트는 숫자를 사용하여 작성한다.

1. 리스트 1
2. 리스트 2
3. 리스트 3
4. 리스트 4
  1. 리스트 1
  2. 리스트 2
  3. 리스트 3
  4. 리스트 4

중첩 리스트 작성하기

1. 리스트 1
	- 리스트 1-1
2. 리스트 2
	1. 리스트 2-1
    - 리스트 2-2
3. 리스트 3
 <!-- 스페이스바 --> 리스트3의 내용입니다.
  1. 리스트 1
    • 리스트 1-1
  2. 리스트 2
    1. 리스트 2-1
    • 리스트 2-2
  3. 리스트 3
    리스트3의 내용입니다.

🔎인용문


> 기호를 통해 인용문을 작성할 수 있다. 중첩 인용문 작성 시 >의 개수를 1개 씩 늘려가며 작성한다.

> 인용문 작성
  >> 중첩 인용문 작성
    >>> 중첩 인용문 작성

인용문 작성

중첩 인용문 작성

중첩 인용문 작성


🔎코드 블록


🎯인라인 코드 블록

`인라인 코드 블록` 작성하기

인라인 코드 블록 작성하기

🎯코드 블록

```언어 이름(소문자, ex. jsx)
코드 입력...
```
console.log('Hello World!')

언어 이름을 적어주면 하이라이팅 효과를 받을 수 있다.


🔎링크 삽입


🎯링크

<https://www.naver.com/>

https://www.naver.com/

🎯인라인 링크

[네이버로 이동하기](https://www.naver.com/)

네이버로 이동하기

🎯참조 링크

[naver]:https://www.naver.com/

[naver] 이 부분에서 위의 링크를 참조한다.

naver


🔎이미지 삽입


🎯일반 이미지

![대체 텍스트](이미지 링크)

![image](https://via.placeholder.com/150)

image

🎯설명 추가

![대체 텍스트](이미지 링크 '이미지 설명 문구')

![image](https://via.placeholder.com/150/000000 '검은색 이미지')

image

이미지 설명 문구는 이미지에 마우스를 올렸을 때(hover) 나타난다.

🎯링크 연결

[![대체 텍스트](이미지 링크)](연결할 url 'url 설명')

[![image](https://via.placeholder.com/150/008000)](https://www.naver.com/ '네이버로 이동')

image


🔎체크 박스


- [ ] 체크 안됨 (괄호 사이 띄어쓰기 있음)
- [X] 체크 됨
  • 체크 안됨
  • 체크 됨

🔎테이블


왼쪽 정렬 |:---|
오른쪽 정렬 |---:|
가운데 정렬 |:---:|

|**브랜드**|상품명|수량|
|:---|:---:|---:|
|나이키|조던 하이 쉐도우 2.0|5|
|아디다스|이지 350 지브라|1|
|뉴발란스|뉴발 327|10|
브랜드상품명수량
나이키조던 하이 쉐도우 2.05
아디다스이지 350 지브라1
뉴발란스뉴발 32710

🔎이모지


  • window
    윈도우 키 + 마침표(.)
  • mac
    Command + Control + Space Bar
profile
산본개발자
post-custom-banner

0개의 댓글