Velog | Markdown

블로그 이사 완료·2022년 9월 17일
Markdownvelog
0
post-thumbnail

시작하며,

Hi, there! 🙋🏻‍♂️

프론트엔드 개발자를 목표로 공부한지 몇 개월이 지나서야 처음으로 블로그를 작성해보고자 한다.

국내 개발자들이 많이 사용하는 공간으로 알아서 Velog(벨로그)를 나의 공간으로 선택했다.

Velog로 글을 작성하기에 앞서 Markdown(마크다운) 작성법을 정리해야 한다.

구글링만 해도 쉽게 나오는 작성법을 내 입맛에 맞게 다시 정리해서 저장해보려고 한다.

시작하기에 앞서 Velog는 글을 작성 할 때 input과 output을 동시에 볼 수 있어
아래의 요소들을 잘 사용하면 바로 출력을 확인 할 수 있어 편리하다.

[ Block Elements ]

Block Elements : 화면 가로 전체를 사용 하는 요소

📍제목(headers)

h1부터 h6을 이용해서 제목을 크기별로 표현할 수 있다.

📤 Input

#      h1 첫 번째 크기의 제목
##     h2 두 번째 크기의 제목
###    h3 세 번째 크기의 제목
####   h4 네 번째 크기의 제목
#####  h5 다섯 번째 크기의 제목
###### h6 여섯 번째 크기의 제목

📥 Output

h1 첫 번째 크기의 제목

h2 두 번째 크기의 제목

h3 세 번째 크기의 제목

h4 네 번째 크기의 제목

h5 다섯 번째 크기의 제목
h6 여섯 번째 크기의 제목

📍 인용(Blockquotes)

본문에서 인용된 내용을 표시하려면 > 기호를 사용한다.

📤 Input

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

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

📥 Output

1단

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

2단

중복해서 사용하면

3단

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

4단

계속 중첩할 수 있다

📍 리스트(lists)

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

📤 Input

* 별
+ 플러스
- 마이너스 모두 동일하게 출력된다.

📥 Output

  • 별
  • 플러스
  • 마이너스 모두 동일하게 출력된다.
    

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

📤 Input

1. one
2. two
6. three
3. four
4. five

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

📥 Output

  1. one
  2. two
  3. three
  4. four
  5. five
    

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

📤 Input

- 첫 번째 리스트

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

 이어지는 두 번째 문단

📥 Output

  • 첫 번째 리스트

    이어지는 두 번째 문단

  • 두 번째 리스트

    이어지는 두 번째 문단

📍 코드블럭(Code Blocks)

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

다만, 이전 문장으로부터 엔터를 두 번 입력해야만 가능하다. (이전 문장에서 Enter 2회 + Tab 1회 입력 후 작성)

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

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

📤 Input(C)

```c
#include <stdio.h>

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

	return 0;
}

📥 Output

#include <stdio.h>

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

	return 0;
}



📤 Input(Python)

```python
print("hello world")

📥 Output

print("hello world")



📤 Input(Java)

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

📥 Output

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

📍 가로 구분선

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

📤 Input

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

📥 Output



[ Span Elements ]

Span Elements : 요소가 가지고 있는 크기만 차지하는 요소

📍 링크 (Links)

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

  • 인라인 링크
  • URL 링크
  • 참조 링크

📤 Input

인라인 링크
[인라인 링크](https://velog.io/)

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

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

[velog]

📥 Output

인라인 링크
인라인 링크

url 링크
https://velog.io/

참조 링크

velog

📍이미지(Images)

이미지 삽입은 링크 삽입 방식과 유사하나, 코드 맨 앞에 !를 붙인다.

📤 Input

1. 일반 이미지 삽입하기: ![대체 텍스트](이미지 링크)
예시: ![Poster](https://i.pinimg.com/564x/7b/dc/c2/7bdcc20bc682f0562067be7eae8d0e55.jpg)

2. 이미지에 설명 삽입하기: ![대체 텍스트](이미지 링크 "이미지 설명 문구")
예시: ![Poster](https://i.pinimg.com/564x/7b/dc/c2/7bdcc20bc682f0562067be7eae8d0e55.jpg "Poster")
** 참고: 이미지에 마우스를 올렸을 때 나타나는 설명을 의미함

3. 이미지에 링크 걸기: [![대체 텍스트](이미지 링크)](연결할 url "url 설명 문구")
예시: [![Poster](https://i.pinimg.com/564x/65/a4/25/65a425b100037c6901e41301569f1765.jpg "Poster")

📥 Output

1) 일반 이미지 삽입하기: ![대체 텍스트](이미지 링크)
예시 :

2) 이미지에 툴팁 삽입하기: ![대체 텍스트](이미지 링크 "이미지 설명 문구")
예시 :

3) 이미지에 링크 걸기: [![대체 텍스트](이미지 링크)](연결할 url "url 설명 문구")
예시 :

📍 강조하기(Emphasis)

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

📤 Input

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

📥 Output

이탤릭
이탤릭
볼드
볼드
취소선

[ MISCELLANEOUS ]

📍기호 표시(Escapes)

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

📤 Input

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

📥 Output

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

📍표(Table)

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

📤 Input

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

📥 Output

leftcenterright
row1l1c1r1
row2l2c2r2
row3l3c3r3

📍이모지(Emoji)

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

📍체크박스(Check Box)

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

📤 Input

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

📥 Output

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

📍글자 색상(Font Color

HTML태그에 CSS 인라인 스타일을 적용하여 작성이 가능하다.

📤 Input

<span style="color:red">red</span>
<span style="color:#175839">#175839</span>
<span style="color:rgb(245, 235, 13)">rgb(245, 235, 13)</span>

📥 Output

red
#175839
rgb(245, 235, 13)



마무리,

Github 프로필의 Readme 작성 시 잠깐 접한 마크다운을 블로그를 시작하면서 이렇게 다시 공부하게 됐다.
다른 블로그를 보며 직접 하나하나 정리해가면서 작성을 하니 금방 적응 될 것 같다.

내용 구분 없이 나의 개발 취준기에 필요한 내용들은 전부 정리해볼 계획이다.



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

profile
블로그 이사 완료
https://kyledev.tistory.com/
다음 포스트

BOJ | #2557 "Hello Wolrd"

0개의 댓글