Markdown에 대하여

Markdown

마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업(Markup) 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 온라인 콘텐츠 등에서 .md 또는 .markdown 확장자로 사용한다.

Tips
온라인 Markdown Editor를 확인하려면 여기를 클릭한다.

Jekyll에서 지원하는 Markdown 문법의 요소는 다음과 같다.

제목

수평선

한줄에 3개 이상의 ***, ---, ___를 사용하여 수평선을 그린다.

***

---

___

단락

빈 줄을 추가하거나 <p></p> 태그를 이용하여 단락을 구분한다.

I really like using Markdown.

I think I'll use it to format all of my documents from now on.

줄 바꿈

두 개 이상의 띄어쓰기와 엔터(enter)를 입력하거나 <br> 태그를 이용하여 줄을 바꾼다.

This is the first line.  
And this is the second line.

강조

텍스트 스타일을 굵게 또는 기울임꼴로 변경한다.

취소선

단어 가운데에 수평선을 넣어 취소선을 표현하려면 ~~를 단어의 앞 뒤에 사용한다.

~~The world is flat.~~ We now know that the world is round.

The world is flat. We now know that the world is round.

인용구

문장 앞에 >를 입력하여 인용구를 만든다. 인용 부호는 중첩하여 사용할 수 있으며 다른 Markdown 요소와 동시에 사용이 가능하다.

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
> *Everything* is going according to **plan**.
>> But we should not forget about prudence.

* The quarterly results look great!*

• Revenue was off the chart.
• Profits were higher than ever.

Everything is going according to plan.

But we should not forget about prudence.

목록

순서가 지정된 목록을 만드는 방법은 문장 앞에 숫자와 마침표를 입력한다. 숫자는 1부터 입력해야 하며 다음 입력하는 숫자가 무엇이든 순서대로 목록이 지정된다. 순서가 지정되지 않은 목록을 만드는 방법은 문장 앞에 -, *, + 기호를 입력한다.

블록

블록의 모든 행을 최소 4개의 띄어쓰기 또는 하나의 탭만큼 들여쓰거나 <pre></pre> 태그를 이용하여 코드 블록을 생성한다.

    <
        Code Block
    >

<pre>
public class OutputFunction
{
  public static void main(String[] args)
  {
     System.out.println("Hello, World!");
  }
}
</pre>

public class OutputFunction
{
  public static void main(String[] args)
  {
     System.out.println("Hello, World!");
  }
}

또다른 방법으로 단락의 앞과 뒤에 ``` 또는 ~~~ 줄을 추가하여 코드 블록을 생성한다. 시작점에 사용하는 언어를 선언하여 구문 강조(Syntax Highlighting)가 가능하다.

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

public class OutputFunction
{
  public static void main(String[] args)
  {
     System.out.println("Hello, World!");
  }
}

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

코드

단어나 구를 `로 감싸 코드로 표현한다.

링크

링크 텍스트를 []로 묶고 바로 뒤에 URL을 ()로 묶는다.

My favorite search engine is [Google](https://google.com).

My favorite search engine is Google.

버튼

링크 뒤에 .btn 클래스를 적용한다. 8개의 스타일과 4개의 크기를 지원한다.

[Default Button Text](#link){: .btn}
[Primary Button Text](#link){: .btn .btn--primary}
[Success Button Text](#link){: .btn .btn--success}
[Warning Button Text](#link){: .btn .btn--warning}
[Danger Button Text](#link){: .btn .btn--danger}
[Info Button Text](#link){: .btn .btn--info}
[Inverse Button](#link){: .btn .btn--inverse}
[Light Outline Button](#link){: .btn .btn--light-outline}

Default Button Text Primary Button Text Success Button Text Warning Button Text Danger Button Text Info Button Text Inverse Button Light Outline Button

[X-Large Button](#link){: .btn .btn--primary .btn--x-large}
[Large Button](#link){: .btn .btn--primary .btn--large}
[Default Button](#link){: .btn .btn--primary }
[Small Button](#link){: .btn .btn--primary .btn--small}

X-Large Button Large Button Default Button Small Button

툴팁

URL 뒤에 툴팁 정보를 ““로 감싸 넣는다. 마우스를 링크 위로 가져가면 툴팁 정보가 나타난다.

My favorite search engine is [Google](https://google.com "The best search engine for privacy").

My favorite search engine is Google.

URL 및 Email 링크

URL이나 이메일 주소를 <>로 감싼다.

<https://google.com>
<no-reply@google.com>

https://google.com
no-reply@google.com

이미지

먼저 !와 이미지 텍스트를 []로 묶고 바로 뒤에 URL을 ()로 묶는다. 추가로 툴팁 정보를 나타내려면 URL 뒤에 툴팁 정보를 ““로 감싸 넣는다. 또다른 방법으로 <img/> 또는 <image/> 태그를 이용하여 크기 조절이 가능한 이미지를 추가한다.

![Photo Caption #1](/assets/images/20210817/1.jpg "Ocean Sunrise Dawn Peninsula France Landscape")

<img width="50%" src="/assets/images/20210817/1.jpg" alt="Photo Caption #2" title="Ocean Sunrise Dawn Peninsula France Landscape" />

동영상

<video></video> 태그나 <iframe></iframe> 태그를 이용하여 크기 조절이 가능한 동영상을 추가한다. Liquid 태그가 지원되는 경우 youtube, vimeo, google-drive, bilibili에서 제공하는 동영상인 경우 아이디를 입력하여 동영상을 추가한다.

<video width="100%" height="100%" controls>
    <source src="/assets/images/20210817/2.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/HUBNt18RFbo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

{% include video id="HUBNt18RFbo" provider="youtube" %}

이스케이프 문자

텍스트 서식을 지정하는데 사용되는 리터럴 문자를 표시하려면 문자 앞에 \를 추가한다. 이스케이프 문자가 적용되는 리터럴 문자 목록은 다음과 같다.

\* Without the backslash, this would be a bullet in an unordered list.

* Without the backslash, this would be a bullet in an unordered list.

테이블

표를 추가하려면 ---을 사용하여 각 열의 헤더를 만들고 |를 사용하여 각 열을 구분한다. 행의 양쪽 끝에 |를 추가하여 호환성을 향상시킨다. 추가로 각 열의 헤더에 왼쪽, 가운데, 오른쪽으로 :를 사용하여 텍스트 정렬을 지정한다.

| Syntax      | Description | Test Text     |
| :---------- | :---------: | ------------: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

작업 목록

작업 목록을 사용하여 확인란이 있는 항목 목록을 만든다. 작업 목록 항목 앞에 -와 [ ]를 공백으로 추가하고 빈 공백에 x를 입력하여 선택 항목을 지정한다.

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

• Write the press release
• Update the website
• Contact the media

각주

각주를 사용하면 문서 본문을 복잡하게 만들지 않고 참조를 추가할 수 있다. 각주를 생성할 때 각주 참조를 추가한 위치에 링크가 있는 위 첨자 번호가 나타나고 링크를 통해 페이지 하단의 각주 내용으로 이동이 가능하다. 각주 사용의 대표적인 예로 위키백과가 있다.

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

Here’s a simple footnote,¹ and here’s a longer one.²

참조