Notion → Velog 이전

안녕하세요👋

기존 Notion에서 개인적으로 기술들을 정리하고 있었는데,
Notion이 공유를 허용한 상태에서, URL을 통해야만 외부인이 접근할 수 있기 때문에
외부 평가를 받기가 힘들다는 단점이 있었습니다.
레이아웃 역시 불편한 점이 몇개 있어 티스토리, 브랜치같은 블로그 플랫폼을 찾다가
Velog가 Notion이랑 비슷한 비주얼과, 사용성이 좋다고 하길래 이전을 하게 되었습니다.

---

Velog 사용법 정리

1. 제목

h1 ~ h6까지 표현할 수 있으며, #의 개수로 표현 가능합니다.

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

2. 개행(줄바꿈)

한줄은 기존 엔터키로 자동으로 개행되지만, 그 이후부터는 <br>을 통해 개행합니다.

3. 목록

-, *, + 로 작성합니다. 들여쓰기는 스페이스 2번을 이용합니다. Tab키도 가능합니다(=스페이스 4번).

• Test 1
  • Test 2
    • Test 3
• Test 4
  • Test 5

4. 글꼴 스타일

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

5. 인용문

>을 통해 인용문 작성이 가능합니다.

6. 인라인 코드

백틱( ` )을 통해 인라인 코드를 작성할 수 있습니다. Tab키도 가능합니다.

7. 코드 블럭

백틱( ` ) 3개를 통해 코드 블럭을 작성할 수 있습니다.

8. 코드 하이라이트

백틱(`) 3개 뒤에 프로그래밍 언어명을 작성하면 됩니다.

```java
public static class clazz{
	public static void main(String[] args){
    	System.out.println("Hello World!");
    }
}

public static class clazz{
	public static void main(String[] args){
    	System.out.println("Hello World!");
    }
}

9. 링크

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

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

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

10. 수평선

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

11. 이미지 링크

이미지 링크는 아래와 같이 작성할 수 있습니다.
HTML태그를 이용하면 사이즈를 조절할 수 있습니다.
(현재는 적용이 안되는것으로 보입니다. Velog 자체에서 렌더링 시 Full로 채우는 것 같습니다.)

![이미지 설명](이미지 링크)
![놀자에요](https://velog.velcdn.com/images%2Fhuyeon123%2Fpost%2F8d93b877-be8d-4a40-ae86-3e18482c489f%2Fimage.png)
<img src="https://images.velog.io/images/huyeon123/post/8d93b877-be8d-4a40-ae86-3e18482c489f/image.png" width="300">

12. 테이블

테이블은 아래와 같이 작성합니다.
| 로 구분하며, -(하이픈)으로 구분된 곳 각각 왼쪽, 양쪽, 오른쪽에 :(세미콜론)을 붙일 경우 순서대로 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬이 가능합니다.

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

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

13. 체크박스

-, *, + 뒤에 작성해주세요. [ ]는 빈 체크박스, [X]는 체크된 체크박스입니다.

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

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>

15. 이모지

이모지를 통해 작성 글을 꾸밀 수 있습니다.

단축키

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

아래 트위터 이모지에서 복사 후 사용할 수도 있습니다.
https://kr.piliapp.com/twitter-symbols/

---

이상 Velog로 이전하면서 글을 작성할 때 필요한, 마크다운 문법을 정리해봤습니다.
Notion은 UI를 제공하기 때문에 제공하는 선에서는 간편하게 작성할 수 있지만,
제공하지 않는 다면 제한된 선에서만 표현할 수 있었습니다.
Velog는 마크다운 문법을 사용하기 때문에 번거롭지만 다양하게 표현가능한 것 같습니다.

감사합니다!

---

출처

velog 마크다운(markdown) 작성법
[마크다운]velog에서 이미지 크기 조정