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://media.vlpt.us/images/huyeon123/post/8d93b877-be8d-4a40-ae86-3e18482c489f/image.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. ~ |

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에서 이미지 크기 조정