마크다운 언어 작성하기

김범식·2023년 4월 11일
3
post-thumbnail

마크다운이란 무엇인가

일반 텍스트 기반의 경량 마크업 언어이다. 일반 텍스트로 서식이 있는 문서를 작성하는데 사용되며, 일반 마크업 언어에 비해 문법이 수비고 간단한것이 징이다. README파일이나 온라인 게시물등에 많이 사용된다.

나는 notion에서 단축키로 마크업을 만이 사용했지만 실제 기호로 작성하는것은 velog가 처음이기 때문에 이렇게 다양한 작성방식이 있다는것을 이번에 처음 접했다. 까먹을 것 같으니 기록해두자





📢 Block Element

블록 단위의 엘리먼트





🔔 header


🔉입력

# 첫 번째 제목 (h1)
## 두 번째 제목 (h2)
### 세 번째 제목 (h3)
#### 네 번째 제목 (h4)

🔊출력

첫 번째 제목 (h1)

두 번째 제목 (h2)

세 번째 제목 (h3)

네 번째 제목 (h4)





🔔 인용(Blockquotes)


본문안에서 인용된 내용을 표시하고자 한다면 > 기호를 사용한다

🔉입력

>#제목 1
인용문 안의 글
인용문 안의 글
인용문 안의 글
>>#제목 2
인용문 안의 인용문 안의 글
인용문 안의 인용문 안의 글
인용문 안의 인용문 안의 글
>>> #제목 3
인용문 안의 인용문 안의 인용문 안의 글
인용문 안의 인용문 안의 인용문 안의 글
인용문 안의 인용문 안의 인용문 안의 글

🔊출력

#제목 1
인용문 안의 글
인용문 안의 글
인용문 안의 글

#제목 2
인용문 안의 인용문 안의 글
인용문 안의 인용문 안의 글
인용문 안의 인용문 안의 글

#제목 3
인용문 안의 인용문 안의 인용문 안의 글
인용문 안의 인용문 안의 인용문 안의 글
인용문 안의 인용문 안의 인용문 안의 글





🔔 리스트 (unordered)


일반적인 리스트는 + * - 중 아무 기호나 사용하면 된다.

🔉입력

* 기호
- 기호
+ 기호

🔊출력

  • 기호
  • 기호
  • 기호





🔔 리스트 (ordered)


일반적인 리스트는 + * - 중 아무 기호나 사용하면 된다.

🔉입력

1. 1번
2. 2번
3. 3번
4. 4번
5. 5번

🔊출력

  1. 1번
  2. 2번
  3. 3번
  4. 4번
  5. 5번





🔔 코드블럭 만들기(Code Block)


한 줄짜리 코드블럭은 tab 을 이용해서 만들 수 있다.

🔉입력

` 다만, 이전 문장으로 부터 엔터를 두 번 입력해야 가능`

🔊출력
다만, 이전 문장으로 부터 엔터를 두 번 입력해야 가능

여러줄의 코드블럭은 백틱() 3개로 감싸서 작성할 수 있다. mac을 사용하는 사람은 option+`를 누르거나 영문으로 바꾼후 ``를 누르면 백틱을 작성할 수 있다.
🔉입력

\```
	코드블럭 작성
\```

🔊출력

	코드블럭 작성





🔔 가로선 넣기


다양한 방법이 있는데 다음 기호들이 모두 같은 가로선을 만들어 낸다.

🔉입력

* * *
***
*****
- - -
---
-----
_ _ _
___
_____

🔊출력














📢 Span Element


아래 3가지 방식으로 링크를 나타낼 수 있다.
1. 인라인 링크
2. url 링크
3. 참조 링크

🔉입력

인라인 링크
[인라인 링크](https://velog.io/)

url 링크
<http://velog.io/>

참조링크
[velog]:https://velog.io/

[velog]





🔔 강조하기 (Emphasis)


볼드, 이텔릭, 취소선을 사용할 수 있다.

🔉입력

*이텔릭*
_이텔릭_
**볼드**
__볼드__
~~취소선~~

🔊출력
이텔릭
이텔릭
볼드
볼드
취소선





🔔 이미지 삽입(Images)


링크 삽입 방식과 유사하다

🔉입력

1. 일반 이미지 삽입하기 : ![대체 텍스트](이미지링크)

2. 이미지 설명 삽입하기 : ![대체 텍스트](이미지 링크 "이미지 설명 문구")

3. 이미지에 링크걸기: [![대체 텍스트](이미지 링크)](연결할 url "url 설명 문구")





🔔 기호표시 (Bacslash Escapes)


마크다운 예약어를 그대로 출력하고 싶다면, 역방향 슬래시를 앞에 붙이면 된다.

🔉입력

\*
\_
\()
\{}
\[]
\#
\+
\-
\.
\!
\\

🔊출력
*
_
()
{}
[]
#
+
-
.
!
\





🔔 테이블 (Table)


수직선 기호(|)로 열을 구분할 수 있다.
하이픈 기호 (-)를 여러개 붙여 th tr을 구분할 수 있다.
*콜론 기호(:) 로 정렬할 수 있다.

🔉입력

|    |left |center|right
|----|:----|:----:|----:
|row1|l1   |  c1  |   r1
|row2|l2   |  c2  |   r2
|row3|l3   |  c3  |   r3

🔊출력
| |left |center|right
|----|:----|:----:|----:
|row1|l1 | c1 | r1
|row2|l2 | c2 | r2
|row3|l3 | c3 | r3





🔔 이모지 (Emoji)


  1. 링크에서 복사 + 붙여넣기 사용Emoji

  2. 단축키 사용
    a. window:윈도우키 + 마침표
    b. mac : command + control + spacebar





🔔 체크박스 (check box)


* + - 기호 뒤에 띄어쓰기 이후 대괄호[] 를 넣어 작성한다.
띄어쓰기를 하면 체크되지 않은 상태이고, x를 입력해주면 체크가 된 상태이다.

🔉입력

- [ ] 체크되지 않은 박스
- [x] 체크된 박스

🔊출력

  • 체크되지 않은 박스
  • 체크된 박스





참고 사이트

벨로그-사용법-튜토리얼

profile
frontend developer

0개의 댓글