Velog Cheat Sheet

Jiho Ko·2024년 12월 26일

velog

Velog 작성팁들

목록 보기

1/3

이 글은 velog 포스트 작성 cheat sheet입니다. 빠르고 편리하게 포스팅이 가능하면서도 깔끔하게 작성되는 velog에 감명받아 작성했습니다. 출처를 밝히시면 누구나 인용하실 수 있습니다.

들어가며

velog는 마크다운(markdown) 기반의 에디터를 사용합니다. 마크다운은 예쁜 글을 빠르게 작성할 수 있는 아주 쉬운 규칙이자 문법입니다.
같은 표기를 위해 다양한 규칙들을 사용할 수 있지만 내용의 간결함을 위해
1표기 1규칙으로 작성했습니다.

제목 (heading)

제목은 # 기호를 앞에 입력해 작성합니다.

✍️ 에디터 작성 내용

# 제목1
## 제목2
### 제목3
#### 제목4
##### 제목5
###### 제목6

📖 실제 포스팅 표기 예시

제목1

제목2

제목3

제목4

제목5

제목6

줄바꿈

줄바꿈은 엔터(enter)키로 입력합니다.
2번 입력 시 문단을 분리할 수 있습니다.
velog에선 엔터키를 입력한 만큼 줄바꿈을 해줍니다.

✍️ 에디터 작성 내용

줄바꿈은 엔터키로
표시할 수 있습니다.

문단을 띄울 땐 엔터키를 두 번 입력합니다.



하지만 엔터키로 여러 줄을 띄울 수는 없습니다.<br><br>
여러 줄을 띄우고 싶을땐 `<br>`을 사용할 수 있습니다.

📖 실제 포스팅 표기 예시

줄바꿈은 엔터키로
표시할 수 있습니다.

문단을 띄울 땐 엔터키를 두 번 입력합니다.

하지만 엔터키로 여러 줄을 띄울 수는 없습니다.

여러 줄을 띄우고 싶을땐 <br>을 사용합니다.

글씨체

텍스트 강조

텍스트 강조 시 *, ~ 등의 기호를 이용합니다.
아쉽게도 밑줄은 하이퍼링크와 혼동될 수 있어 마크다운에서 지원되지 않습니다.

✍️ 에디터 작성 내용

일반 텍스트
**굵은 텍스트**
*기울임 텍스트*
~~삭제 텍스트~~
<ins>밑줄을 넣고 싶다면 앞 뒤에 `<ins>` `</ins>`를 넣습니다.</ins>

📖 실제 포스팅 표기 예시

일반 텍스트
굵은 텍스트
기울임 텍스트
~~삭제 텍스트~~
밑줄을 넣고 싶다면 앞 뒤에 <ins> </ins>를 넣습니다.

글자색 변경

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)

목록은 순서가 있는 순서 목록과 순서가 없는 단순 목록으로 나뉩니다.

순서 목록

문단 시작에 숫자 + '. '(마침표+스페이스 바)를 입력해 순서 목록을 작성할 수 있습니다. (1. , 2. , ...)
탭(tab) 키로 하위 순서를 작성할 수 있습니다.

✍️ 에디터 작성 내용

1. 순서1
	1. **탭(tab)키**를 입력하고 순서를 입력하면
    2. *하위 순서*를 입력할 수 있습니다.
    	1. 하위하위(?) 순서도 입력할 수 있습니다.
        	1. 어디까지 내려가는 거에요?
            	1. ...

2. 문단을 분리하지 않고 이어서 작성하면
순서 내용을 입력할 수 있습니다.

4. 순서를 잘못 입력해도 제대로 표기됩니다.

📖 실제 포스팅 표기 예시

순서1
1. 탭(tab)키를 입력하고 순서를 입력하면
2. 하위 순서를 입력할 수 있습니다.
  1. 하위하위(?) 순서도 입력할 수 있습니다.
    1. 어디까지 내려가는 거에요?
      1. ...
문단을 분리하지 않고 이어서 작성하면
순서 내용을 입력할 수 있습니다.
순서를 잘못 입력해도 제대로 표기됩니다.

단순 목록

단순 목록은 - 기호를 사용합니다.
순서 목록과 다르게 스페이스바 두 번으로 하위 순서를 작성할 수 있습니다.

✍️ 에디터 작성 내용

- 목록1
  - 하위 목록은 스페이스바 두 번입니다.
    - 하위하위(?) 목록은 스페이스바 4번
      - 더 하위로 내려가도 기호가 구분되지는 않습니다.
        - 또 어디까지 ...
- 목록2
* 기호에 따라 단순 목록은 `*` 기호나
+ `+` 기호도 사용할 수 있습니다.

📖 실제 포스팅 표기 예시

목록1
- 하위 목록은 스페이스바 두 번입니다.
  - 하위하위(?) 목록은 스페이스바 4번
    - 더 하위로 내려가도 기호가 구분되지는 않습니다.
      - 또 어디까지 ...
목록2

기호에 따라 단순 목록은 * 기호나

+ 기호도 사용할 수 있습니다.

하이퍼링크 삽입

[표시할 텍스트](URL 링크 주소 "마우스 올리면 표시할 내용")

✍️ 에디터 작성 내용

[velog 하이퍼링크](https://velog.io/ "V.E.L.O.G")

📖 실제 포스팅 표기 예시
velog 하이퍼링크

이미지 삽입

velog는 편리한 이미지 삽입 기능을 지원합니다.

클립보드 이미지 (복사&붙여넣기)

ctrl + C 하여 클립보드에 복사한 이미지는 ctrl + V로 붙여넣기 할 수 있습니다.

이미지 url 삽입

느낌표(!)에 주의합시다.
![](URL 링크 주소 "마우스 올리면 표시할 내용")

✍️ 에디터 작성 내용

![](https://cdn.pixabay.com/photo/2019/03/13/08/29/cat-4052454_1280.jpg "마우스를 잡았다냥😸")

📖 실제 포스팅 표기 예시

코드 블록

코드 블록은 이쁘게 코드를 표시하고 싶거나, 마크다운이 아닌 원본 내용을 표시하고 싶을 때 사용합니다.
분리된 코드를 표시하는 기본 코드 블록과 텍스트 중간에 표기할 수 있는 인라인(in-line) 코드 블록이 있습니다.

기본 코드 블록

코드 블록은 백틱( ` ) 기호 3번을 중첩해 사용합니다.

✍️ 에디터 작성 내용

```
백틱 3번을 중첩해 코드 블록을 표기합니다.
코드 블록 내부에는 **마크다운** 문법이 적용되지 않습니다.
```

📖 실제 포스팅 표기 예시

백틱 3번을 중첩해 코드 블록을 표기합니다.
코드 블록 내부에는 **마크다운** 문법이 적용되지 않습니다.

syntax-highlighted 코드 블록

코드 작성 시 문법 강조를 하고 싶다면, 기본 코드 블록 표기 시 시작 백틱( ``` ) 옆에 언어를 표기합니다.
아래에 표기된 언어 외에도 다양한 언어들이 지원됩니다.

언어	표기
Python	python
C++	cpp
C#	cs
Java	java
Bash	bash
SQL	sql

✍️ 에디터 작성 내용

```python
import foo
  
def bar():
    '''함수입니다.'''
    print("Hello World!")

# 함수를 실행합니다.
bar()
```

📖 실제 포스팅 표기 예시

import foo
  
def bar():
    '''함수입니다.'''
    print("Hello World!")

# 함수를 실행합니다.
bar()

인라인(in-line) 코드 블록

텍스트 중간에 간단한 코드 블록을 삽입하고 싶다면 백틱 1개로 감쌉니다.

✍️ 에디터 작성 내용

텍스트 `중간` 코드 블록 예시입니다.
*`기울임`*이나 **`볼드체`**도 가능합니다.

📖 실제 포스팅 표기 예시

텍스트 중간 코드 블록 예시입니다.
기울임이나 볼드체도 가능합니다.

인용 블록

인용 블록은 꺽새(>) 기호로 표기합니다.

✍️ 에디터 작성 내용

> 인용 블록 예시
같은 문단은 하나의 인용 블록이 됩니다.
즉, 줄바꿈을 한 번만 하면 **블록 내부**에 작성 가능합니다.
>> 또한 꺽새를 여러 번 붙이면
>>> 인용 블록을 중첩할 수 있습니다.
>>>> 계속...

줄바꿈을 두 번하여 문단이 분리되면 블록 밖으로 나옵니다.

📖 실제 포스팅 표기 예시

인용 블록 예시
같은 문단은 하나의 인용 블록이 됩니다.
즉, 줄바꿈을 한 번만 하면 블록 내부에 작성 가능합니다.

또한 꺽새를 여러 번 붙이면

인용 블록을 중첩할 수 있습니다.

계속...

줄바꿈을 두 번하여 문단이 분리되면 블록 밖으로 나옵니다.

수평선

내용 분리 등을 위한 수평선은 ---로 작성합니다.

✍️ 에디터 작성 내용

---

📖 실제 포스팅 표기 예시

문법기호 입력 (escape 문자)

간혹 $(달러), #(샵) `(백틱)과 같이 문법에 사용되는 기호를 텍스트로 입력해야 할 경우가 생길 것입니다.
이 경우, 백슬래쉬(\)를 앞에 붙여 입력합니다.

✍️ 에디터 작성 내용

\$
\#
\*
\_
\-
\---
\\

📖 실제 포스팅 표기 예시

$
#
*
_
-
---
\

표 (table)

마크다운의 표 규칙을 그대로 따릅니다. (참고: 마크다운 - 표(테이블) 만들기)
표를 작성하는 것은 귀찮기 때문에 툴을 사용하는 방법도 있습니다.
Markdown Table Generator

✍️ 에디터 작성 내용

|제목|내용|설명|
|---|---|---|
|테스트1|*강조1*|테스트3|
|테스트1|**강조2**|테스트3|
|테스트1|<span style="color:red">강조3</span>|테스트3|

📖 실제 포스팅 표기 예시

제목	내용	설명
테스트1	강조1	테스트3
테스트1	강조2	테스트3
테스트1	강조3	테스트3

수식 삽입 (LaTeX)

velog는 레이텍(LaTeX) 문법의 일부를 지원합니다.
레이텍을 이용하면 쉽게 수식 블록과 인라인 수식을 작성할 수 있습니다.
레이텍 문법 관련해서는 다른 문서를 참고해주세요.

수식 블록

달러($) 기호 2개로 감싸 수식 블록을 작성합니다.
아쉽게도 amsmath 등 패키지는 지원하지 않는 듯 합니다.

✍️ 에디터 작성 내용

\LaTeX \\
2x - 5y =  8 \\
3x + 9y =  -12

📖 실제 포스팅 표기 예시

\LaTeX \\ 2x - 5y = 8 \\ 3x + 9y = -12

인라인 수식

달러($) 기호 1개로 감싸 인라인 수식을 작성합니다.

✍️ 에디터 작성 내용

텍스트 중간에 $\alpha_{1}^{0}$를 넣어봤습니다.

📖 실제 포스팅 표기 예시

텍스트 중간에 $\alpha_{1}^{0}$ 를 넣어봤습니다.

참고

Jiho Ko

훌륭한 Data Scientist가 되고 싶은.

다음 포스트

Velog Cheat Sheet

Velog 작성팁들

들어가며

제목 (heading)

제목1

제목2

제목3

제목4

제목5

제목6

줄바꿈

글씨체

텍스트 강조

글자색 변경

목록

순서 목록

단순 목록

하이퍼링크 삽입

이미지 삽입

클립보드 이미지 (복사&붙여넣기)

이미지 url 삽입

코드 블록

기본 코드 블록

syntax-highlighted 코드 블록

인라인(in-line) 코드 블록

인용 블록

수평선

문법기호 입력 (escape 문자)

표 (table)

수식 삽입 (LaTeX)

수식 블록

인라인 수식

참고

Velog 이미지 크기 및 정렬 설정

0개의 댓글