마크다운 튜토리얼

목차

---

1. Introduction
     1-1 마크다운 이란?
     1-2 마크다운의 특징?

 

2. 마크다운 기본문법
     2-1 제목(header)
     2-2 목록(Lists)
     2-3 강조(Emphasis)
     2-4 인용(Blockquotes)
     2-5 링크(Links)
     2-6 이미지(Images)
     2-7 코드 블록(Code Blocks)
     2-8 인라인 코드(Inline Code)
     2-9 가로줄(Horizontal Rule)
     2-10 테이블(Tables)
     2-11 줄바꿈(Line Breaks)
     2-12 체크리스트(check list)
     2-13 수식(modification)
     2-14 이스케이프(Escape)
3. 그 외에 html 태그 기능
     3-1 형광펜 효과
     3-2 폰트색상 변경
     3-3 폰트패밀리 변경
4. 알아두면 유용한 기능들
     4-1 단축키
     4-2 블로그 작성시 유용한 사이트

1-1 마크다운이란?

---

마크다운(Markdown)은 간단하고 가독성이 높은 문서를 작성하기 위한 경량 마크업 언어로 다양한 형식으로 텍스트를 표현하는 간단한 규칙으로 구성되어 있습니다.
예를 들어 제목, 목록, 강조, 링크, 이미지등을 간단한 문법만으로도 깔끔하고 보기 좋게 문서를 작성 할수 있으며, 이 문법들에 대해 이어지는 파트에서 하나씩 소개하겠습니다.

1-2 마크다운의 특징?

---

간편하고 가독성이 높음

코드를 간편하게 작성하고 표시할 수 있는 코드 블록 기능을 제공

이미지 및 링크 삽입가능

ol과 ul 사용가능

표를 만들기 쉽고 직관적으로 표현가능

인용문을 작성하여 중요한 내용을 강조할수있음

2. 마크다운 기본문법

---

2-1 제목(header)

---

마크다운에서 제목을 표현하는 방법으로는 # 과 == 또는 -- 을 사용하여 제목을 나타낼 수 있습니다.

1) '#' 의 용도 :

#의 개수로 제목의 수준을 표현할수 있으며 종류는 <h1> 부터 <h6> 까지 가능합니다.

사용법 : # + Spacebar + 작성할문장

입력 ➡

 

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

출력 ➡

h1 : 제목입니다.

h2 : 제목입니다.

h3 : 제목입니다.

h4 : 제목입니다.

h5 : 제목입니다.

h6 : 제목입니다.

2) '==' 과 '--' 의 용도 :

== 으로 <h1>을
-- 으로 <h2>를 표현할수 있습니다.

입력 ➡

 

h1
==
h2
--
여러줄 도 가능합니다 h1
==================================
여러줄 도 가능합니다 h2
----------------------------------

출력 ➡

 

h1 : 제목입니다.

h2 : 제목입니다.

h1 : 여러줄 도 가능합니다.

h2 : 여러줄 도 가능합니다.

2-2 목록(Lists)

---

목록작성시 순서가있는 목록(Ordered List)과
순서가 없는목록(Unordered List) 을 사용할수 있습니다.
tab 으로 들여쓰기를 할수 있으며,
velog에서는 순서가 없는목록(ul) 의 경우 indent 깊이에 따라 아이콘이 변경됩니다.

1) 순서가있는 목록(ol)

🟨 숫자 입력시 사용가능
🟨 입력한 숫자에 상관없이 자동으로 순서가 매겨짐
🟨 tab으로 들여쓰기 깊이 조절가능

사용법 : 숫자 + . + 작성할문장

입력 ➡

 

1. 목록1 : 입력한 숫자에 상관없이 자동으로 순서가 매겨집니다.
    1. 목록1-1 :  `tab` + `숫자` + `.` 으로 들여쓰기할수 있습니다.
    2. 목록1-2 :  `tab` + `숫자` + `.` 으로 들여쓰기할수 있습니다.
        1. 목록1-2-1 :  `tab` + `숫자` + `.` 으로 들여쓰기할수 있습니다.
            1. 목록1-2-1 :  `tab` + `숫자` + `.` 으로 들여쓰기할수 있습니다.
           5. 목록1-2-1 :  `tab` + `숫자` + `.` 으로 들여쓰기할수 있습니다.
2. 목록2 : 입력한 숫자에 상관없이 자동으로 순서가 매겨집니다.
107. 목록3 : 입력한 숫자에 상관없이 자동으로 순서가 매겨집니다.
    1. 목록1-1 :  `tab` + `숫자` + `.` 으로 들여쓰기할수 있습니다.
9. 목록4 : 입력한 숫자에 상관없이 자동으로 순서가 매겨집니다.
3. 목록5 : 입력한 숫자에 상관없이 자동으로 순서가 매겨집니다..

출력 ➡

 

1. 목록1 : 입력한 숫자에 상관없이 자동으로 순서가 매겨집니다.
   1. 목록1-1 : tab + 숫자 + . 으로 들여쓰기할수 있습니다.
   2. 목록1-2 : tab + 숫자 + . 으로 들여쓰기할수 있습니다.
      1. 목록1-2-1 : tab + 숫자 + . 으로 들여쓰기할수 있습니다.
         1. 목록1-2-1 : tab + 숫자 + . 으로 들여쓰기할수 있습니다.
            5. 목록1-2-1 : tab + 숫자 + . 으로 들여쓰기할수 있습니다.
2. 목록2 : 입력한 숫자에 상관없이 자동으로 순서가 매겨집니다.
3. 목록3 : 입력한 숫자에 상관없이 자동으로 순서가 매겨집니다.
   1. 목록1-1 : tab + 숫자 + . 으로 들여쓰기할수 있습니다.
4. 목록4 : 입력한 숫자에 상관없이 자동으로 순서가 매겨집니다.
5. 목록5 : 입력한 숫자에 상관없이 자동으로 순서가 매겨집니다.

2) 순서가없는 목록(ul)

🟨 + ,- , * 입력시 사용가능
🟨 Spacebar를 두번 누르면 깊이조절과 아이콘변경 가능

사용법 : + ,- , * 중1개 + Spacebar + 작성할문장

입력 ➡

 

+ 동아시아
  + 대한민국
    + 서울
    + 대구
    + 대전
    + 부산
  + 일본
    + 도쿄
    + 나고야
    + 교토
    + 오사카
  + 중국
    + 베이징
    + 하얼빈
    + 항저우
- 동물
   - 경우제목
     - 기린
     - 낙타
     - 범고래
   - 식육목
     - 사자
     - 고양이      
* 음료수
  * 탄산음료
    * 콜라
    * 사이다
  * 주스
    * 오렌지주스
    * 포도주스        

출력 ➡

 

• 동아시아
  • 대한민국
    • 서울
    • 대구
    • 대전
    • 부산
  • 일본
    • 도쿄
    • 나고야
    • 교토
    • 오사카
  • 중국
    • 베이징
    • 하얼빈
    • 항저우
• 동물
  • 경우제목
    • 기린
    • 낙타
    • 범고래
  • 식육목
    • 사자
    • 고양이
• 음료수
  • 탄산음료
    • 콜라
    • 사이다
  • 주스
    • 오렌지주스
    • 포도주스

2-3 강조(Emphasis)

---

* 또는 _ 로 텍스트를 감싸면 이탤릭체 또는 볼드체로 표현되며,
~~로 텍스트를 감싸면 취소선을 표현할수 있습니다.

일반 : Lorem ipsum dolor sit amet
이태릭체 : Lorem ipsum dolor sit amet
볼드체 : Lorem ipsum dolor sit amet

1) 볼드체

** 혹은 __ 를 문자 사이에 감싸면 볼드체로 표현됩니다.

사용법 : ** + 작성할문장 + **
                           or
            __ + 작성할문장 + __

입력 ➡

 

** 1볼드체입니다. **
__ 2볼드체입니다. __

출력 ➡

 

** 1볼드체입니다. **
__ 2볼드체입니다. __

2) 이태릭체

_를 문자 사이에 감싸면 볼드체로 표현됩니다.

사용법 : * + 작성할문장 + *
                           or
            _ + 작성할문장 + _

입력 ➡

 

*1이태릭체입니다*
_2이태릭체입니다._

출력 ➡

 

1이태릭체입니다
2이태릭체입니다.

3) 취소선

~~를 문자 사이에 감싸면 취소선으로 표현됩니다.

사용법 : ~~ + 작성할문장 + ~~
                           or
            ~~ + 작성할문장 + ~~

입력 ➡

 

~~취소선입니다.~~

출력 ➡

 

취소선입니다.

4) 문체비교

 

일반 : Lorem ipsum dolor sit amet
볼드 : Lorem ipsum dolor sit amet
이태릭 : Lorem ipsum dolor sit amet
취소선 :

Lorem ipsum dolor sit amet

이태릭+볼드 : Lorem ipsum dolor sit amet
취소선+볼드 :

Lorem ipsum dolor sit amet

취소선+이태릭 :

Lorem ipsum dolor sit amet

취소선+이태릭+볼드

Lorem ipsum dolor sittttttt amet

 

응용1 : 오늘은 귀찮으니 출근을 안해도

됩니다

아니오.. 안됩니다.
응용2 : 이 문서를 삭제 하면

됩니다

아니오.. 안됩니다.
응용3 : 말안듣는 아이에게는 매가 약입니다 아니오.. 안됩니다.
응용4 : 부지런한 개발자 는 매일 야근을 하면

됩니다

아니오.. 안됩니다.

살려줘..

2-4 인용(Blockquotes)

---

> 기호로 인용문을 생성할 수 있습니다.
> 기호를 여러번 사용하면 인용문을 중첩할수 있습니다.

사용법 : > + 작성할문장

입력 ➡

 

>> 인용문 블럭입니다.
>>>> 인용문 블럭 중첩입니다.
>>>>>>>>인용문 블럭 중첩입니다. 여러번 중첩 가능합니다.

출력 ➡

 

인용문 블럭입니다.

 

인용문 블럭 중첩입니다.

 

인용문 블럭 중첩입니다.
여러번 중첩 가능합니다.

2-5 링크(Links)

---

[링크 텍스트](URL) 형식으로 링크를 만들 수 있습니다.
또한 html태그로 직접 <a href="링크URL주소"> 와 같은 형태로 사용할수 있습니다.

사용법 : [링크 텍스트] + (링크URL주소) + 작성할문장
                           or
            <a href="링크URL주소"> + 작성할문장 +</a>

입력 ➡

 

방법1 마크다운문법
[네이버](http://www.naver.com) 로 이동하는 링크
[구글](http://google.com) 로 이동하는 링크
[다음](https://www.daum.net) 로 이동하는 링크
[쿠팡](https://www.coupang.com) 로 이동하는 링크
[깃허브](https://github.com) 로 이동하는 링크</br>
방법2 : html문법
<a href="www.nate.com">네이트</a> 로 이동하는 링크

출력 ➡

 

방법1 : 마크다운문법
네이버 로 이동하는 링크
구글 로 이동하는 링크
다음 로 이동하는 링크
쿠팡 로 이동하는 링크
깃허브 로 이동하는 링크
방법2 : html문법
네이트 로 이동하는 링크

2-6 이미지(Images)

---

![대체 텍스트](이미지_URL) 형식으로 이미지를 삽입할 수 있습니다.
링크에 형태에 앞에 !를 붙여 사용합니다.

사용법 : ![대체 텍스트] + (이미지_URL) + 작성할문장
                           or
            ![대체 텍스트] + (이미지파일경로.jpg) + 작성할문장
                           or
            <img src="링크URL주소" width="가로" height="세로"> + 작성할문장 +</a>

입력 ➡

 

방법1 마크다운문법
[로렘픽숨1](https://picsum.photos/250/250) 250 x 250 이미지
[로렘픽숨2](https://picsum.photos/600/800) 600 x 800 이미지
[로렘픽숨3](https://picsum.photos/1080/720) 1280 x 720 이미지 링크</br>
방법2 : html문법
<img src="https://picsum.photos/1920/1080" width="1920" height="1080">1920 x 1080 이미지</a>

출력 ➡

 

250 x 250 이미지 링크

640 x 480 이미지 링크

1280 x 720 이미지 링크
방법2 : html문법

1920 x 1080 이미지

 

 

응용1(이미지와 링크를 합치기) :

스택 오버플로 이미지링크

 

응용2(이미지와 링크를 합치기)

깃허브 이미지링크

2-7 코드 블록(Code Blocks)

---

한줄짜리 코드블록은 tab을 사용하여 작성할수 있습니다
여러줄의 코드블록은 백틱(``` 작성할 문장 ```) 세 개로 감싸면 코드 블록을 생성할수있습니다.
또한 백틱``` 뒤에 사용할 언어를 입력하면 코드를 하이라이트 할수 있습니다.

사용법 :

             한줄   &nbsp  :   tab + 작성할 문장
              여러줄   :   ``` + 작성할 문장 + ```

입력 ➡

 

백틱 내부에 한줄의문장을 작성합니다.
➡ console.log("Hello World!")  

\``` java
백틱 내부에 여러줄의문장을 작성합니다.(백틱 뒤에 언어를 입력하면 하이라이트 가능)
➡ 
public class HelloWorld
{ 
    public static void main(String[] args) 
    {
        // print `Hello World`
        System.out.println("Hello World!");
    }
}
\```

출력 ➡

 

백틱 내부에 한줄의문장을 작성합니다.
➡ console.log("Hello World!")  

백틱 내부에 여러줄의문장을 작성합니다.(백틱 뒤에 언어를 입력하면 하이라이트 가능)
➡ 
public class HelloWorld
{ 
    public static void main(String[] args)
    {
        // print `Hello World`
        System.out.println("Hello World!");
    }
}

2-8 인라인 코드(Inline Code)

---

` (백틱)을 문장 안에 감싸면 인라인 코드로 사용됩니다.
일반적으로 변수명이나 함수명과 같이 짧은 코드 조각을 표현할 때 사용합니다.

사용법 : ` + 작성할 문장 + `

입력 ➡

 

`print("Hello World!")`

출력 ➡

 

print("Hello World!")

2-9 가로줄(Horizontal Rule)

---

세 개의 하이픈 --- 으로 가로줄을 만듭니다.

사용법 : ---

입력 ➡

 

>
--------------------------
#### 챕터 1 CREATE문 으로 테이블 생성
##### 1) 회원테이블을 생성해보자 
CREATE문 : 
CREATE TABLE users
(
user_seq INT PRIMARY KEY AUTO_INCREMENT NOT NULL,
user_id VARCHAR(20) NOT NULL,
user_pw VARCHAR(20) NOT NULL,
user_email VARCHAR(20) NOT NULL
);
> 
--------------------------
#### 챕터 2 DROP문 으로 테이블을 삭제
##### 1) 회원테이블을 삭제해보자 
DROP문:
DROP TABLE users;
>
--------------------------
#### 챕터 3 ALTER문 으로 테이블을 추가
##### 1) 회원테이블에 컬럼을 추가해보자 
ALTER문:
ALTER TABLE users ADD user_phone VARCHAR(13);
>
--------------------------
.
.
.
.
>
--------------------------

출력 ➡

 

---

챕터 1 CREATE문 으로 테이블 생성

1) 회원테이블을 생성해보자

CREATE문 :
CREATE TABLE users
(
user_seq INT PRIMARY KEY AUTO_INCREMENT NOT NULL,
user_id VARCHAR(20) NOT NULL,
user_pw VARCHAR(20) NOT NULL,
user_email VARCHAR(20) NOT NULL
);

 

---

챕터 2 DROP문 으로 테이블을 삭제

1) 회원테이블을 삭제해보자

DROP문:
DROP TABLE users;

 

---

챕터 3 ALTER문 으로 테이블을 추가

1) 회원테이블에 컬럼을 추가해보자

ALTER ADD 문:
ALTER TABLE users ADD user_phone VARCHAR(13);

 

---

.
.
.
.

 

---

2-10 테이블(Tables)

---

파이프 | 와 하이픈 - 을 사용하여 테이블을 생성합니다.

사용법 : ``` + 작성할 문장 + ```

입력 ➡

 

>
#### 구구단
>
|  X  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |
|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|
|  1  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |
|  2  |  2  |  4  |  6  |  8  | 10  | 12  | 14  | 16  | 18  |
|  3  |  3  |  6  |  9  | 12  | 15  | 18  | 21  | 24  | 27  |
|  4  |  4  |  8  | 12  | 16  | 20  | 24  | 28  | 32  | 36  |
|  5  |  5  | 10  | 15  | 20  | 25  | 30  | 35  | 40  | 45  |
|  6  |  6  | 12  | 18  | 24  | 30  | 36  | 42  | 48  | 54  |
|  7  |  7  | 14  | 21  | 28  | 35  | 42  | 49  | 56  | 63  |
|  8  |  8  | 16  | 24  | 32  | 40  | 48  | 56  | 64  | 72  |
|  9  |  9  | 18  | 27  | 36  | 45  | 54  | 63  | 72  | 81  |

출력 ➡

 

구구단

 

X	1	2	3	4	5	6	7	8	9
1	1	2	3	4	5	6	7	8	9
2	2	4	6	8	10	12	14	16	18
3	3	6	9	12	15	18	21	24	27
4	4	8	12	16	20	24	28	32	36
5	5	10	15	20	25	30	35	40	45
6	6	12	18	24	30	36	42	48	54
7	7	14	21	28	35	42	49	56	63
8	8	16	24	32	40	48	56	64	72
9	9	18	27	36	45	54	63	72	81

2-11 줄바꿈(Line Breaks)

---

<br> 태그를 사용하면 줄바꿈을 할수 있습니다.

사용법 : 첫 번째 문장 + </br> + 두 번째 문장

입력 ➡

 

lorem ipsum dolor sit amet </br> consectetur adipiscing elit
</br>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

출력 ➡

 

lorem ipsum dolor sit amet consectetur adipiscing elit

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

2-12 체크리스트(check list)

---

- [ ] (괄호 안에 공백)으로 텅빈 체크박스를 생성할수 있으며
- [x] (괄호 안에 "x")으로 체크된 체크박스를 생성할수 있다

사용법 : -,+,* + [ ] + 작성할문장
                       or
            - [x] + 작성할문장

입력 ➡

 

- [x] 대체로 버그를 해결하는데 시간을 많이 사용한다
- [x] 다크모드를 사용하는것을 선호한다.
- [x] 스택오버플로에서 코드를 자주 베껴쓴다.
- [x] 테스트 문자는 언제나 `Hello World`이다.
- [ ] 테스트 문자는 언제나 `Lorem ipsum dolor sit amet consectetuer` 이다.
- [x] 코딩할때보다 이름짓기가 더 힘들다.
- [ ] 코딩테스트 알고리즘 따위 두렵지 않다.
- [x] 오전에 작업하기 보다 오후에 작업하는것이 더 잘된다.
- [ ] 거의 매일 야근을 한다.
- [x] 오늘도 나는 `이게 왜 돼지?` 를 연발하는중이다.

출력 ➡

 

• 대체로 버그를 해결하는데 시간을 많이 사용한다
• 다크모드를 사용하는것을 선호한다.
• 스택오버플로에서 코드를 자주 베껴쓴다.
• 테스트 문자는 언제나 Hello World이다.
• 테스트 문자는 언제나 Lorem ipsum dolor sit amet consectetuer 이다.
• 코딩할때보다 이름짓기가 더 힘들다.
• 코딩테스트 알고리즘 따위 두렵지 않다.
• 오전에 작업하기 보다 오후에 작업하는것이 더 잘된다.
• 거의 매일 야근을 한다.
• 오늘도 나는 이게 왜 돼지? 를 연발하는중이다.

2-11 수식(modification)

---

$$를 문장 안에 감싸면 수식을 표현할 수 있습니다.

사용법 : $$ + 작성할수식

입력 ➡

 

\$$
\begin{bmatrix}a & b \\ c & d \end{bmatrix} * 
\begin{bmatrix}a & b \\ c & d \end{bmatrix} = 
\begin{bmatrix}a^2 + bc & ab+bd \\ 
ac+cd & bc+d^2 \end{bmatrix}
\$$

출력 ➡

예시1

$$
\begin{bmatrix}a & b \ c & d \end{bmatrix} *
\begin{bmatrix}a & b \ c & d \end{bmatrix} =
\begin{bmatrix}a^2 + bc & ab+bd \
ac+cd & bc+d^2 \end{bmatrix}
$$

$$
\displaystyle\sum_{i=1}^{k+1}i
\displaystyle \displaystyle= \left(\sum_{i=1}^{k}i\right)
+(k+1)
$$

2-14 이스케이프(Escape)

---

백슬래시 \ 를 사용하여 마크다운 문법에서 사용되는 특수문자를 텍스트로 표현할 수 있습니다.

사용법 : \ + 특수문자

입력 ➡

 

\\특수문자사용1
\`특수문자사용2`
\#특수문자사용3

출력 ➡

 

\특수문자
`특수문자사용2`
#특수문자사용3

3. 그 외에 html 태그 기능

---

---

3-1 형광펜 효과

---

<span> 태그의 style="" 옵션을 사용하여 형광펜 효과를 줄수도 있습니다.

사용법 : <span style='background-color: #d3d3d3'>+ 작성할 문장 + </span>

입력 ➡

 

<span style='background-color: red'> 빨간색 </span>
<span style='background-color: orange'> 주황색 </span>
<span style='background-color: yellow'> 노랑색 </span>
<span style='background-color: green'> 초록색 </span>
<span style='background-color: blue'> 파랑색 </span>
<span style='background-color: navy'> 남색 </span>
<span style='background-color: purple'> 보라색 </span>
<span style='background-color: #e2e6ee'> 색깔지정1 </span>
<span style='background-color: #f022'> 색깔지정2 </span>
<span style='background-color: #f1cce6e'> 색깔지정3 </span>
<span style="background-color:rgb(245, 235, 13)">RGB</span>

출력 ➡

 

빨간색
주황색
노랑색
초록색
보라색
색깔지정1
색깔지정2
색깔지정3
RGB

3-3 폰트색상 변경

---

<span> 태그의 style="" 옵션을 사용하여 폰트색상을 바꿀수도 있습니다.

사용법 : <span style='color: #d3d3d3'>+ 작성할 문장 + </span>

입력 ➡

 

<span style='background-color: red'> 파란색 </span>

출력 ➡

 

파란색

 

응용 : 남색 +흰색

3-4 폰트패밀리 변경

---

<span> 태그의 style="" 옵션을 사용하여 폰트패밀리 및 폰트 굵기를 변경할수 있습니다.

사용법 : <span style='font-family: cursive'>+ 작성할 문장 + </span>

입력 ➡

 

<span style="font-family: cursive;">폰트1 : cursive</span>
<span style="font-weight: bolder;">폰트1 : cursive</span>

출력 ➡

 

폰트1 : cursive

4. 알아두면 유용한 기능들

---

---

4-1 단축키

---

• 새 창 열기 : Ctrl + n
• 현재 창 닫기 : Ctrl + Shift + w
• 새탭 열기 : Ctrl + t
• 이전 탭 열기 : Ctrl + Shift + t
• 현재탭 닫기 : Ctrl + w
• 탭 우측으로 이동 : Ctrl + Tab
• 탭 좌측으로 이동 : Ctrl + Shift + Tab
• 개발자 도구 열기 : F12
• 새 탭에서 방문 기록 페이지 열기 : Ctrl + h
• 새 탭에서 다운로드 페이지 열기 : Ctrl + j
• 탭을 왼쪽으로 이동 : Ctrl + Shift + PgUp
• 탭을 오른쪽으로 이동 : Ctrl + Shift + PgDown
• 웹페이지와 화면을 한 번에 아래로 스크롤 : Spacebar
• 웹페이지와 화면을 한 번에 위로 스크롤 : Shift + Spacebar
• 이모지 : 윈도우 키 + 마침표(.)
• 바탕화면 바로가기(모든창 최소화) : 윈도우키 + D

4-2 글 작성시 유용한 이모지 사이트

---

• 이모지 사이트1 : https://snskeyboard.com/asciiart/
• 이모지 사이트2 : https://www.emojiall.com/ko (추천)