[Velog] 벨로그 기본 사용법 총정리

PoemSilver·2022년 12월 18일
4

Basic

목록 보기
1/3

github의 Readme.md를 작성할 때 처럼, 벨로그도 마크다운(Markdown) 문법을 사용한다.

벨로그를 시작하면서 익숙하지 않은 부분이 많아 정리했다!

🖌 제목(header) 표기

h1~h6 혹은 #로 제목을 표기할 수 있다.

'#' 사용해서 제목 표기하는 방법

✏️ 입력

# h1에 해당하는 제목
## h2에 해당하는 제목
### h3에 해당하는 제목
#### h4에 해당하는 제목
##### h5에 해당하는 제목
###### h6에 해당하는 제목

위와 같이 작성하면 아래와 같이 출력된다.

📂 출력

h1에 해당하는 제목

h2에 해당하는 제목

h3에 해당하는 제목

h4에 해당하는 제목

h5에 해당하는 제목
h6에 해당하는 제목

'h1~h6' 사용해서 제목 표기

✏️ 입력

<h1>#에 해당하는 제목</h1>
<h2>##에 해당하는 제목</h2>
<h3>###에 해당하는 제목</h3>
<h4>####에 해당하는 제목</h4>
<h5>#####에 해당하는 제목</h5>
<h6>######에 해당하는 제목</h6>

위와 같이 작성하면 아래와 같이 출력된다.

📂 출력

#에 해당하는 제목

##에 해당하는 제목

###에 해당하는 제목

####에 해당하는 제목

#####에 해당하는 제목
######에 해당하는 제목

📌 링크 걸기

[링크 이름](주소 "링크 설명")을 사용하면 링크를 걸 수 있다.
예시는 아래와 같다.

✏️ 입력

[poemsilver의 벨로그](https://velog.io/@poemsilver99 "poemsilver의 벨로그입니다.")

📂 출력

poemsilver의 벨로그


🖊글씨 음영처리

음영처리 같이 글씨를 쓰려면 백틱(backtick, `)을 음영처리할 문장 앞 뒤에 입력하여 사용하면 된다.

참고로 백틱은 보통 키보드 1 위치의 왼쪽에 위치한다.

맥북의 경우 백틱 대신 ₩가 위치해있는데 option+₩ 을 누르면 백틱이 써진다.

✏️ 입력

📂 출력

음영처리하면 # 같은 다양한 문법이 먹히지 않아요

⌨️ 인용 넣기

이렇게 인용을 넣으려면?

>를 사용하여 위와 같이 인용 처리를 할 수 있다.

>인용1
>>인용2
>>>인용3

를 입력하면 아래와 같이 중첩 인용을 사용할 수 있다.

인용1

인용2

인용3

인용 내부에서는 엔터로 줄바꿈을 2번하면 인용에서 빠져나온다.
벨로그는 엔터로 두 줄 이상 줄바꿈이 불가능하고 <br>를 사용해주어야 더 간격이 넓은(?) 줄바꿈이 가능하다!

✏️ 입력

인용 내부에서 줄바꿈을 하고 싶어요

줄1
<br>
줄2

📂 출력

줄1


줄2


💻 코드 블럭(Code Block)

벨로그에서 글을 쓸 때 가장 큰 장점이라고 생각하는 코드 블럭 기능..!
백탭 3개 ```사용문법를 코드 앞에, ```를 뒤에 붙여주면 코드 편집기 처럼 문법을 강조할 수 있다.

그냥 ```를 앞뒤에 붙여줄 수도 있지만, 문법 강조는 되지 않는다.

✏️ 입력

```
print("Hellow World")
```
```python
print("Hellow World")
```

📂 출력

print("Hello World")
print("Hello World")

글쓸 때 상단 맨 우측에 있는
를 눌러서 바로 간단하게 사용도 가능하다.


🎨 글자색 변경하기

<span style="color:색 이름 혹은 색상코드">색을 변경할 글자</span>

를 사용하면 변경할 글자들을 해당 색으로 바꿀 수 있다.

보통 영어로 된 색상 이름을 넣으면 적용가능하고, 더 디테일한 색상들은 색상 코드를 사용해 변경 가능하다.

예시는 다음과 같다.

✏️ 입력

<span style="color:red">빨간색</span>
<span style="color:blue">파란색</span>
<span style="color:purple">보라색</span>
<span style="color:gray">회색</span>

📂 출력

빨간색
파란색
보라색
회색

그 외 다양한 색상 코드는 아래 블로그에서 많이 참고했다.

📌색상 코드 참고 블로그

0개의 댓글