Velog 마크다운(MarkDown)

github에서 많이 본 README.md 파일.
이 파일의 확장자, .md가 마크다운(MarkDown)을 나타내는 줄임말이라고 하네요.
velog의 다양한 마크다운을 알아봅시다.
(제가 보려고 쓴거라 가독성이 떨어질 수 있습니다.)

1. 제목

작성법

  • 문장 앞에 해시태그( # )와 띄어쓰기 입력
  • H1는 문장 아랫줄에 = 1개이상
  • H2는 문장 아랫줄에 - 1개이상

입력 예시

# head1 제목입니다.
H1
=
H2
-

출력 예시

head1 제목입니다.

H1

H2

해시는 최대 6개까지 붙일 수 있음

1개

2개

3개

4개

5개
6개

2. 번호형 목록

작성법

  • 문장 앞에 숫자와 점 입력

입력 예시

> 1. 번호형 목록입니다.
2.
3.

출력 예시

  1. 번호형 목록 예시 입니다.
  1. 번호형 목록
    2.1
    2.2 목록안에 목록
    2.2.1 목록안에 목록안에 목록은 안되네요

3. 열거형 목록

작성법

  • 문장 앞에 -,*,+와 띄어쓰기 입력

입력 예시

- 열거형 목록입니다.
* 열거형 목록입니다.
+ 열거형 목록입니다.

출력 예시

  • 열거형 목록입니다.
  • 열거형 목록입니다.
  • 열거형 목록입니다.
  • 목록의
    아랫줄에 글을 작성할 시, 알아서 들여쓰기가 됩니다.
    • 목록안에 목록
    • 띄어쓰기 2번 후 작성 시, 목록 안에 목록 작성이 가능합니다. (tab은 코드블럭으로 인식합니다.)
      • 이렇게요.

4. 글씨 서식

작성법

  • 단어 앞뒤로 언더바( _ )
  • 단어 앞뒤로 별표( * )
  • 단어 앞뒤로 언더바 2개( __ )
  • 단어 앞뒤로 별표 2개( ** )
  • 단어 앞뒤로 물결표 2개( ~~ )

입력 예시

_기울이기 입니다._
*기울이기*
__굵게 입니다.__
**굵게**
~~취소선 입니다.~~

출력 예시

기울이기 입니다.
기울이기
굵게 입니다.
굵게
취소선 입니다.

5. 인용문

작성법

  • 문단 앞에 꺾쇠( > )와 띄어쓰기 입력

입력 예시

> 인용문 입니다.

출력 예시

인용문 입니다.

인용문은 문단 단위로 인식됩니다. (문장마다 꺾쇠를 달지 않아도 된다! 인용문에서 탈출하고 싶으면 줄바꿈을 두번!)

인용문안에 인용문

인용문안에 인용문안에 인용문

6. 인라인 코드

한 줄 내에서(inline) 코드와 관련된 단어를 표시하고 싶을 때 사용합니다. 이런 식으로 말이죠.

작성법

  • 단어 앞뒤로 백틱( ` )

입력 예시

인라인 `코드 입니다.`

출력 예시

인라인 코드 입니다.

작은 따옴표( ' ) 아닙니다. 쉼표( , ) 아닙니다.

7. 수평선

작성법

  • 언더바 3개( ___ )
  • 하이픈 3개( --- )
  • 별표 3개( *** )

입력 예시

___
---
***

출력 예시




수평선은 어디다가 쓸까

8. 코드 블럭

작성법

  • 한 줄 띄우고, 문장 앞에 탭
  • 문단 위,아랫줄에 백틱 3개( ``` )
  • 윗줄 백틱 3개 뒤에 언어 이름 입력가능

입력 예시

한 줄 짜리 코드 블럭 입니다.
```c
printf("코드 블럭 입니다.");
	```

출력 예시

한줄 짜리 코드 블럭 입니다.
printf("코드 블럭 입니다.");

9. 링크

작성법

  • 대괄호( [] )안에 키워드 쓰고, 옆에 괄호()쓰고 안에 url주소
  • 화살괄호( <> )안에 url주소
  • url주소
  • 대괄호( [] )안에 키워드 쓰고, 콜론( : )과 띄어쓰기 후 url주소

입력 예시

[벨로그 홈 키워드](https://velog.io) 인라인 링크 입니다.
<https://velog.io> url 링크 입니다.
[A][참조 부여 키워드] [B][참조 부여 키워드] 참조 링크 입니다.
[참조 부여 키워드]: https://velog.io

출력 예시

벨로그 홈 키워드 인라인 링크 입니다.
https://velog.io url 링크 입니다.
A B 참조 링크 입니다.

url주소는 사실 그냥 써도 링크가 알아서 됩니다. https://velog.io
참조 링크는 재사용성이 높습니다.
참조 링크를 부여하는 문장은 출력되지 않습니다.

10. 이미지 참조

작성법

  • 느낌표( ! )와 대괄호( [] )안에 키워드 쓰고, 옆에 괄호()쓰고 안에 url주소
  • url주소 옆에 쌍따옴표( "" )로 이미지 설명 가능

입력 예시

![이미지 키워드](https://cdn.pixabay.com/photo/2021/11/22/14/12/christmas-6816610_960_720.jpg "겨울입니다")

출력 예시

키워드는 왜 안나오나?

11. 이미지 링크

작성법

  • 링크 + 이미지 참조

입력 예시

 [![이미지 키워드](https://cdn.pixabay.com/photo/2020/06/10/02/22/caricature-5280770_960_720.jpg)](https://velog.io)

출력 예시

이미지 참조 후, 이미지에 벨로그 사이트를 링크 했습니다.

12. 표

작성법

  • 세로막대( | )와 하이픈( - )으로 구분
  • 표 양 가쪽에 있는 세로막대는 생략 가능
  • 하이픈에 콜론( : )을 써서, 정렬방식 지정 가능

입력 예시

항목 1|항목 2|항목 3
|-|:-:|-:|
|A|B|C|
|**10**|__1000__|20|
12|33|~~25~~
하이픈 위쪽 내용은 table header로, 기본적으로 굵게 나온다.

출력 예시

항목 1항목 2항목 3
ABC
10100020
123325

하이픈 위쪽 내용은 table header로, 기본적으로 굵게 나온다.

13. 기타

  • 원시HTML 언어도 쓸 수 있습니다.
  • 문법기호는 기호 앞에 역슬래시( \ ) 입력
  • 이모지는 window 키 + 마침표( . )
  • 체크박스는 열거형 목록 뒤에 공백있는 대괄호( [ ]와 x있는 대괄호( [x] ) 입력

입력 예시

 \* \_ \# \+ \\ \! \. \`
😊
- [ ] 체크
- [x] 체크

출력 예시

* _ # + \ ! . `
😊

  • 체크
  • 체크

여러 글을 참고하여 정리하다 보니 내용이 많아진 것 같다. 문체도 통일하고, 부호 명칭도 찾아가면서 작성하니 글 하나 쓰는데 시간도 엄청 걸렸다. (정작 잘 활용할 지도 의문...)

글을 쓰면서 궁금한게 더 생겼는데, 부호 이름 같은것도 나중에 한번 정리해 봐야겠다.

좋은 웹페이지 즐겨찾기