Markdown Syntax & HTML Tag

December 29, 2024

Ⓜ︎ Markdown Syntax
Ⓚ Kramdown Markdown (Markdown 기능을 확장한 Ruby library)
Ⓗ HTML Tag (마크다운 문법은 HTML로 변환되므로 HTML 태그도 활용 가능)

Heading 2

Ⓜ︎ ## Heading 2
Ⓗ <h2>Heading 2</h2>

💡 ‘Heading 1’ 은 제목과 같은 크기이기 때문에 본문에 사용 x
💡 ‘Heading 2’ 에는 자동으로 수평선이 밑줄로 추가

Heading 3

Ⓜ︎ ### Heading 3
Ⓗ <h3>Heading 3</h3>

Heading 4

Ⓜ︎ #### Heading 4
Ⓗ <h4>Heading 4</h4>

Heading 5

Ⓜ︎ ##### Heading 5
Ⓗ <h5>Heading 5</h5>

Heading 6

Ⓜ︎ ###### Heading 6
Ⓗ <h6>Heading 6</h6>

Line Breaks

First line. Second line.

First line.  <!-- Enter x 1 --> 
Second line.

⚠️ 엔터키 한 번으로 줄바꿈하면 두 문장이 같은 줄에 나란히 이어서 출력

First line.
Second line.

<!-- Ⓜ︎ -->
First line.  <!-- Spacebar x 2 , Enter x 1 -->
Second line.

<!-- Ⓗ -->
First line.<br>Second line.

💡 끝에 스페이스바를 2번 이상 입력하고 엔터키로 띄우면 줄바꿈 가능
💡 br 태그 1개 = 엔터키 1번

Non-Breaking Space

(A) (B) (C) (D)
Ⓗ (A) (B)  (C)   (D)

💡   1개 = 공백 1칸
💡 줄바꿈 없이 여러 개의 공백을 강제로 만들어야 할 때 사용

Horizontal Rules

⚠️ ↓ put blank lines before horizontal rules

⚠️ ↑ put blank lines after horizontal rules

Ⓜ︎ *** or --- or ___
Ⓗ <hr>

Comments

Visible paragraph 1

Visible paragraph 2

<!-- Ⓜ︎ -->
Visible paragraph 1

[hidden paragraph]: #

Visible paragraph 2

<!-- Ⓗ -->
Visible paragraph 1

<!-- hidden paragraph -->

Visible paragraph 2

Emphasis

Bold
Ⓜ︎ **Bold** or __Bold__
Ⓗ <b>Bold</b> or <strong>Bold</strong>

Italic
Ⓜ︎ *Italic* or _Italic_
Ⓗ <i>Italic</i> or <em>Italic</em>

~~Strikethrough~~
Ⓜ︎ ~~Strikethrough~~
Ⓗ <del>Strikethrough</del>

Underline
Ⓗ <u>Underline</u> or <ins>underline</ins>
Ⓗ <ins>Underline</ins>

Highlight
Ⓗ <mark>Highlight</mark>

Set highlight color
Ⓗ <mark style='background-color: lightblue'>Set highlight color</mark>

💡 굵은 기울임체 는 *** 또는 ___ (문장 사이에서는 *만 가능)
💡 마크다운 문법은 텍스트를 스타일링하는 역할만 한다.
💡 HTML 태그는 해당 부분을 강조하여 브라우저에 키워드로 전달하기 때문에 SEO 최적화에 더 좋다.

Colors

<!-- Ⓚ -->
...paragraphs...
{: style="color: red;"}    

<!-- Ⓗ -->
<p style="color:red">...paragraphs...</p>

<!-- Ⓚ -->
...paragraphs...
{: style="background-color: orange;"}

<!-- Ⓗ -->
<p style="background-color:orange">...paragraphs...</p>

<!-- Ⓚ -->
...paragraphs...
{: style="color: red; background-color: orange;"}

<!-- Ⓗ -->
<p style="color:red; background-color:orange">...paragraphs...</p>

<!-- Ⓗ -->
<font color="Blue">..inline text...</font>

<span style="color:red; background-color:orange">...inline text...</span>

Blockquotes

⚠️ ↓ put blank lines before blockquotes

This is a first blockqute.

⚠️ ↑ put blank lines after blockquotes

<!-- Ⓜ︎ -->
> This is a first blockqute.

This is a first blockqute.

This is a second blockqute.

This is a third blockqute.

<!-- Ⓜ︎ -->
> This is a first blockqute.
>> This is a second blockqute.
>>> This is a third blockqute.

💡 블록 인용 안에 블록 중첩 가능

Egestas.
Lorem ipsum odor amet, consectetuer adipiscing elit.
Purus risus finibus lobortis, ad penatibus erat imperdiet consectetur? ~~Habitasse vel posuere mattis imperdiet primis nulla diam tellus nibh.~~ Cras et lobortis vel sagittis ligula. Viverra ut venenatis aenean odio proin.

<!-- Ⓜ︎ + Ⓗ -->
> **Egestas.**  
> Lorem ipsum odor amet, consectetuer adipiscing elit.<br>
> <mark>Purus risus finibus lobortis, ad penatibus erat imperdiet consectetur?</mark>
> ~~Habitasse vel posuere mattis imperdiet primis nulla diam tellus nibh.~~
> <u>Cras et lobortis vel sagittis ligula.</u> Viverra ut venenatis aenean odio proin.

💡 블록 인용 안에 다른 마크다운 포맷 적용 가능 (안 되는 것도 있음)

Code

Inline Code Blocks

The code block on the same line.
Use `backticks` in the inline code block.

<!-- Ⓜ︎ -->
The `code block` on the same line. 
``Use `backticks` in the inline code block.``

<!-- Ⓗ -->
The <code>code block</code> on the same line.
<code>Use `backticks` in the inline code block.</code>

Fenced Code Blocks

<html>
  <head>
  </head>
</html>

<!-- Ⓜ︎ -->
```html  <!-- ← language -- >
<html>
  <head>
  </head>
</html>
```

💡 코드 바로 위와 아래를 backtick(`) 3개로 감싸고 언어 이름 명시

for i in range(5):
    print(i)

<!-- Ⓗ -->
<pre>
for i in range(5):
    print(i)
</pre>

💡 Preformatted 태그로도 여러 줄의 코드 작성 가능
💡 블록 요소로 취급되며, 고정 폭 글꼴을 사용
💡 ASCII 아트처럼 공백과 줄바꿈을 그대로 화면에 보이게 해야 할 경우 유용하다.

```liquid
{% if condition %}
  {{ variable }}
{% endif %}
```

💡 { }와 %% 으로 감싼 블록의 내용을 템플릿 구문으로 처리하지 않고 그대로 출력할 경우

코드 블록의 언어를 liquid로 설정
{ }와 %% 안에 raw를 넣은 블록으로 열고 endrow를 넣은 블록으로 닫기
2번의 안에 그대로 출력하고자 하는 코드 넣기

Lists

Ordered Lists

First item
Second item
1. Indented item
2. Indented item
  1. Indented item
  2. Indented item

<!-- Ⓜ︎ -->
First item
Second item
Indented item  <!-- Spacebar x 3 -->
Indented item
Indented item  <!-- Spacebar x 3 -->
Indented item

<!-- Ⓗ -->
<ol>
  <li>First item</li>  
  <li>Second item   
    <ol>
      <li>Indented item</li>  <!-- Spacebar x 2 -->
      <li>Indented item   
        <ol>
          <li>Indented item</li>  <!-- Spacebar x 2 -->
          <li>Indented item</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Unordered Lists

First item
Second item
- Indented item
- Indented item
  - Indented item
  - Indented item

<!-- Ⓜ︎ -->
- First item
- Second item
   - Indented item  <!-- Spacebar x 3 -->
   - Indented item
      - Indented item  <!-- Spacebar x 3 -->
      - Indented item

<!-- Ⓗ -->
<ul>
  <li>First item</li>  
  <li>Second item   
    <ul>
      <li>Indented item</li>  <!-- Spacebar x 2 -->
      <li>Indented item   
        <ul>
          <li>Indented item</li>  <!-- Spacebar x 2 -->
          <li>Indented item</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

💡 dashes (-), asterisks (*), or plus signs (+) 기호 중 택 1

Nested and Mixed Lists

ordered item
ordered item
- unordered
- unordered
  1. ordered item
  2. ordered item
ordered item
- unordered
- unordered
  - unordered item
  - unordered item

unordered item
unordered item
1. ordered
2. ordered
  - unordered item
  - unordered item
unordered item
1. ordered
2. ordered
  1. ordered item
  2. ordered item

💡 순서가 있는 항목과 없는 항목을 섞어서 중첩할 때는 3칸 들여쓰기

Elements in Lists

first item.
second item.

A blockquote below the second item.
third item.

first item.

second item.

 <p>A code block below the second item.</p>

third item.

💡 리스트 안에 다른 문법을 적용할 때는 4칸 들여쓰기

Task Lists

Checked item
Unchecked item
Unchecked item

<!-- Ⓜ︎ -->
- [x] Checked item
- [ ] Unchecked item
- [ ] Unchecked item

Tables

Header1	Header2	Header3	Header4
default	left	center	right
Bold	Italic	`Inline`	telegram
Foot1	Foot2	Foot3	Foot4

<!-- Ⓜ︎ -->
| Header1  | Header2  |  Header3 |          Header4 |
|----------|:---------|:--------:|-----------------:| <!-- create column’s header and align text -->
| default  | left     |  center  |            right |
| **Bold** | _Italic_ | `Inline` | [telegram](t.me) |
|===================================================|
| Foot1    | Foot2    |   Foot3  |            Foot4 |

💡 3개 이상의 hyphen(-)으로 각 열의 헤더를 생성하고, pipe(|)로 각 열 구분
💡 헤더 생성 시 colon(:)을 —의 왼쪽∙양쪽∙오른쪽에 붙여서 왼쪽∙가운데∙오른쪽 정렬 설정
💡 Markdown Tables Generator 에서 쉽게 생성 가능
💡 md 파일에서 가독성을 위해 equal sign(=)으로 행을 나눌 수 있다(실제 출력에는 영향 x)

Icons

Ⓗ <i class="fa-solid fa-mug-hot"></i>

Ⓗ <i class="fa-solid fa-comment fa-2x"></i>

Ⓗ <i class="fa-regular fa-image fa-3x"></i>

💡 Font awesome에서 원하는 아이콘의 HTML 코드 복사
💡 Free 옵션에 체크해야 무료 버전만 볼 수 있다.
💡 fa-(number)x를 추가하여 아이콘 사이즈 변경 가능

Links

https://www.markdownguide.org
Ⓜ︎ <https://www.markdownguide.org>

Check the basic syntax at Markdown Guide.
Ⓜ︎ Check the basic syntax at [Markdown Guide](https://www.markdownguide.org).

Markdown Guide
Ⓜ︎ [Markdown Guide](https://www.markdownguide.org "Basic Syntax")

💡 링크 위로 마우스를 올리면 설정한 문구가 툴팁으로 나타남

New tap
Ⓗ <a href="https://www.markdownguide.org" target="_blank">New tap</a>

💡 새 탭에서 링크를 열려면 HTML 태그를 사용해야 한다

Lorem ipsum odor amet, consectetuer adipiscing elit. Diam vehicula hendrerit velit porttitor rhoncus.

<!-- Ⓜ︎ -->
Lorem ipsum odor amet, consectetuer [adipiscing][1] elit.
Diam [vehicula][2] hendrerit velit porttitor rhoncus.

[1]: <https://www.google.com> "link 1"
[2]: <https://www.youtube.com> "link 2"

💡 텍스트를 쉽게 읽을 수 있도록 링크 주소를 따로 분리하는 방법

Images

Single Image

Logo
Ⓜ︎ ![Logo](https://github.com/dcurtis/markdown-mark/blob/master/png/208x128.png?raw=true "208x128")

💡 ![대체 텍스트](이미지 경로)
💡 이미지에 마우스를 올리면 뜨는 인용 문구는 이미지 경로 뒤에 명시(선택사항)

Ⓜ︎ [![Logo](https://github.com/dcurtis/markdown-mark/blob/master/png/208x128.png?raw=true "208x128")](https://www.markdownguide.org/basic-syntax/#images-1)

💡 이미지를 클릭하면 지정된 링크로 이동

Logo

<!-- Ⓗ -->
<img src="https://github.com/dcurtis/markdown-mark/blob/master/png/208x128.png?raw=true" 
     width="300" height="150">

<img src="https://github.com/dcurtis/markdown-mark/blob/master/png/208x128.png?raw=true" 
     width="10%">

💡 이미지 사이즈 조절은 img 태그로만 가능
💡 %로 이미지 비율을 유지하며 크기 조정 가능(너비만 조정하면 자동으로 비율 유지)

Click the image to open the linked page in new tap

<!-- Ⓗ -->
<figure>
  <a href="https://unsplash.com/..." target="_blank" title="Image title">
    <img src="https://images.unsplash.com/photo-1732740674513-63afb262a988?..." alt="Logo">
  </a>
  <figcaption>Click the image to open the linked page in new tap</figcaption>
</figure>

💡 figure 태그에 가능한 모든 옵션을 적용시킨 결과

Images Side by Side

<!-- Ⓗ -->
<figure class="half">
  <img src="https://images.unsplash.com/photo-1711869090270-02af29df0597?...">
  <img src="https://images.unsplash.com/photo-1735208531295-85a081558f33?...">
  <figcaption>Caption for the images.</figcaption>
</figure>

<!-- Ⓗ -->
 <figure class="third">
  <img src="https://images.unsplash.com/photo-1711869090270-02af29df0597?...">
  <img src="https://images.unsplash.com/photo-1735208531295-85a081558f33?...">
  <img src="https://images.unsplash.com/photo-1734523085360-ca37b9ff0cdb?...">
  <figcaption>Caption for the images.</figcaption>
</figure>

Videos

Youtube

<!-- Ⓜ︎ -->
{% include video id="fKB_bdxIbdI" provider="youtube" %}

<!-- Ⓗ -->
<iframe width="640" height="360" src="https://www.youtube.com/embed/fKB_bdxIbdI" 
frameborder="0" allowfullscreen></iframe>

⚠️ 비디오를 업로드한 사람이 임베드 기능을 비활성화했다면 iframe 태그로 임베딩 불가능
💡 공유 링크 https://youtu.be/fKB_bdxIbdI?si=8juXAeV22y3dr7iP 에서

앞의 주소를 https://www.youtube.com/embed/ 으로 변경
fKB_bdxIbdI 부분이 Youtube video ID가 되고, 그 뒤 ? 부터 삭제해도 무방

<!-- Ⓗ -->
<div style="width: 50%;">   <!-- 가로 너비를 차지할 비율 -->
    <iframe src="https://www.youtube.com/embed/fKB_bdxIbdI?start=3"
            frameborder="0" allowfullscreen>
    </iframe>
</div>

💡 <div> 태그에서 사이즈 조절 가능
💡 video ID 뒤에 ?start=SECOND로 해당 지점부터 재생 가능(시간, 분 단위까지 초로 변경해야 한다)

<!-- Ⓜ︎ -->
[![Talking cats meme](https://img.youtube.com/vi/fKB_bdxIbdI/0.jpg)](https://youtu.be/fKB_bdxIbdI)

💡 Youtube에서 자동으로 생성한 썸네일 이미지에 링크를 삽입하는 방법도 있음

Image url : https://img.youtube.com/vi/{VIDEO ID}/0.jpg
Video link : https://youtu.be/{VIDEO ID}

Vimeo

<!-- Ⓜ︎ -->
{% include video id="Your VIDEO ID" provider="vimeo" %}

💡 공유 링크 https://vimeo.com/{VIDEO ID}?share=copy 에서 ID 부분만 사용

Google Drive

<!-- Ⓜ︎ -->
{% include video id="Your VIDEO ID" provider="google-drive" %}

💡 구글 드라이브에 저장된 비디오 임베딩
💡 공유 링크 https://drive.google.com/file/d/{VIDEO ID}/view?usp=drive_link에서 Video ID만 사용

Forms

<!-- Ⓗ -->
<form>
  <fieldset>
    <legend>info:</legend>
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>

💡 폼에 작성한 데이터를 처리하려면 외부 서비스를 활용해야 한다.

https://formspree.io/: 폼 데이터를 이메일로 받는 서비스(무료)
https://getform.io/: 폼 데이터를 대시보드에서 확인 가능한 서비스(유료)

Buttons

Button Color

Default Primary Success Warning Danger Info Inverse Light Outline

<!-- Ⓚ -->
[Default](url){: .btn}
[Primary](url){: .btn .btn--primary}
[Success](url){: .btn .btn--success}
[Warning](url){: .btn .btn--warning}
[Danger](url){: .btn .btn--danger}
[Info](url){: .btn .btn--info}
[Inverse](url){: .btn .btn--inverse}
[Light Outline](url){: .btn .btn--light-outline}

Button Size

X-Large Large Default Small

<!-- Ⓚ -->
[X-Large](url){: .btn .btn--primary .btn--x-large}
[Large](url){: .btn .btn--primary .btn--large}
[Default](url){: .btn .btn--primary }
[Small](url){: .btn .btn--primary .btn--small}

Notices

Light gray color box using {: .notice} below the paragraphs.

Dark gray color box using {: .notice--primary} below the paragraphs.

Blue color box using {: .notice--info} below the paragraphs.

Yellow color box using {: .notice--warning} below the paragraphs.

Green color box using {: .notice--success} below the paragraphs.

Red color box using {: .notice--danger} below the paragraphs.

Notice with code block

print("Hello")

<!-- Ⓗ -->
<div class="notice" markdown="1">
Notice with **code block**   

```python
print("Hello")
```
</div>

Alignment

Text Alignment

Lorem ipsum odor amet, consectetuer adipiscing elit. Lectus aliquam vitae ad feugiat rhoncus morbi. Porta vestibulum urna id nisi commodo volutpat velit diam. Eu conubia mattis egestas tempus taciti parturient pellentesque hendrerit. Eu porttitor tristique nostra; leo nullam posuere. Ex eleifend vel nascetur tincidunt mauris elementum tempor platea tempor.

<!-- Ⓚ -->
...paragraph...
{: style="text-align: left;"}   <!-- default -->

...paragraph...
{: style="text-align: center;"}

...paragraph...
{: style="text-align: right;"}

...paragraph...
{: style="text-align: justify;"}

💡 justify는 단락을 깔끔한 직사각형 모양으로 배열하는 옵션

Image Alignment

image-left

image-center

image-right

<!-- Ⓚ -->
![image-left](https://example.com/image.png){: .align-left}   <!-- default -->
![image-center](https://example.com/image.png){: .align-center}
![image-right](https://example.com/image.png){: .align-right}

HTML Tags

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

<!-- Ⓗ -->
<address>
  1 Infinite Loop<br> Cupertino, CA 95014<br> United States
</address>

💡 해당 부분이 주소임을 명시

Abbreviation Tag

HTML is the standard markup language for Web pages.

<!-- Ⓚ -->
HTML is the standard markup language for Web pages.

*[HTML]: Hyper Text Markup Language

💡 약어 위에 마우스를 올리면 커서 모양이 물음표로 바뀌고 인용 문구로 본딧말이 뜬다.

Cite Tag

“Code is poetry.” —Automattic

<!-- Ⓗ + Ⓚ -->
"Code is poetry." ---<cite>Automattic</cite>
{: .small}

💡 cite 태그 + CSS의 {: .small} 클래스 = 작은 글씨로 출처 표시

Keyboard, Sample Tag

Ctrl + C
Ⓗ <kbd>Ctrl</kbd> + <kbd>C</kbd>

💡 키보드 입력을 나타냄

File copied successfully.
Ⓗ <samp>File copied successfully.</samp>

💡 프로그램이나 시스템의 예시 출력 결과를 나타냄

Quote Tag

Developers, developers, developers… –Steve Ballmer
Ⓗ <q>Developers, developers, developers…</q> –Steve Ballmer

💡 blockquote와 달리 문장 사이의 짧은 인용문에 사용되며, 자동으로 따옴표가 붙는다.
💡 … 는 생략 부호를 나타내는 HTML 엔티티
💡 – 는 보통 하이픈보다 더 긴 구분기호를 나타내는 HTML 엔티티

Subscript, Superscript Tag

H₂O
Ⓗ H<sub>2</sub>O

x²
Ⓗ x<sup>2</sup>

Variable Tag

variables
Ⓗ <var>variables</var>

💡 해당 부분이 수식이나 코드의 변수임을 명시

Footnote

Lorem ipsum odor amet¹, consectetuer adipiscing elit.² Massa rhoncus nunc ad luctus at finibus iaculis. Primis³ sem adipiscing proin at pulvinar auctor lacinia semper phasellus. Nascetur turpis risus accumsan litora accumsan.

<!-- Ⓚ -->
Lorem ipsum odor amet[^1], consectetuer adipiscing elit.[^note]
Massa rhoncus nunc ad luctus at finibus iaculis.
Primis sem adipiscing proin at pulvinar auctor lacinia semper phasellus.
Nascetur[^3] turpis risus accumsan litora accumsan.

[^1]: first footnote.           <!-- single line -->
[^note]: second footnote.<br>   <!-- multiple paragraphs -->
    Indented paragraphs.<br>
    `example code`

[^3]: third footnote.

💡 각주를 클릭하면 해당 ‘포스트’의 가장 하단에서 내용을 확인 가능

💡 ↓ check the footnote

first footnote. ↩
second footnote.
Indented paragraphs.
<p>example code</p> ↩
third footnote. ↩

Share on

X Facebook Reddit LinkedIn