마크다운 연습 및 정리 (Velog 사용법)

김범·2022년 9월 29일

마크다운이란

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

마크다운 작성법

h1부터 h6까지 표현가능하며, #의 갯수로 표현가능하다.

# h1
## h2
### h3
#### h4
##### h5
###### h6

👉결과

h1

h2

h3

h4

h5

h6

2. 문단 간격

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

첫번째 문단<br/><br/>
두번째 문단

👉결과

첫번째 문단

두번째 문단

3. 목록(list)

순서가 있는 목록(ol) / 순서가 없는 목록(ul) 작성 가능하다.

3.1 순서가 있는 목록

숫자와 .을 사용하여 작성

1. 첫번째
2. 두번째
3. 세번째

👉결과

첫번째
두번째
세번째

3.2 순서가 없는 목록

-, *, + 을 사용하여 작성할 수 있다.
인라인코드, 블럭코드를 작성할 수 있으며 Tab키나 스페이스 바를 이용해 들여쓰기가 가능하다.

- 순서 없는 목록 1
	-목록 1.1
    	-목록 1.2
- 순서 없는 목록2
		Tab 두번하면 코드 블럭을 만들 수 있다.
* 순서 없는 목록 3
+ 순서 없는 목록 4
	+ `인라인 코드 가능`
    	+들여쓰기(Tab키 이용)를 하면 다른 모양으로 표현된다.
        ```
        블럭 코드 가능
        ```

👉결과

순서 없는 목록 1
-목록 1.1
-목록 1.2
순서 없는 목록2
Tab 두번하면 코드 블럭을 만들 수 있다.

순서 없는 목록 3

순서 없는 목록 4
+ 인라인 코드 가능
+들여쓰기(Tab키 이용)를 하면 다른 모양으로 표현된다.
```
		```
  블럭코드 가능
  ```
```

4. 폰트 스타일

굵게, 기울이기, 취소선 등 기본적인 스타일을 아래와 같이 작성할 수 있다.

__굵게__
**굵게**
_기울여 쓰기_
*기울여 쓰기*
~~취소선~~

👉결과

굵게
굵게
기울여 쓰기
기울여 쓰기
~~취소선~~

5. 인용문

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

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

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

👉결과

인용문 작성하기
-작성자

인용문 작성하기

(>)의 갯수에 따라

중첩문 가능

6. 인라인 코드

백틱(`)을 사용하여 인라인 코드를 작성할 수 있다.
인라인 코드 안에 백틱을 사용할 시 백틱(`)의 갯수를 늘리면 됨.

`인라인 코드는 이렇게 작성해요.`
``인라인 블럭안의 백틱(`)사용은 이렇게 백틱 갯수를 늘려줘요``

👉결과

인라인 코드는 이렇게 작성해요.
인라인 블럭안의 백틱(`)사용은 이렇게 백틱 갯수를 늘려줘요

7. 여러줄로 된 코드 블럭

백틱(`)을 세 개 사용하여 작성할 수 있다.
코드블럭 안에 백틱을 세개 이상 작성 하고 싶을 땐 상위 코드블럭에 백틱(`)을 추가해준다.

```
위 아래 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)
```

👉결과

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

num_list = ['one', 'two', 'three']
for num in num_list:
  print(num)

코드 블럭 색 변경

작성하기 클릭 ➜ 추가설정 ➜ 코드블럭 테마 선택에서 변경할 수 있다.
(2022-09-29, 현재는 없어진건가? 컴퓨터로 작성시 추가설정이 보이지 않는다)
코드블럭 색변경참고사진

8.링크(link)

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

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

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

참조 링크 [velog] (참조링크와 같은 이름은 전부 링크되는듯)
[velog]:(https://velog.io/)

👉결과

인라인 링크는 아래처럼
인라인 링크

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

참조 링크 velog (참조링크와 같은 이름은 전부 링크되는듯)

9. 수평선

*이나 -, _ 등을 3개 이상 입력하면 작성할 수 있다.
띄어쓰기를 중간에 삽입하여도 가능하다. 다만, 하이튼은 헤더로 인식할 수 있으니 주의 필요

***
-----
__ __ __ __ __

👉결과

10. 이미지 링크

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

10.1 링크 없이 이미지만 사용

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

👉결과

고양이애옹

10.2 링크를 추가하여 이미지를 사용

[![이미지 설명](이미지 링크)](연결하고자하는 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")

👉결과

11. 테이블(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. ~

12. 체크박스(Check Box)

-, *, + 뒤에 띄어쓰기 후 대괄호를 넣어 작성하면 된다. 대괄호 안에 띄어쓰기를 하면 빈 체크박스, x를 넣으면 체크된 체크박스가 생긴다.

- [ ] 운동하기
- [x] 강의듣기

👉결과
☺

운동하기
강의듣기

13. 이모지

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

14. 글자 색상

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)

마치며

벨로그를 처음 시작하면서 마크다운을 정리 및 사용해볼겸 다른 정리글을 똑같이 따라 작성해보았다.
우측에 목록도 자동으로 생성해줘서 너무 좋다.

참고한 사이트
https://velog.io/yuuuye/velog-마크다운MarkDown-작성법#마크다운이란
https://intrepidgeeks.com/tutorial/verlog-positioning-tutorial#0

김범

다음 포스트