1. 마크다운(Markdown)이란?

텍스트 기반의 마크업 언어의 일종으로, 2004년 존 그루버에 의해 만들어졌다. 특수기호와 문자를 이용한 간단한 구조와 문법으로 빠르게 컨텐츠를 작성 할 수 있고 HTML로 변환이 가능하다. 대표적으로 깃허브(GItHub)의 저장소 Repository에 관한 정보를 기록하는 README.md가 있으며 이외에도 티스토리, 벨로그, 워드프레스 등 다양한 플랫폼에서 사용되고 있다.

1-1. 마크다운의 장점

1) 문장이 간결하고 쉽다.
2) 별도의 도구없이 작성이 가능하다.
3) 텍스트로 저장되기 때문에 용량이 적어 보관이 용이하다.
4) 다양한 프로그램과 플랫폼에서 지원한다.

1-2. 마크다운의 단점

1) 표준이 없어서 도구에 따라 변환방식이나 결과물이 달라질 수 있다.
2) 모든 HTML 마크업을 대신하지 못한다.
3) 미디어 파일(사진, 동영상 등) 업로드의 경우 파일의 주소가 있어야한다.

2. 마크다운(Markdown) 문법

2-1. 제목(Header)

1) #뒤에 띄어쓰기 한 칸을 넣고 내용을 작성한다.
2) h1 ~ h6까지의 제목을 표현할 수 있다.

# 제목1 입니다.(H1)
## 제목2 입니다.(H2)
### 제목3 입니다.(H3)
#### 제목4 입니다.(H4)
##### 제목5 입니다.(H5)
###### 제목6 입니다.(H6)

3) 제목1(h1)과 제목2(h2)는 다음과 같이 표현 가능하다.

제목1 입니다.(H1)
=================
제목2 입니다.(H2)
-----------------

2-2. 줄바꿈(Line Breaks)

1) 3칸 이상 띄어쓰기 혹은 <br/>을 사용한다.
개인적으로 티스토리 블로그의 경우 3칸 이상의 띄어쓰기가 줄바꿈 적용이 안되는 경우가 있어 <br/>을 선호하는 편이다.

줄바꿈을 하는 2가지 방법이 있다. 첫번째는 띄어쓰기를 3번 이상하는 것,
두번째는 <br/>을 사용 하는 것입니다.

줄바꿈을 하는 2가지 방법이 있다. 첫번째는 띄어쓰기를 3번 이상하는 것,     <!-- 띄어쓰기 3번 이상 -->
두번째는 <br/>을 사용 하는 것입니다.

줄바꿈을 하는 2가지 방법이 있다. 첫번째는 띄어쓰기를 3번 이상하는 것, 두번째는 <br/>을 사용 하는 것입니다.

줄바꿈을 하는 2가지 방법이 있다. 첫번째는 띄어쓰기를 3번 이상하는 것,
두번째는 <br/>을 사용 하는 것입니다.

2-3. 인용문(BlockQuote)

1) > 블럭 인용 문자를 사용하여 표현 가능하다.
2) 인용문을 중첩하여 사용할 수 있다.

> 이것은 인용문입니다.
>> 이것은 인용문입니다.
>>> 이것은 인용문입니다.

이것은 인용문입니다.

이것은 인용문입니다.

이것은 인용문입니다.

3) 인용문 안에 다른 요소를 넣어서 사용할 수 있다.

> 이것은 인용문입니다.
> - 이것은 인용문입니다.
> ```이것은 인용문입니다.```

이것은 인용문입니다.

이것은 인용문입니다.
이것은 인용문입니다.

2-4. 강조(Emphasis)

*single asterisks 이텔릭체*
_single asterisks 이텔릭체_
**double asterisks 볼드체**
__double asterisks 볼드체__
~~cancelline 취소선~~
<u>underline 밑줄</u>

single asterisks 이텔릭체
single asterisks 이텔릭체
double asterisks 볼드체
double asterisks 볼드체
~~cancelline 취소선~~
underline 밑줄

<u>*혼합*</u>해서 ~~*사용*~~ 할 수 있습니다.

혼합해서 사용 할 수 있습니다.

2-5. 수평선(Horizontal Rule) `<hr/>`

1) 가시적으로 페이지를 나누는 용도로 많이 사용된다.
2) - 또는 * 또는 _ 을 3개 이상 작성하면 된다.
단, - 의 경우 텍스트 바로 밑에 사용하면 header(제목)으로 인식하기 때문에 줄바꿈을 한 번 더 하는 등 주의가 필요하다.

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

2-6. 목록(List)

1. 순서가 없는 목록(Unordered List)

1) *, +, - 를 이용하여 순서가 없는 목록을 만들 수 있다.
2) 들여쓰기를 하면 모양이 바뀐다.

* 빨강
    * 주황
        * 노랑

+ 빨강
    + 주황
        + 노랑

- 빨강
    - 주황
        - 노랑

빨강
- 주황
  - 노랑
빨강
- 주황
  - 노랑
빨강
- 주황
  - 노랑

3) 기호를 혼합해서 사용할 수 있다.

* 빨강
    + 주황
        - 노랑

빨강
- 주황
  - 노랑

2. 순서가 있는 목록(Ordered List)

1) 숫자와 점을 이용하여 순서가 있는 목록을 만들 수 있다.
2) 들여쓰기를 하면 모양이 바뀐다.

1. 1번째 목록
    1. 1-1번째 목록
    2. 1-2번째 목록
2. 2번째 목록
3. 3번째 목록
    1. 3-1번째 목록

1번째 목록
1. 1-1번째 목록
2. 1-2번째 목록
2번째 목록
3번째 목록
1. 3-1번째 목록

3) 어떤 번호를 입력해도 순서는 내림차순으로 정의된다.

1. 1번째 목록
10. 10번째 목록
5. 5번째 목록

1번째 목록
10번째 목록
5번째 목록

3. 혼합 목록

1) 숫자와 *, +, - 를 이용해서 혼합하여 사용할 수 있다.

1. 1번째 목록
    1. 무지개
        * 빨주노초파남보
        - 대기 중 수증기에 의해 태양광선이 굴절, 반사, 분산되면서 나타나는 기상학적 현상 
2. 2번째 목록
    + 색상 코드
        1. RGB 값
        2. HSB 값
        3. CMYK 값
    - 빛의 삼원색

1번째 목록
1. 무지개
  - 빨주노초파남보
  - 대기 중 수증기에 의해 태양광선이 굴절, 반사, 분산되면서 나타나는 기상학적 현상
2번째 목록
- 색상 코드
  1. RGB 값
  2. HSB 값
  3. CMYK 값
- 빛의 삼원색

2-7. 코드(Code)

1. 인라인(inline) 코드

1) ` (Grave) 문자를 텍스트 앞뒤로 감싸서 강조할 수 있다.

`간단한 코드`는 이렇게 내용을 감싸서 강조할 수 있다.

간단한 코드는 이렇게 내용을 감싸서 강조할 수 있다.

2. 블럭(Block) 코드

1) <pre><code>{code}</code></pre> 를 이용한 방식

<pre><code>
public class TestClass() {
    public static void main(String[] args) {
        System.out.println("Hello, JAVA world");
    }
}
</code></pre>


public class TestClass() {
    public static void main(String[] args) {
        System.out.println("Hello, JAVA world");
    }
}

2) ``` 를 이용한 방식

``` 옆에 언어를 지정하면 문법강조(Syntax highlighting)가 가능하다.

```java
public class TestClass() {
    public static void main(String[] args) {
        System.out.println("Hello, JAVA world");
    }
}
```

public class TestClass() {
    public static void main(String[] args) {
        System.out.println("Hello, JAVA world");
    }
}

2-8. 링크(Link)

1. 외부링크

1) 사용 방법

[Title](URL)

2) 사용 예시

[이곳을 누르면 네이버로 이동합니다](https://www.naver.com/)

[이곳을 누르면 구글로 이동합니다](https://www.google.com/)

이곳을 누르면 네이버로 이동합니다

이곳을 누르면 구글로 이동합니다

2. 참조링크

1) 사용 방법

마우스를 올리면 Optional Title Here에 입력한 내용이 보인다.

[Title Keyword][ID]

[ID]: URL "Optional Title Here"

2) 사용 예시

[Google][GoogleLink]

[GoogleLink]: https://www.google.com/ "이곳을 누르면 구글로 이동합니다."

Google

3. 자동연결

1) 문서 내 일반 URL이나 꺾쇠 괄호(< >) 안의 URL은 자동으로 링크를 형성한다.
2) 사용 예시

네이버 : https://www.naver.com/
구글 : <https://www.google.com/>
이메일 : example@example.com

네이버 : https://www.naver.com/
구글 : https://www.google.com/
이메일 : example@example.com

2-9. 이미지(Image)

1. 기본문법

1) 사용 방법

마우스를 올리면 Optional Title Here에 입력한 내용이 보인다.

![Alt text](Image Link "Optional Title Here")

2. 참조링크 이미지

1) 사용 방법

마우스를 올리면 Optional Title Here에 입력한 내용이 보인다.

![Alt text][ID]

[ID]: Image Link "Optional Title Here"

3. 이미지와 링크 동시에 사용(이미지를 링크로 사용)

1) 사용 방법

[![Alt text](Image Link)](URL Link)

4. 태그를 이용한 이미지

1) 사용 방법

태그를 이용하면 이미지의 사이즈를 조절할 수 있다.
이미지에 마우스를 올리면 title에 입력한 내용이 보인다.

<img src="Image Link" width="width Size" height="height Size" title="Optional Title" alt="alt text"></img>

2-10. 체크 리스트(Check List)

1) 줄 앞에 - [ ], - [x] 를 사용하여 체크 리스트를 나타낼 수 있다.

- [ ] 미완료된 체크 리스트
- [x] 완료된 체크 리스트

미완료된 체크 리스트
완료된 체크 리스트

2) 체크 리스트 안에서 강조 외 다양한 기능을 사용할 수 있다.

- [ ] <u>다양한 기능</u>을 **사용**할 수 있다
- [x] [Link](), `Code Block` end etc

다양한 기능을 사용할 수 있다
Link, Code Block end etc

2-11. 표(Table)

1) | (Vertical Bar) 기호를 통해 표를 표현할 수 있다.
2) 가장 끝에 있는 좌측, 우측 | 기호는 생략 가능하다.
3) 헤더와 셀을 구분할 때 3개 이상의 - (Hyphen/Dash) 기호가 필요하다
4) 헤더와 셀을 구분하면서 : (Colon) 기호로 셀(열/칸) 안의 내용을 정렬할 수 있다.

|헤더1|헤더2|헤더3|헤더4|
|---|---|---|---|
|셀1|셀2|셀3|셀4|
|셀5|셀6|셀7|셀8|
|셀9|셀10|셀11|셀12|

왼쪽 정렬|가운데 정렬|오른쪽 정렬
:--|:--:|--:
셀1|셀2|셀3
셀4|셀5|셀6
셀7|셀8|셀9

헤더1	헤더2	헤더3	헤더4
셀1	셀2	셀3	셀4
셀5	셀6	셀7	셀8
셀9	셀10	셀11	셀12

왼쪽 정렬	가운데 정렬	오른쪽 정렬
셀1	셀2	셀3
셀4	셀5	셀6
셀7	셀8	셀9

2-12. 각주(Footnote)

1. 기본문법

1) Github 스타일의 마크다운에서는 각주 기능을 제공하지 않는다.

마크다운의 각주입니다[^id]

<!-- 글 뒷부분에 작성 -->
[^id]: 각주에 대한 설명

2. HTML을 이용한 각주

1) Github 스타일의 마크다운에서도 적용 가능하다.

HTML을 이용하여 각주를 달 수 있다.<sup>[1](#id_1)</sup>
각주에 대한 참고 링크<sup>[2](#id_2)</sup>

<!-- 글 뒷부분에 작성 -->
<a name="id_1">1</a>: 각주에 대한 설명
<a name="id_2">2</a>: https://lynmp.com/ko/article/nu86c16d8f09c9fbd8

HTML을 이용하여 각주를 달 수 있다.¹
각주에 대한 참고 링크²

ㅇ 각주
1: 각주에 대한 설명
2: https://lynmp.com/ko/article/nu86c16d8f09c9fbd8

티스토리에 TOC(자동 목차) 적용하기 (0)	2023.01.21
티스토리에 Github 스타일 마크다운(Markdown) 적용하기 (0)	2022.11.30
Day 0. 기록의 시작 (0)	2022.10.29

얼레벌레 굴러가는 기록장

마크다운(Markdown) 사용법

1. 마크다운(Markdown)이란?

1-1. 마크다운의 장점

1-2. 마크다운의 단점

2. 마크다운(Markdown) 문법

2-1. 제목(Header)

2-2. 줄바꿈(Line Breaks)

2-3. 인용문(BlockQuote)

2-4. 강조(Emphasis)

2-5. 수평선(Horizontal Rule) `<hr/>`

2-6. 목록(List)

1. 순서가 없는 목록(Unordered List)

2. 순서가 있는 목록(Ordered List)

3. 혼합 목록

2-7. 코드(Code)

1. 인라인(inline) 코드

2. 블럭(Block) 코드

2-8. 링크(Link)

1. 외부링크

2. 참조링크

3. 자동연결

2-9. 이미지(Image)

1. 기본문법

2. 참조링크 이미지

3. 이미지와 링크 동시에 사용(이미지를 링크로 사용)

4. 태그를 이용한 이미지

2-10. 체크 리스트(Check List)

2-11. 표(Table)

2-12. 각주(Footnote)

1. 기본문법

2. HTML을 이용한 각주

'기타' 카테고리의 다른 글

+ Recent posts

티스토리툴바

얼레벌레 굴러가는 기록장

마크다운(Markdown) 사용법

1. 마크다운(Markdown)이란?

1-1. 마크다운의 장점

1-2. 마크다운의 단점

2. 마크다운(Markdown) 문법

2-1. 제목(Header)

2-2. 줄바꿈(Line Breaks)

2-3. 인용문(BlockQuote)

2-4. 강조(Emphasis)

2-5. 수평선(Horizontal Rule) <hr/>

2-6. 목록(List)

1. 순서가 없는 목록(Unordered List)

2. 순서가 있는 목록(Ordered List)

3. 혼합 목록

2-7. 코드(Code)

1. 인라인(inline) 코드

2. 블럭(Block) 코드

2-8. 링크(Link)

1. 외부링크

2. 참조링크

3. 자동연결

2-9. 이미지(Image)

1. 기본문법

2. 참조링크 이미지

3. 이미지와 링크 동시에 사용(이미지를 링크로 사용)

4. 태그를 이용한 이미지

2-10. 체크 리스트(Check List)

2-11. 표(Table)

2-12. 각주(Footnote)

1. 기본문법

2. HTML을 이용한 각주

'기타' 카테고리의 다른 글

+ Recent posts

티스토리툴바

2-5. 수평선(Horizontal Rule) `<hr/>`