Velog의 MarkDown 튜토리얼(Tutorial)

Delight Yoon·2022년 8월 24일
3

Velog

목록 보기
2/3
post-thumbnail

❗ 글을 작성하려면 일단 MarkDown부터 공부해야 한다.

MarkDown 언어를 공부하면서 느꼈는데 옛날에 html 공부했던 생각이 난다. 좀 유사한 느낌(?)이 든다.

📌 MarkDown ?

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

위키백과에 있는 MarkDown 언어의 정의이다.

📌 MarkDown 문법

1. 제목(Header)

H1 ~ H6 까지 있다.
#의 개수가 적을 수록 제목의 크기가 크다.

# 가장 큰 제목
## 2번째로 ...
### 3번째로 ...
...
###### 가장 작은 제목

글을 작성할 때, 위에 간편 툴바에서 H1 ~ H4를 눌러 사용할 수 있다. H5, H6은 직접 #을 입력해줘야 할 것 같다.

2. 인용문

> 를 사용하여 인용문을 작성할 수 있다.

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

글에서는 다음과 같이 보인다.

인용문 1

인용문 2

인용문 3

3. 강조

1. bold(굵게)

글자를 강조하기 위해 굵게할 때 사용한다.
**내용** 또는 __내용__ 를 사용.

**bold1**
__bold2__

글에서는 다음과 같이 보인다.

bold1
bold2

2. italic(기울어진)

글자를 강조하기 위해 기울어져 보이게할 때 사용한다.
*내용* 또는 _내용_ 를 사용.

*italic1*
_italic2_

글에서는 다음과 같이 보인다.

italic1
italic2

BoldItalic 글씨체는 글을 작성할 때, 위에 간편 툴바에서 BI를 눌러 사용할 수 있다.

4. 목록

1. 순서가 있는 목록

1. 첫 번째
2. 두 번째
3. 세 번째
  1. 첫 번째
  2. 두 번째
  3. 세 번째
1. 첫 번째
1. 두 번째
1. 세 번째

다음과 같이 번호를 똑같이 입력해도, 순서대로 번호가 매겨진다.

  1. 첫 번째
  2. 두 번째
  3. 세 번째

2. 순서가 없는 목록

항목 앞에 -, +, *를 입력하면 된다.

* 첫 번째
* 두 번째
* 세 번째

위와 같이 입력하면, 다음과 같이 글에서 보이게 된다.

  • 첫 번째
  • 두 번째
  • 세 번째

기호를 혼합 하여 사용해도 된다.

* 첫 번째
- 두 번째
+ 세 번째

위와 같이 입력하면, 다음과 같이 글에서 보이게 된다.

  • 첫 번째
  • 두 번째
  • 세 번째


하위 리스트의 경우 여백(space bar) 세 칸으로 구분한다.

* 첫 번째
   - 두 번째
      + 세 번째
      

마찬가지로 혼합하여 사용해도 괜찮다.
다음과 같이 보인다.

  • 첫 번째
    • 두 번째
      • 세 번째

5. 수평선

*, -, _ 를 3개 이상 적으면 수평선이 된다.

* * *
***
*****
- - -
-----

다음과 같이 보인다.






6. 링크

1. 인라인 링크

[링크제목](https://www.예시.com)

[구글](https://www.google.com)

실행결과 :
링크제목
구글

2. url 링크

<https://www.예시.com>

<https://www.google.com>

실행결과 :
https://www.예시.com
https://www.google.com

7. 코드블럭

`````` 또는 ~~~~~~으로 코드를 둘러싸서 코드블럭을 생성할 수 있다.
시작되는 ```~~~ 에서 프로그래밍 언어 이름을 작성할 수 있다.

```python
for i in range(5) :
	print(i)
```

```kotlin
fun main() {
	for( i in 1..5 )  {
    	println(i)
    }
}
```

``` 대신 ~~~를 사용해도 된다.

~~~python
for i in range(5) :
	print(i)
~~~

~~~kotlin
fun main() {
	for( i in 1..5 )  {
    	println(i)
    }
}
~~~

실행결과 :

    for i in range(5) :
    	print(i)
    fun main() {
    	for( i in 1..5 )  {
        	println(i)
        }
    }

8. 이미지

1. 이미지 삽입

![이미지 설명](이미지 링크)
![고양이입니다](고양이 이미지 주소)

실행결과 :

2. 이미지 링크

만약, 이미지에 링크를 걸어서 이미지 클릭 시 이미지 링크로 이동하게 하려면 다음과 같이 작성합니다.

[![이미지 설명](이미지 링크)](연결하고자하는 url "마우스 오버 시 나타낼 링크 제목")
[ ![고양이입니다](고양이 이미지 주소"고양이입니다")

실행결과 :

3. 크기(너비, 높이)를 지정한 이미지 삽입

<img src="이미지 주소" height="높이수치값px" width="너비수치값px">
<img src = "고양이 이미지 주소" height = "500px" width = "600px" >

다음과 같은 형식을 통해 크기를 지정한 이미지를 삽입할 수 있다.

실행결과 :

9. 테이블

테이블은 아래와 같이 작성합니다.

Shift + \ 로 생성된 |로 구분합니다.
- (하이픈) 을 사용하여 칼럼명레코드를 구분합니다.
- (하이픈) :(클론)을 사용하여 정렬 방법을 지정할 수 있습니다.

--- : 기본정렬
:---: : 가운데 정렬
:--- : 왼쪽 정렬
---: : 오른쪽 정렬

| 제목 | 제목 | 제목 |
| :--- | :---: | ---: |
| 내용 | 내용 | 내용 |
| 내용 | 내용 | 내용 |

| 드라마 제목 | 주연 배우 | 방영일 |
|:----------:|:----------:|:----------|
| **호텔 델루나** | 이지은, 여진구 | ~~2019.07.13 ~ 2019.09.01~~ |
| 타인은 지옥이다 | 임시완, 이동욱, 이현욱, 이정은 | 2019.08.31 ~ |
| 멜로가 체질 | 천우희, 안재홍, 전여빈, 공명 | 2019.08.09 ~ |

실행결과 :

제목제목제목
내용내용내용
내용내용내용

드라마 제목주연 배우방영일
호텔 델루나이지은, 여진구2019.07.13 ~ 2019.09.01
타인은 지옥이다임시완, 이동욱, 이현욱, 이정은2019.08.31 ~
멜로가 체질천우희, 안재홍, 전여빈, 공명2019.08.09 ~

10. 이모지 😀

1. 운영체제 내장 이모지

Mac OS : control + command + space bar
Windows OS : windows key + .

2. 트위터 이모지

트위터 이모지 링크

📌 참조

profile
Yoon's Dev Blog

0개의 댓글