velog 마크다운(MarkDown) 정리

BGwon_C·2022년 11월 27일
Markdownvelog마크다운총정리

velog

목록 보기
2/3
post-thumbnail
  • 이곳에 있는 내용들은 다른 벨로그의 내용들을 취합 및 정리한 내용입니다. 특히 이곳과 이곳, 그리고 이곳의 내용을 많이 참고했음을 알립니다. (최종수정 : 2023년 2월 23일)

마크다운이란

마크다운(markdown)은 일반 텍스트 문서의 양식을 편집하는 문법이다. README 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쓰인다. 마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능하다.
-위키백과

마크다운은 깃허브, 아톰, VS Code등 개발도구에서도 사용하며
Bear등 스마트폰용 글쓰기 도구, 워드프레스 플러그인 Typora, StackEditor와 같은 데스크탑 및 웹브라우저 환경 글쓰기 도구등 많은 곳에서 사용 할 수 있습니다.

👀 내가 보기 위해 정리한 마크다운 문법! 요즘 깃허브 README.md 파일에서 정말 많이 이용되고 있으니, 잘 공부해두면 정말 유용합니다!

👻작성법을 그대로 따라서 텍스트 편집기에 적어보고 결과가 나오는지 확인해 보면 됩니다.

📖마크다운 작성법

1. 제목(Header)

h1부터 h6까지 표현할 수 있으며, # 의 개수로 표현 가능합니다.
이것만 잘 써도 글이 좀 더 깔끔합니다.

✍ 마크다운 작성법

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

👉 결과

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

📌 h1과 h2는 이렇게도 작성 가능해요!

=, -를 각각 2개 이상 사용하면 아래와 같이 h1, h2의 #을 대체할 수 있습니다.
여러 개를 사용해도 마찬가지예요.

✍ 마크다운 작성법


h1
==
h2
--

하이픈을 여러 개 사용한 제목
----------

👉 결과

h1

h2

하이픈을 여러 개 사용한 제목


2. 문단 간격

문단의 간격은 줄 바꿈으로 나타내며, 여러 번 줄 바꿈 시 <br/>을 사용하면 가능합니다.

✍ 마크다운 작성법

[1번 문단]<br/><br/>
[2번 문단]

👉 결과

[1번 문단]


[2번 문단]

3. 목록(List)

순서를 표기하는 목록 / 순서가 없는 목록 두 가지를 작성할 수 있습니다.

3.1. 순서가 있는 목록

숫자와 .을 사용하여 작성합니다.


✍ 마크다운 작성법


1. 첫 번째
2. 두 번째
3. 세 번째
1. 1을 다시 써도 네 번째

👉 결과

  1. 첫 번째
  2. 두 번째
  3. 세 번째
  4. 1을 다시 써도 네 번째

3.2. 순서가 없는 목록

-, *, +어떤 것을 이용해도 상관 없이 결과는 동일합니다.
(필자는 가독성을 위해 -를 추천합니다.)
인라인 코드, 블럭 코드를 작성할 수 있으며 Tab키나 스페이스 바를 이용해 들여쓰기가 가능합니다.


✍ 마크다운 작성법


- 대주제 1
    - 소주제 1.1
        - 내용 1.2
- 대주제 2
		
        Tab 두번 하면 코드 블럭을 만들 수 있어요.
* 대주제 3
+ 대주제 4
	+ `인라인 코드 가능`
    	+ 들여쓰기(tab키 이용)를 하면 다른 모양으로 표현 됩니다.
        
        ```　
		블럭 코드 가능
		```　

👉 결과

  • 대주제 1
    • 소주제 1.1
      • 내용 1.2
  • 대주제 2
      Tab 두번 하면 코드 블럭을 만들 수 있어요.
  • 대주제 3
  • 대주제 4
    + 인라인 코드 가능
    + 들여쓰기(tab키 이용)를 하면 다른 모양으로 표현 됩니다.
      ```　
		블럭 코드 가능
		```　

📌 두 개를 섞어서 쓰면 이렇게 됩니다!

필요한 상황에 적절히 섞어가면서 쓰면 글이 더욱 깔끔해질 수 있습니다.

✍ 마크다운 작성법


1. 이렇게
- 여러개를
    2. 섞어서
    3. 쓰면
        * 어떻게
        + 될까요
    1. 음

👉 결과

  1. 이렇게
  • 여러개를
    1. 섞어서
    2. 쓰면
      • 어떻게
      • 될까요
    3. 음

4. 폰트 스타일(Font Style)

굵게, 기울이기, 취소선 등 기본적인 스타일을 아래와 같이 작성할 수 있습니다.
강조 3인방인 이탤릭(기울이기), 볼드(굵게), 밑줄 중 밑줄은 <u></u> 태그를 통해 이용 가능합니다.

✍ 마크다운 작성법


__Bold__
**Bold2**
_Italic_
*Italic2*
~StrikeThrough~
~~StrikeThrough2~~
<u>Underbar</u>

👉 결과

Bold
Bold2
Italic
Italic2
~StrikeThrough~
StrikeThrough2
Underbar

5. 인용문(Quoting Text)

인용문을 작성할 때에는 >를 사용합니다.

✍ 마크다운 작성법


> 인용문 작성하기
-작성자

> 인용문 작성하기
>> (>)의 갯수에 따라
>>> 중첩문 가능

👉 결과

인용문 작성하기
-작성자

인용문 작성하기

(>)의 갯수에 따라

중첩문 가능


6. 인라인 코드

백틱(｀)을 사용하여 인라인 코드를 작성할 수 있습니다.

✍ 마크다운 작성법


`인라인 코드는 이렇게 작성해요.`

👉 결과
인라인 코드는 이렇게 작성해요.

7. 여러 줄로 된 코드 블럭

<pre>에 대응되는 인용입니다.
백틱(｀)을 세 개 사용하여 작성할 수 있습니다.

✍ 마크다운 작성법


```　
위 아래 백틱을 3개로 감싸면 블럭으로 만들 수 있어요. (세 개를 넣어주세요!)
```　
        이렇게 앞에 Spacebar 4칸을 띄어서 사용해도 블록 인용이 됩니다.

👉 결과

위 아래 백틱을 3개로 감싸면 블럭으로 만들 수 있어요. (세 개를 넣어주세요!)
이렇게 앞에 Spacebar 4칸을 띄어서 사용해도 블록 인용이 됩니다.

7.1. 코드 하이라이트

백틱 3개 뒤에 언어 이름을 넣어주면 해당 언어의 문법에 맞게 하이라이트가 됩니다!


✍ 마크다운 작성법


```아래와 같이 백틱 3개 뒤에 언어 이름을 넣어주세요.

```javascript
let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);
```

```python
num_list = ['one', 'two', 'three']
for num in num_list:
  print(num)
  ```
  
```java
System.out.println("Hello Soori!");
```

👉 결과

let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);
num_list = ['one', 'two', 'three']
for num in num_list:
  print(num)
System.out.println("Hello Soori!");

🎨 코드 블럭 색 변경

코드 블럭 색 변경
작성하기 클릭 ➜ 추가설정 ➜ 코드블록 테마 선택 에서 변경하실 수 있습니다.

8. 마크다운 포맷 무시하기

지금처럼 마크다운 설명할 때 유용한 기능입니다.
무시하고자 하는 마크다운 앞에 \(backslash) 를 입력하면 됩니다.
아니면 6번의 코드인용, 7번의 블록인용을 사용하는 것도 방법입니다.
(*참고 : 14번에서 설명할 이모지 코드에는 아직 역슬래쉬가 안먹히는 듯합니다.
마찬가지로 코드인용, 블록인용으로 해결할 수 있습니다.)

✍ 마크다운 작성 시


*볼드체 마크다운* 

\*볼드체 마크다운 무시\*

👉 결과
볼드체 마크다운

*볼드체 마크다운 무시*

인라인 링크와 url 링크, 참조 링크로 나타낼 수 있습니다.

✍ 마크다운 작성법


인라인 링크는 아래처럼
[인라인 링크](https://velog.io/)

url 링크는 아래처럼


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

그냥 주소를 넣어도 자동으로 링크가 생깁니다.
https://velog.io/

문서 내부 이동은
[클릭시 1. 제목(Header)로 이동](#1-제목header)
* 주의할 점 : 알파벳은 반드시 소문자만 가능
             띄어쓰기는 -(하이픈)으로 구분
=> 'Index Text' 로 이동하기 위해 '#index-text' 처럼 
   소문자로 변경 및 띄어쓰기는 '-' 으로 구분해야 함

👉 결과
인라인 링크는 아래처럼
인라인 링크

url 링크는 아래처럼
https://velog.io/

참조 링크

그냥 주소를 넣어도 자동으로 링크가 생깁니다.
https://velog.io/

클릭시 1. 제목(Header)로 이동

📌 번외 : 새창으로 띄우고 싶으면 마크업 태그가 아닌 HTML 태그를 이용하면 됩니다.

<a href="링크 주소" target="_blank">텍스트</a>

10. 이미지 링크

이미지 링크는 아래와 같이 작성할 수 있습니다.

✍ 마크다운 작성법


![이미지 설명](이미지 링크)
![고양이애옹](https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg)

👉 결과
![이미지 설명](이미지 링크)
고양이애옹

📌 만약 이미지에 링크를 걸고 싶을 경우에는 아래와 같이 작성합니다!


✍ 마크다운 작성법 

[![이미지 설명](이미지 링크)](연결하고자하는 url "마우스 오버 시 나타낼 링크 title")
[![고양이애옹](https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg)](https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg"이미지 무료 사이트 pixabay")

👉 결과
[![이미지 설명](이미지 링크)](연결하고자하는 url "마우스 오버 시 나타낼 링크 title")
[고양이애옹](https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg"이미지 무료 사이트 pixabay")

11. 수평선

*이나 -, _ 등을 3개 이상 입력하면 작성할 수 있습니다.
띄어쓰기를 중간에 삽입하여도 가능합니다. 다만, 하이픈-은 헤더로 인식할 수도 있으니 주의해서 사용할 필요가 있습니다. 사실 --- 나 *** 정도로 쓰면 되고,
나머지는 구분선 만드려는 의도가 아닌데 구분선이 만들어지지 않게 조심만 하면 될 듯합니다
(모두 다 HTML의 <hr>에 대응됩니다.)

✍ 마크다운 작성법


***
* * *
*****
---
- - -
-----
___
__ __ __ __ __ __ __

👉 결과


12. 테이블(Table)

테이블은 아래와 같이 작성합니다.
| 로 구분하며, <4. 폰트 스타일> 에서 이야기 했던 기본적인 스타일 적용이 가능합니다. 또한 -(하이픈)으로 구분된 곳 각각 왼쪽, 양쪽, 오른쪽에 :(세미콜론)을 붙일 경우 순서대로 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬이 가능합니다.
(*주의 : 표 쓸때 중간 두 번째 줄에는 '---' 이 꼭 들어가야 합니다.)

✍ 마크다운 작성법


| 드라마 제목 | 주연 배우 | 방영일 |
|:----------|:----------:|----------:|
| **호텔 델루나** | 이지은, 여진구 | ~~2019.07.13. ~ 2019.09.01.~~ |
| 타인은 지옥이다 | 임시완, 이동욱, 이현욱, 이정은 | 2019.08.31. ~ |
| 멜로가 체질 | 천우희, 안재홍, 전여빈, 공명 | 2019.08.09. ~ |

👉 결과

드라마 제목주연 배우방영일
호텔 델루나이지은, 여진구2019.07.13. ~ 2019.09.01.
타인은 지옥이다임시완, 이동욱, 이현욱, 이정은2019.08.31. ~
멜로가 체질천우희, 안재홍, 전여빈, 공명2019.08.09. ~

📌 테이블을 일일이 작성하기 번거로울 땐 이곳을!

Tables Generator에서 간편하게 코드생성이 가능합니다.
Table to Markdown에서는 엑셀이나 스프레드 시트에 작성한 표를 마크다운으로 간편하게 변환이 가능합니다.

13. 체크박스(Check Box)

-, *, + 뒤에 띄어쓰기 후 대괄호를 넣어 작성해주세요. 대괄호안에 띄어쓰기를 하면 빈 체크박스, x를 넣으면 체크된 체크박스가 생깁니다. 물론 태그를 통해서도 삽입 가능합니다.

✍ 마크다운 작성법


- [ ] 솜이랑 놀기
- [x] 등산 가기
<input type ="checkbox" checked/> 독서하기
<input type ="checkbox"> 여행가기

👉 결과

  • 솜이랑 놀기
  • 등산 가기
    독서하기
    여행가기

14. 이모지🤗

작성된 글 중간중간에 보이는 이모지는 트위터 이모지입니다.
https://kr.piliapp.com/twitter-symbols/
윗 주소의 트위터 이모지를 복사 ➜ 붙여넣기 해서 사용하시면 됩니다.

✍ 단축키

window10: 윈도우 키 + 마침표(.)
mac: Command + Control + 스페이스 바

📌 물론, 직접 코드를 입력해서 사용하는 것도 가능합니다!

✍ 마크다운 작성법

&#128525;

👉 결과
😍

15. 글자 색상

html 태그를 이용하여 작성이 가능합니다.

✍ 마크다운 작성 시


<span style="color:red">red</span>
<span style="color:#d3d3d3">#d3d3d3</span>
<span style="color:rgb(245, 235, 13)">rgb(245, 235, 13)</span>

👉 결과
red
#d3d3d3
rgb(245, 235, 13)

16. 글 정렬

원하는 스타일의 태그를 이용해서 정렬 할 수 있습니다.

✍ 마크다운 작성 시


<center>가운데 정렬</center>  
<div style="text-align: left"> 왼쪽 정렬 </div>
<div style="text-align: right"> 오른쪽 정렬 </div>

👉 결과

가운데 정렬
왼쪽 정렬
오른쪽 정렬

17. 띄어쓰기와 엔터

놓치기 쉬운 내용입니다. 기본적으로 형식에 맞게 쓰시고, 가끔 강제로 여러 줄을 맘대로 띄고 싶다 하면 <br/>을 사용하세요.

✍ 마크다운 작성 시


1. 띄어쓰기               여러 번은 한 번과 같습니다. 
2. 엔터를 한 번 치면, 글이 붙어요.

2-1. 엔터를 두번 치면, 단락이 바뀝니다.





2-2. 엔터 여러번 친다고 여러 줄이 띄어지는건 아닙니다.




2-3. 강제로 여러 줄을 원하는만큼 띄고 싶으면 <br/>을 이용하세요.

👉 결과

1. 띄어쓰기 여러 번은 한 번과 같습니다.
2. 엔터를 한 번 치면, 글이 붙어요.

2-1. 엔터를 두번 치면, 단락이 바뀝니다.

2-2. 엔터 여러번 친다고 여러 줄이 띄어지는건 아닙니다.




2-3. 강제로 여러 줄을 원하는만큼 띄고 싶으면 <br/>을 이용하세요.

18. <>태그 표시

태그를 적용하지 않고 태그 그 자체를 보여주고 싶을 때 사용합니다.
<는 &lt;으로, />는 /&gt;으로 적으시면 됩니다.
특수문자는 여러 종류가 있지만 일단 하나만 소개합니다. (나머지는 추후 다루겠습니다.)

✍ 마크다운 작성 시

&lt;u&gt; &lt;/u&gt;


👉 결과

<u></u>

마치며

velog를 하면서 처음으로 작성해보는 글 같군요. 여기저기 흩어져 있는 내용들을 한 번에 정리해서 취합해 보았는데 어떨지 모르겠네요. 왠만한 내용은 여기 다 있다고 자부합니다. 그래서인지 처음엔 금방 끝날 줄 알았는데 생각보다 시간이 오래걸렸네요.

~(이 놈의 욕심이...👶)~

가장 기초적인 문법들이라 앞으로 velog 포스팅시 여기 있는 문법들을 참고해가면서 작성하면 좋을 것 같습니다. 여기 없는 다른 문법이 있다면 댓글로 남겨주시면 감사하겠습니다.😊

profile
BGwon_C
오늘의 노력은 내일의 오늘입니다.
이전 포스트

[TIL] 템플릿

다음 포스트

video : 동영상 삽입하기

0개의 댓글