Velog 마크다운(MarkDown) 사용법

yo_onms·2022년 1월 23일
0
post-thumbnail

🤔마크다운이란

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

1.문단

문단과 문단 사이는 빈줄(엔터키 두번)로 구분한다.

✍ 마크다운

하나의 문단.

다른 문단.

📱 실행 결과

하나의 문단.

다른 문단.

2.제목(Headers)

h1~h6 제목 표현 가능

✍ 마크다운

# h1
## h2
### h3
#### h4
##### h5
###### h6

📱실행 결과

h1

h2

h3

h4

h5
h6

✋(잠깐)h1과 h2는 다른 방식으로 작성 가능합니다

=,-를 각각 2개 이상 사용하면 아래와 같이 h1,h2#을 대체 가능 합니다.

✍ 마크다운

h1
==
h2
--


하이픈을 여러 개 사용한 제목 
-------

📱 실행 결과

h1
==

h2
--

하이픈을 여러개 사용한 제목


3.목록

순서를 표기하는 목록 / 순서가 없는 목록 두 가지를 작성 할수 있습니다.

3.1 순서를 표기하는 목록(번호)

숫자.을 사용하여 작성합니다.

✍ 마크다운

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

📱 실행 결과

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

3.2 순서가 없는 목록(글머리 기호)

-,*,+을 사용하여 작성합니다(셋 다 동일하게 작성 됩니다.)

✍ 마크다운

- 글머리 기호 목록 1
    - 목록 1.1
        - 목록 1.2
- 글머리 기호 목록 2
		
        Tab 두번 하면 코드 블럭을 만들 수 있어요.
* 글머리 기호 목록 3
+ 글머리 기호 목록 4
	+ `인라인 코드 가능`
    	+ 들여쓰기(tab키 이용)를 하면 다른 모양으로 표현 됩니다.
        
        ``` 
		블럭 코드 가능

📱 실행 결과

  • 글머리 기호 목록 1
    • 목록 1.1
      • 목록 1.2
  • 글머리 기호 목록 2
      Tab 두번 하면 코드 블럭을 만들 수 있어요.
  • 글머리 기호 목록 3
  • 글머리 기호 목록 4
    + 인라인 코드 가능
    + 들여쓰기(tab키 이용)를 하면 다른 모양으로 표현 됩니다.
      ``` 
    		블럭 코드 가능

4. 폰트 스타일

굵기,기울기,취소선 등 기본적인 스타일을 아래와 같이 작성 가능합니다.

✍ 마크다운

__굵게__
**굵게**
_기울여 쓰기_
*기울여 쓰기*
~취소선~
~~취소선~~

📱 실행 결과

굵게
굵게
기울여 쓰기
기울여 쓰기
~취소선~
취소선

5.인용문

인용문을 작성할 때에는 (>)를 사용합니다.

✍ 마크다운

> 인용문 작성하기
-이것이 인용문이다.

> 인용문 작성하기
>> >의 갯수에 따라
>>> 중첩문 가능합니다.

📱 실행 결과

인용문 작성하기
-이것이 인용문이다.

인용문 작성하기

>의 갯수에 따라

중첩문 가능합니다.

6. 인라인 코드

백틱(`)을 사용하여 인라인 코드 작성 가능합니다.

✍ 마크다운

`이게 바로 인라인 코드`

📱 실행 결과

이게 바로 인라인 코드

7. 여러 줄로 된 코드 블럭

백틱(`)을 3개 사용하여 작성 가능합니다.

✍ 마크다운

```백틱을 위 아래로 감싸면 블럭이 생성이 됩니다.```

📱 실행 결과

위 아래로 감싸면 블럭이 생성이 됩니다.

✋(잠깐)코드 하이라이트를 넣고 싶은 경우 백틱 뒤에 언어 이름을 넣어주시면 됩니다.

✍ 마크다운


```javascript
let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);
``` 

```java
string HelloVelog = "hello velog";

System.out.println(HelloVelog);
``` 

📱 실행 결과

let HelloVelog = "hello velog";

console.log(HelloVelog);
string HelloVelog = "hello velog";

System.out.println(HelloVelog);

인라인 링크와 url 링크, 참조 링크로 나타낼 수 있습니다.

✍ 마크다운

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

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

📱 실행 결과

인라인 링크는 아래처럼
Velog

url 링크는 아래처럼
https://velog.io/

9.이미지 삽입

✍ 마크다운

![이미지 설명](이미지 링크)
![React image](https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg)

📱 실행 결과

✋(잠깐)이미지에 링크를 걸고 싶을 경우

✍ 마크다운


[![이미지 설명](이미지 링크)](연결하고자하는 url "마우스 오버 시 나타낼 링크 title")
[![React image]
(https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg)]
(https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"리액트 로고")

📱 실행 결과

마치며

velog를 사용하기전 마크다운을 작성해 보았습니다. 가장 기초적인 문법들중 자주 사용할꺼 같은 것들을 주관적으로 추려 테스트 해보았습니다. velog를 시작하시는 분들에게 도움이 되었으면 좋겠습니다🙂
감사합니다🙏

profile
프론트엔드 주니어 개발자

1개의 댓글

comment-user-thumbnail
2022년 1월 24일

와우 좋은 정보네요 ~ !

답글 달기