내가 보려고 정리한 Velog(벨로그) 사용법 튜토리얼

ybkim·2021년 7월 25일
1426
post-thumbnail

마크다운이란?

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

  • 쉽게 읽을 수 있고, 쉽게 작성할 수 있게 만들어짐
  • 가독성이 제일 중요
  • 웹상에서 사용할 수 있는 글쓰기 도구
  • html을 완전하게 대체하지는 못함

📌 Block Elements

📖 제목(headers) 넣어보기

h1부터 h6을 이용해서 제목을 표현할 수 있다

참고: 회색 박스로 감싸진 부분은 백틱(backtick)(`)으로 감싸서 작성하면 된다.

✍ 입력

# 첫 번째 수준 제목 (h1)
## 두 번째 수준 제목 (h2)
### 세 번째 수준 제목 (h3)
#### 네 번째 수준 제목 (h4)
##### 다섯 번째 수준 제목 (h5)
###### 여섯 번째 수준 제목 (h6)

💻 출력

첫 번째 수준 제목 (h1)

두 번째 수준 제목 (h2)

세 번째 수준 제목 (h3)

네 번째 수준 제목 (h4)

다섯 번째 수준 제목 (h5)
여섯 번째 수준 제목 (h6)

📖 인용(Blockquotes)

본문 안에서 인용된 내용을 표시하고자 한다면 > 기호를 사용한다.
✍ 입력

> # 1단
인용문 첫 번째 줄
인용문 두 번째 줄
인용문 세 번째 줄
>> ## 2단
중복해서 사용하면
>>> ### 3단
중첩 인용문을 표현할 수 있다
>>>> #### 4단
계속 중첩할 수 있다

참고: 인용문 안에서 제목 수준을 표현할 수도 있다.

💻 출력

1단

인용문 첫 번째 줄
인용문 두 번째 줄
인용문 세 번째 줄

2단

중복해서 사용하면

3단

중첩 인용문을 표현할 수 있다

4단

계속 중첩할 수 있다


📖 리스트

일반적인 불릿 리스트는 * + - 중 아무 기호나 이용하면 된다.

✍ 입력

* 별도
+ 플러스도
- 마이너스도 똑같이 나온다

💻 출력

  • 별도
  • 플러스도
  • 마이너스도 똑같이 나온다

숫자 리스트는 숫자 + 마침표를 이용하면 된다.

✍ 입력

1. 1번
2. 2번
6. 3번
3. 4번
4. 5번

💻 출력
1. 1번
2. 2번
6. 3번
3. 4번
4. 5번

참고: 숫자 리스트는 순서가 맞지 않아도 자동으로 순서가 맞춰진다.

리스트 안에서 이어지는 문단을 추가할 때는 스페이스바만 입력해줘도 된다.
✍ 입력

- 첫 번째 리스트

 이어지는 두 번째 문단
 
- 두 번째 리스트

 이어지는 두 번째 문단

💻 출력

  • 첫 번째 리스트

    이어지는 두 번째 문단

  • 두 번째 리스트

    이어지는 두 번째 문단


📖 코드블럭(Code Blocks) 만들어보기

한 줄짜리 코드블럭은 Tab을 이용해서 작성할 수 있다.

다만, 이전 문장으로부터 엔터를 두 번 입력해야만 가능하다.

여러 줄의 코드 블럭은 백틱(`) 3개로 감싸서 작성한다.

여러 줄의 코드 블럭은
3개의 백틱으로
감싸서 만들 수 있다

✍ 입력

```c
#include <stdio.h>

int main()
{
	printf("Hello, world!\n");

	return 0;
}
```

💻 출력

#include <stdio.h>

int main()
{
    printf("Hello, world!\n");

    return 0;
}

✍ 입력

```python
print("hello world")
```

💻 출력

print("hello world")

✍ 입력

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

💻 출력

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

코드블럭 시작점에 사용하는 언어를 선언하면 Syntax Highlighting이 가능하다.

언어 이름작성 방식
Bashbash
Cc
C#cs
C++cpp
CSScss
Diffdiff
HTML, XMLhtml
HTTPhttp
Iniini
JSONjson
Javajava
JavaScriptjavascript
PHPphp
Perlperl
Pythonpython
Rubyruby
SQLsql

출처: 마크다운 왕초보 코드블록 사용가능한 언어 목록


📖 가로선 넣기

가로선을 넣기 위한 다양한 방법이 있는데, 아래의 입력 방식은 모두 동일한 가로선을 만들어준다.
💻 출력

* * *
***
*****
- - -
---
-----
_ _ _
___
_____

💻 출력











📌 Span Elements

아래 3가지 방식으로 링크를 나타낼 수 있다.

  1. 인라인 링크
  2. url 링크
  3. 참조 링크
    ✍ 입력
인라인 링크
[인라인 링크](https://velog.io/)

url 링크
<https://velog.io/>

참조 링크
[velog]:https://velog.io/

[velog]

💻 출력

인라인 링크

https://velog.io/

velog <- 키워드를 참조하는 방식


📖 강조하기(Emphasis)

볼드, 이탤릭, 취소선을 사용할 수 있다.
✍ 입력

*이탤릭*
_이탤릭_
**볼드**
__볼드__
~~취소선~~

💻 출력
이탤릭
이탤릭
볼드
볼드
취소선


📖 이미지 삽입(Images)

링크 삽입 방식과 유사하나, 맨 앞에 !를 붙인다.
✍ 입력

1. 일반 이미지 삽입하기: ![대체 텍스트](이미지 링크)
예시: ![CloudScape](https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_1280.jpg)

2. 이미지에 설명 삽입하기: ![대체 텍스트](이미지 링크 "이미지 설명 문구")
예시: ![CloudScape](https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_1280.jpg "Cloudy Sky")
** 참고: 이미지에 마우스를 올렸을 때 나타나는 설명을 의미함

3. 이미지에 링크 걸기: [![대체 텍스트](이미지 링크)](연결할 url "url 설명 문구")
예시: [![CloudScape](https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_1280.jpg)](https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_1280.jpg "Pixabay Image")

💻 출력
1. 일반 이미지 삽입 예시 :
2. 이미지에 설명 삽입 예시 :

3. 이미지에 링크 걸기 예시 :


📌 MISCELLANEOUS

📖 기호 표시(Backslash Escapes)

마크다운 문법에 있는 기호를 그대로 출력하고 싶다면, 역방향 슬래시를 앞에 붙여주면 된다.

✍ 입력

\*
\_
\()
\{}
\[]
\#
\+
\-
\.
\!
\\

💻 출력
*
_
()
{}
[]
#
+
-
.
!
\


📖 테이블(Table)

  • 수직선 기호(|)로 열을 구분할 수 있다
  • 하이픈 기호(-)를 여러 개 붙여서 th와 tr을 구분할 수 있다.
  • 콜론 기호(:)로 정렬을 표현할 수 있다.

✍ 입력

|    |left |center|right
|----|:----|:----:|----:
|row1|l1   |  c1  |   r1
|row2|l2   |  c2  |   r2
|row3|l3   |  c3  |   r3

💻 출력

leftcenterright
row1l1c1r1
row2l2c2r2
row3l3c3r3

📖 이모지(Emoji)

  1. 링크에서 복사+붙여넣기: https://kr.piliapp.com/twitter-symbols/
  2. 단축키 이용:
    • windows: 윈도우 키 + 마침표(.)
    • mac: Command + Control + Space Bar

📖 체크박스(Check Box)

*, +, - 기호 뒤에 띄어쓰기 이후 대괄호[]를 넣어 작성한다.
띄어쓰기를 하면 체크되지 않은 상태이고,
x를 입력해주면 체크된 상태가 된다.

✍ 입력

- [ ] 체크되지 않은 박스
- [x] 체크된 박스

💻 출력

  • 체크되지 않은 박스
  • 체크된 박스

velog를 본격적으로 사용해보기 전에 문법을 공부할 겸 정리하는 글을 써 보았다.
혹여나 누군가가 글을 보게 된다면, 도움이 되면 좋겠다.

마크다운 문법을 정리하면서 참고한 사이트이다.
https://velog.io/@yuuuye/velog-마크다운MarkDown-작성법
https://daringfireball.net/projects/markdown/syntax

profile
정리하는 공간

89개의 댓글

comment-user-thumbnail
2021년 7월 25일

정말 필요하던 정보인데 잘 정리해주셔서 감사해요! 복 받으세요

1개의 답글
comment-user-thumbnail
2021년 7월 27일

정리가 아주 잘 되어 있네요 ㅎㅎ 정보 잘 보고 갑니다!

답글 달기
comment-user-thumbnail
2021년 8월 1일

잘 보고 갑니다!!! 감사합니다🧑

답글 달기
comment-user-thumbnail
2021년 8월 1일

벨로그가 다 좋은데 인라인 html을 지원 안해서 너무 아쉬워요ㅠㅠ

답글 달기
comment-user-thumbnail
2021년 8월 2일

<hr/> 써도 가로줄 만들 수 있어요!
이외에도 span태그에 색, 폰트 크기 등등 지정해서 좀 더 다양하게 벨로그 꾸밀수도 있고요

답글 달기
comment-user-thumbnail
2021년 8월 2일

정리를 아주 잘하시네요!!

답글 달기
comment-user-thumbnail
2021년 8월 2일

깔끔한 정리 리스펙합니다

답글 달기
comment-user-thumbnail
2021년 8월 3일

우와~ 정말 좋은 정보네요. 너무 감사합니다!

답글 달기
comment-user-thumbnail
2021년 8월 4일

정리된 글 잘 봤습니다!
혹시 듀얼 부팅으로 우분투 사용중인데
우분투에서 이모지 사용 방법 아실까요??

답글 달기
comment-user-thumbnail
2021년 8월 4일
답글 달기
comment-user-thumbnail
2021년 8월 27일

와! 사랑해요!

답글 달기
comment-user-thumbnail
2021년 10월 4일

많은 도움 받고 갑니다. 감사합니다.

답글 달기
comment-user-thumbnail
2021년 10월 7일

넘넘 감사합니당 ♥

답글 달기
comment-user-thumbnail
2021년 11월 29일

벨로그 초보인데 유익한 정보 감사드립니다

답글 달기
comment-user-thumbnail
2021년 11월 30일

👍따봉 감사합니다:D

답글 달기
comment-user-thumbnail
2021년 11월 30일

블로그 자체가 처음인데 정리해주신 정보로 배워가요! 감사합니다!! 😊

답글 달기
comment-user-thumbnail
2021년 12월 2일

정말 많은 정보 얻어갑니다. 감사합니다

답글 달기
comment-user-thumbnail
2021년 12월 29일

필요한 정보만 알기 쉽게 정리해주셨네요! 정말 감사합니다!

답글 달기
comment-user-thumbnail
2022년 1월 13일

감사합니다!! 많은 도움 됐습니다

답글 달기
comment-user-thumbnail
2022년 1월 19일

감사합니다!

답글 달기
comment-user-thumbnail
2022년 2월 8일

감사합니다.!

답글 달기
comment-user-thumbnail
2022년 2월 17일

좋은정보 얻어갑니다.

답글 달기
comment-user-thumbnail
2022년 2월 18일

정리 넘 깔끔하게 하셨네요:) 유용한 정보 잘 보고갑니다~

답글 달기
comment-user-thumbnail
2022년 2월 18일

잘 정리된 글 감사합니다.

답글 달기
comment-user-thumbnail
2022년 2월 24일

대박 좋은 글.

답글 달기
comment-user-thumbnail
2022년 3월 16일

감사합니다~

1개의 답글
comment-user-thumbnail
2022년 3월 20일

와,,, 엄청나요!

답글 달기
comment-user-thumbnail
2022년 3월 28일

덕분에 알아갑니다 ^^

답글 달기
comment-user-thumbnail
2022년 5월 9일

벨로그 입문하기 좋은 글입니다 정리해주셔서 감사합니다.

답글 달기
comment-user-thumbnail
2022년 5월 10일

감사합니다!!

답글 달기
comment-user-thumbnail
2022년 6월 23일

보기쉽게 정리해주셔서 감사합니다

답글 달기
comment-user-thumbnail
2022년 7월 13일

감사합니다. 많은 도움 받았습니다!

답글 달기
comment-user-thumbnail
2022년 7월 24일

오 튜토리얼! 감사합니다! 이런 정보 찾고 있었어요

답글 달기
comment-user-thumbnail
2022년 8월 9일

감사합니다!

1개의 답글
comment-user-thumbnail
2022년 8월 29일

안녕하세요! 정리가 너무 잘 되어서 그러는데, 제 velog에 링크 게시해도 괜찮을까요? 출처 꼭 남기겠습니다!

답글 달기
comment-user-thumbnail
2022년 9월 30일

벨로그 처음 시작했는데 조작하기 어렵네요 ㅠㅠ
많은 도움 얻고 갑니다 ㅎㅎ

답글 달기
comment-user-thumbnail
2022년 10월 27일

정리가 깔끔하니요

답글 달기
comment-user-thumbnail
2022년 11월 3일

도움이 됩니다.

답글 달기
comment-user-thumbnail
2022년 11월 5일

잘 보고 갑니다. 완전 깔끔해요

답글 달기
comment-user-thumbnail
2022년 11월 25일

리스풱

1개의 답글
comment-user-thumbnail
2022년 12월 3일

The article is really good. I found here looking for a good article because my heart was empty. There are a lot of different articles, so reading them makes me feel a bit empty. Next time I want to read an article about, please https://totomargin.com

답글 달기
comment-user-thumbnail
2022년 12월 8일

Wow Awesome!!
정말 너무 감사해요 ㅎ 대박!!

1개의 답글
comment-user-thumbnail
2022년 12월 18일

새로 시작하면서 궁금한게 많았는데 감사합니다!!

답글 달기
comment-user-thumbnail
2023년 1월 6일

정보 감사합니다.

답글 달기
comment-user-thumbnail
2023년 1월 8일

좋은 정보를 정리해주셔서 감사합니다 ~! 새해 복 많이 받으세요 !

답글 달기
comment-user-thumbnail
2023년 1월 9일

벨로그 마크다운을 사용하는 데 참고가 되었습니다 ! 감사합니다 :)

답글 달기
comment-user-thumbnail
2023년 1월 13일

네이버, 티스토리로만 작성하다 벨로그로 넘어가게 되었는데 이렇게 유익한 정보 감사합니다:)

답글 달기
comment-user-thumbnail
2023년 2월 2일

정리가 너무 잘돼있어요 참고할게요 감사합니다.

답글 달기
comment-user-thumbnail
2023년 2월 8일

킹갓어쩌구정리왕.. 많은도움받고 갑니다~!!!

답글 달기
comment-user-thumbnail
2023년 2월 9일

잘 보고 가요! 감사합니다!

답글 달기
comment-user-thumbnail
2023년 2월 19일

정리가 너무 예쁘게 잘 되어있어요 ㅠㅠㅠ 도움이 많이 되었습니다 감사해요!!

답글 달기
comment-user-thumbnail
2023년 2월 21일

감사합니다

답글 달기
comment-user-thumbnail
2023년 3월 2일

벨로그 입문자로서 이런 깔끔한 정리글은 크나큰 오예입니다^_^

답글 달기
comment-user-thumbnail
2023년 3월 10일

진짜 잘 활용하시네요 잘 보고 갑니당 :)

답글 달기
comment-user-thumbnail
2023년 3월 17일

감사합니다!!

답글 달기
comment-user-thumbnail
2023년 3월 29일

따봉추

답글 달기
comment-user-thumbnail
2023년 4월 5일

감사합니다. 유용하게 활용했습니다!!

이미지 삽입란에서 이미지들이 깨졌어요. 확인부탁드릴께요.

답글 달기
comment-user-thumbnail
2023년 4월 30일

와 진짜 필요했는데, 잘 정리된 정보 정말 잘 보고 갑니다. 감사합니다 !~

답글 달기
comment-user-thumbnail
2023년 5월 4일

오늘 막 첫 게시물을 써봤는데 묘하게 노션이랑 달라서 헷갈리더라고요
덕분에 쉽게 작성했습니다! 감사합니다!!

답글 달기
comment-user-thumbnail
2023년 5월 5일

특히 입출력을 바로 확인할 수 있어, 너무 큰 도움이 됐습니다.
익숙해질 때까지 자주 보러 올 것 같아요. 감사합니다!!

답글 달기
comment-user-thumbnail
2023년 6월 7일

벨로그 막 시작했는데 정리해주셔서 정말 감사합니다!!!

답글 달기
comment-user-thumbnail
2023년 6월 10일

덕분에 벨로그 사용법 잘 보고 갑니다~!

답글 달기
comment-user-thumbnail
2023년 6월 13일

잘 보고 갑니다 ! 도움이 많이 되었습니다 ㅎㅎ

답글 달기
comment-user-thumbnail
2023년 6월 17일

감사합니다! 정리가 너무 잘됐네요

답글 달기
comment-user-thumbnail
2023년 7월 22일

벨로그 처음 입문하기 좋은 글이네요. 유용한 정보 감사합니다~!

답글 달기
comment-user-thumbnail
2023년 8월 1일

테이블 정보 잘 봤습니다~!!

답글 달기
comment-user-thumbnail
2023년 8월 26일

정보 감사합니당! :)

답글 달기
comment-user-thumbnail
2023년 9월 5일

글 작성하는 데에 좋은 참고가 되었습니다! 마크다운 문법은 항상 헷갈리네요

답글 달기
comment-user-thumbnail
2023년 9월 18일

감사합니다! 도움이 많이 되었습니다 ㅎㅎ

답글 달기
comment-user-thumbnail
2023년 10월 21일

정리 잘 해주셔서 감사합니다!

답글 달기
comment-user-thumbnail
2023년 11월 8일

감사합니다 ㅎㅎ

답글 달기
comment-user-thumbnail
2023년 12월 13일

감사합니다 :)

답글 달기
comment-user-thumbnail
2023년 12월 14일

너무 깔끔하네요. 글 링크 남기고 싶은데 출처남기고 퍼가도 될까요?

답글 달기
comment-user-thumbnail
2023년 12월 21일

벨로그를 처음 써봐서 이렇게 정리된 자료가 필요했는데,,!! 감사드립니다~!

답글 달기
comment-user-thumbnail
2023년 12월 22일

벨로그 처음 써봐서 어려웠는데 많은 도움 되었습니다. 감사합니다!!😃

답글 달기
comment-user-thumbnail
2024년 1월 6일

필요한 정보를 정리해 주셔서 매우 감사드립니다!!

답글 달기
comment-user-thumbnail
2024년 1월 12일

감사합니다!

답글 달기
comment-user-thumbnail
2024년 2월 2일

감사합니다~~!! 따보옹

답글 달기
comment-user-thumbnail
2024년 2월 4일

잘 보고 갑니다!

답글 달기
comment-user-thumbnail
2024년 3월 18일

도움이 많이 되었습니다 ;)) 감사합니다!

답글 달기
comment-user-thumbnail
어제

감사합니다!

답글 달기