마크다운 사용법 | 범범의 연습장

GitHub 블로그는 기본적으로 .md 파일을 추가하여 게시글을 업로드한다.
.md파일이란 MarkDown 문법으로 작성된 파일을 말하며 이를 작성하기 위해서는 그 문법을 알아보자.

Markdown이란?

텍스트 서식을 지정하는 데 사용되는 경량 마크업 언어
온갖 태그를 사용해서 작성하는 HTML 문서와 다르게 읽기도 쓰기도 쉬운 문서 양식을 만들기 위해 만들어졌다.

마크다운은 마크업 언어가 태그(

과 같은 구조)로 이루어져 사용하기 힘들어서 만들어진 마크업의 파생형이다.

기존의 복잡한 태그 구조가 사라졌기 때문에 HTML 또는 기타 마크업 언어에 대한 지식 없이도 간단한 몇 가지의 문법만 알면 작성이 가능하다.

Markdown의 장단점

장점

간편함

문법이 간단하고 배우기 쉽다. 일반 텍스트를 사용하기 때문에 별도의 에디터 없이도 작성할 수 있다.

가독성

일반 텍스트를 기반으로 하며, 간단한 형식으로 작성되기 때문에 읽기 쉽고 이해하기 쉽다.

포맷 변환

HTML로 변환이 용이하다. HTML과 호환되기 때문에 다양한 플랫폼에서 사용 가능하다.

플랫폼 호환성

GitHub, Reddit, Stack Overflow 등 다양한 플랫폼에서 지원하고 있어 사용 범위가 넓다.

빠른 작성

복잡한 문법이 없어 빠르게 문서를 작성할 수 있다.

단점

기능 제한

복잡한 레이아웃이나 기능을 표현하기 어려울 수 있다.(고급 기능 부족)

일관성 부족

모든 플랫폼이나 에디터에서 마크다운을 동일하게 해석하지 않을 수 있어 일관성이 부족할 수 있다.

제한된 기능

일부 고급 기능(표나 주석 등)이 지원되지 않거나, 특정 플랫폼에서만 동작하는 기능이 있을 수 있다.

문법의 한계

복잡한 문서를 표현하기에는 한계가 있을 수 있다. 예를 들어, 테이블을 작성하는 것이 번거로울 수 있다.

즉, 마크다운은 간단하고 빠르게 문서를 작성하고 특정 형식으로 표현하기에 유용하지만, 고급 기능이나 복잡한 레이아웃을 필요로 하는 문서 작성에는 한계가 있을 수 있다.

MarkUp(마크업)과는 무엇이 다를까?

	Markup (마크업)	Markdown (마크다운)
개념	문서나 데이터의 구조와 표시 방법을 정의하는 언어	일반 텍스트 기반의 경량 마크업 언어
사용	컴퓨터 시스템에서 정보 구조화와 서식 지정 목적	웹 글 작성, 문서 포맷팅 등 간편한 문서 작성 목적
예시	HTML, XML, SGML 등	GitHub, Reddit, Stack Overflow 등에서 사용
특징	태그를 사용하여 특정 요소 구조화와 서식 지정	간단한 문법과 일반 텍스트 기반, HTML 변환 가능
구조	문서 구조와 서식 지정에 중점	간단한 서식 적용에 초점
문법	태그와 속성 사용하여 구조화와 서식 지정	특정 기호나 문법을 사용한 간단한 서식 적용
용도	복잡한 구조와 서식을 위한 문서 작성	빠르고 간편한 문서 작성과 가독성 향상 목적

즉, Markup언어는

문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어
우리가 흔히 사용하는 XML, JSON, YAML도 일종의 Markup언어다.

Markdown언어는

Markup언어 작성에 어려움을 느껴, 더 쉽게 작성이 가능하도록 만든 일종의 Markup언어

라고 할 수 있다.

(1) 제목

제목 텍스트 앞에 1~6개의 # 기호를 추가한다. 사용하는 #의 수에 따라 제목의 계층 구조 수준과 글꼴 크기가 결정된다.

차례대로 <h1> ~ <h6>로 변환된다.

# A first-level heading
## A second-level heading
### A third-level heading

제목이미지

(2) 텍스트 스타일

아래는 각각 <em>, <strong>, <del> 태그로 변환된다.

이텔릭체는 *별표(asterisks)* 혹은 _언더바(underscore)_를 사용하세요.
두껍게는 **별표(asterisks)** 혹은 __언더바(underscore)__를 사용하세요.
**_이텔릭체_와 두껍게**를 같이 사용할 수 있습니다.
취소선은 ~~물결표시(tilde)~~를 사용하세요.
<u>밑줄</u>은 `<u></u>`를 사용하세요.

이텔릭체는 별표(asterisks) 혹은 _언더바(underscore)_를 사용하세요.
두껍게는 별표(asterisks) 혹은 __언더바(underscore)__를 사용하세요.
_이텔릭체_와 두껍게를 같이 사용할 수 있습니다.
취소선은 ~~물결표시(tilde)~~를 사용하세요.
밑줄은 <u></u>를 사용하세요.

추가 예시 표

스타일	예시	출력
굵게	`This is bold text`	굵게 표시된 텍스트
기울임	`_This text is italicized_`	기울임꼴로 표시된 텍스트
취소선	`~~This was mistaken text~~`	~~취소선 텍스트~~
굵게 및 중첩된 기울임꼴	`This text is _extremely_ important`	매우 중요한 텍스트
모든 굵게 및 기울임꼴	`*All this text is important*`	모든 텍스트가 중요
아래 첨자	`This is a <sub>subscript</sub> text`	_아래 첨자 텍스트
위 첨자	`This is a <sup>superscript</sup> text`	^위 첨자 텍스트

(3) 텍스트 인용

>를 사용하여 텍스트를 인용할 수 있다. 2중, 3중으로 중첩하여 사용할 수 있다.

<blockquote> 태그로 변환된다.

Text that is not a quote
> Text that is a quote

텍스트인용

(4) 목록

<ol>, <ul> 목록 태그로 변환된다.

1. 순서가 필요한 목록
1. 순서가 필요한 목록
  - 순서가 필요하지 않은 목록(서브) 
  - 순서가 필요하지 않은 목록(서브) 
1. 순서가 필요한 목록
  1. 순서가 필요한 목록(서브)
  1. 순서가 필요한 목록(서브)
1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록에 사용 가능한 기호
  - 대쉬(hyphen)
  * 별표(asterisks)
  + 더하기(plus sign)

순서가 필요한 목록
순서가 필요한 목록

순서가 필요하지 않은 목록(서브)
순서가 필요하지 않은 목록(서브)

순서가 필요한 목록
순서가 필요한 목록(서브)
순서가 필요한 목록(서브)
순서가 필요한 목록

순서가 필요하지 않은 목록에 사용 가능한 기호
- 대쉬(hyphen)
- 별표(asterisks)
- 더하기(plus sign)

(5) 링크

[링크명](링크주소)
링크 텍스트를 대괄호 [ ]로 묶은 다음 URL을 괄호 ( )로 묶어 인라인 링크(=외부링크)를 만들 수 있다.

This site was built using [GitHub Pages](https://pages.github.com/).

This site was built using GitHub Pages.

<a> 태그로 변환한다.

이외에 URL 링크, 이메일링크는 기본적으로 인식되는 곳이 많은데, 만약 인식이 안된다면 <>를 사용하면 된다.

URL 링크: <http://example.com/>
이메일링크: <address@example.com>

URL 링크: http://example.com/
이메일링크: address@example.com

(6) 이미지

![엑박시 보여질 이미지명](이미지주소)](링크주소)
링크과 비슷하지만 앞에 !가 붙는다. <img> 태그로 변환한다.

이미지의 크기조절이나 정렬은 html 문법을 이용해야한다.
<img width="" height=""></img>를 이용하며, 정렬을 위해서는 추가적으로 <div align="center"> </div>을 이용한다.

<img src="asset/images/test_image.jpg" width="450px" height="300px" title="px(픽셀) 크기 설정" alt="Markdown Image"></img><br/>
<div align="center">
  <img src="asset/images/test_image.jpg" width="20%">

(7) 이미지에 링크걸기

마크다운 이미지 코드를 링크 코드로 묶어 준다.

[![강아지](/assets/img/posts/강아지.png)](https://byeongbumseo.github.io/)

(8) 코드 블럭

인라인 블록 :
단일 백틱(`)을 사용하여 문장 내에서 코드 또는 명령을 표시할 수 있다. 백틱 내의 텍스트는 서식이 지정되지 않는다.

Use `git status` to list all new or modified files that haven't yet been committed.

코드강조

블록 :
고유한 블록 안으로 코드 또는 텍스트의 서식을 지정하려면(코드블록) 삼중 백틱 (```)을 사용한다.

Some basic Git commands are:
\```
git status
git add
git commit
\```

Some basic Git commands are:

git status
git add
git commit

각각 <pre>, <code> 태그로 변환된다.

(9) 표(Table)

<table> 태그로 변환된다.

헤더 셀을 구분할 때 3개 이상의 -(hyphen/dash) 기호가 필요하다.
헤더 셀을 구분하면서 :(Colons) 기호로 셀(열/칸) 안에 내용을 정렬할 수 있다.
가장 좌측과 가장 우측에 있는 |(vertical bar) 기호는 생략 가능하다.

<!-- Markdown -->
Title1|Title2
-|-
content1|content2
content3|content4
  
Title1|Title2|Title3
:-|:-:|-:
content1|content2|content3

<!-- Html -->
<figure>
    <table>
        <thead>
            <tr>
                <th>Title1</th>
                <th>Title2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>content1</td>
                <td>content2</td>
            </tr>
            <tr>
                <td>content3</td>
                <td>content4</td>
            </tr>
        </tbody>
    </table>
</figure>
  
<figure>
    <table>
        <thead>
            <tr>
                <th style='text-align:left;' >Title1</th>
                <th style='text-align:center;' >Title2</th>
                <th style='text-align:right;' >Title3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style='text-align:left;' >content1</td>
                <td style='text-align:center;' >content2</td>
                <td style='text-align:right;' >content3</td>
            </tr>
        </tbody>
    </table>
</figure>

두 경우 모두 아래와 같은 표를 그린다. (html에 비해 줄어드는 양이 굉장하다.)

Title1	Title2
content1	content2
content3	content4

Title1	Title2	Title3
content1	content2	content3

(10) 각주

[^1] 등을 이용해 콘텐츠에 각주를 추가할 수 있다.

Here is a simple footnote[^1].

A footnote can also have multiple lines[^2].

[^1]: My reference.
[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
  This is a second line.

Here is a simple footnote¹.

A footnote can also have multiple lines².

참고

Markdown에서 각주의 위치는 각주가 렌더링될 위치에 영향을 주지 않는다.
각주에 대한 참조 바로 뒤에 각주를 작성할 수 있으며, 각주는 여전히 Markdown의 하단에 렌더링된다.

(11) 강조 블록

중요한 정보를 강조하는 데 사용할 수 있는 blockquote 구문의 확장으로, GitHub에서는 콘텐츠의 중요도를 나타내기 위해 고유한 색과 아이콘으로 표시된다.

Issue 탭, Wiki 탭에서는 사용가능한데, 이 블로그에서는 적용되지 않는다.

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

경고이미지

(12) 이모지

:EMOJICODE:
:: 사이에 원하는 이모지의 코드를 넣는다.

@octocat :+1: This PR looks great - it's ready to merge! :shipit:

아래 사이트에서 많은 이모지 코드를 찾을 수 있다.
https://gist.github.com/rxaviers/7360908

(13) 원시 HTML(Raw HTML)

MarkDown 환경에서는 결국 표현의 한계가 있고, 이런 경우 순수 html문법을 사용할 수 있다.

Ex1)

<details><summary>Click Me</summary>
Good!!
</details>

Click Me

Good!!

Ex2)

<img width="70" src="" alt="gods" />

(14) etc

띄어쓰기 :  
엔터(개행)(new line) : <br/> 또는 띄어쓰기 2번
이스케이프(Markdown 서식 무시) : \ ex) \# 제목 -> # 제목
체크박스 : (unchecked) - [ ] , (checked) - [x]
주석처리 : 
수평선 : --- or *** or ___
목차 : 링크와 동일하게 사용하되, 괄호 안에 #이동할 헤드(제목)를 써주면 해당 제목이 있는 곳으로 이동한다.(띄어쓰기는 -로 연결해야함)

References

GitHub Docs
갓대희’s 작은공간- 마크다운(MarkDown) 사용법
Markdown (마크다운) 문법 총정리
HEROPY Tech - MarkDown 사용법 총정리
ahn_829 - 마크다운 사용법 총정리

My reference. ↩
To add line breaks within a footnote, prefix new lines with 2 spaces. This is a second line. ↩