MarkDown(마크다운) 사용법 [공식문서 기반]

SAPCO·2022년 6월 19일

개발자다운 마크다운 사용법을 알아보아요.

모든 설명은 MarkDown 공식 문서를 참조하여 작성했어요.
공식 문서는 영어이지만, 비루한 영어실력으로 간단하게 한글설명도 달아놨어요.
(영어를 읽지 않아도 예제를 통해 이해가 가능해요!)

각각의 설명순서는 다음과 같아요.
한글설명 -> 공식블로그 영어설명 -> 예제코드(Input) -> 마크다운(Output) -> html코드

1. 마크다운이란?

! 영어주의🤭

출처 : https://daringfireball.net/projects/markdown/
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

Thus, “Markdown” is two things: (1) a plain text formatting syntax; and (2) a software tool, written in Perl, that converts the plain text formatting to HTML. See the Syntax page for details pertaining to Markdown’s formatting syntax. You can try it out, right now, using the online Dingus.

The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.

The best way to get a feel for Markdown’s formatting syntax is simply to look at a Markdown-formatted document. For example, you can view the Markdown source for the article text on this page here: http://daringfireball.net/projects/markdown/index.text

(You can use this ‘.text’ suffix trick to view the Markdown source for the content of each of the pages in this section, e.g. the Syntax and License pages.)

Markdown is free software, available under a BSD-style open source license. See the License page for more information.

Velog 혹은 Tistory 글을 작성하거나,
Github의 readme.md를 작성 할 떄 사용하는 것이 Markdown이었어요.다들 익숙하지만 익숙하지 않은, 빈번히 까먹거나 헷갈리는 사람들을 위해 해당 글을 작성했어요🙃.

2. 사용법

사용법을 알아봐요

📍2 - 1. Header(제목)

🔖 공식문서에 의하면 두가지 유형의 Header가 존재한다고 해요.
Setext 와 atx.

Markdown supports two styles of headers, Setext and atx.

📌 2 - 1 - 1. Setext

🔖 undweline을 통해 Header을 생성하는것.
문장 다음줄(엔터)에 H1은 '='로, H2는 '-'로 밑줄을 그어주면 돼요.
'=', '-'의 개수는 하나던, 여러개던 결과는 동일해요.

Setext-style headers are “underlined” using equal signs (for first-level headers) and dashes (for second-level headers).
Any number of underlining =’s or -’s will work.

For example:
This is H1 ('=' 13개)
=============
This is H1 ('=' 2개)
==
This is H2 ('=' 10개)
----------
This is H2 ('=' 4개)
----
This is H1 ('=' 13개)

This is H1 ('=' 2개)

This is H2 ('=' 10개)

This is H2 ('=' 4개)

📌 2 - 1 - 2. atx

🔖 '#' 개수에 따라 Header 크기가 결정돼요.

Atx-style headers use 1-6 hash characters at the start of the line, corresponding to header levels 1-6.

For example:
# This is H1 (# 1개)
## This is H2 (# 2개)
### This is H3 (# 3개)
#### This is H4 (# 4개)
##### This is H5 (# 5개)
###### This is H6 (# 6개)
This is H1 (# 1개)

This is H2 (# 2개)

This is H3 (# 3개)

This is H4 (# 4개)

This is H5 (# 5개)

This is H6 (# 6개)

🔖 여담으로 '#'이 7개면 어떻게 될까요?

<h7>태그가 존재하지 않기 때문에 동작하지 않아요.
(사실은 HTML의 <h1>~<h6>태그였던것이에요.)
####### This is H7(# 7개)
####### This is H7(# 7개)

📍 2 - 2. 텍스트 단락 줄 바꾸기

🔖 엔터 한번과 두번은 달라요.
'엔터 한번↩️'은 같은 단락 내 텍스트를 작성하는 것이고,
'엔터 투번↩️↩️'은 다른 단락인 새 단락에 텍스트를 작성하는 것이에요.

For example:
크고 것은 할지라도 이상의 트고, 내려온 희망의 인생을 사막이다.↩️
인류의 그들의 힘차게 우리 교향악이다.↩️
↩️
인간의 피가 인도하겠다는 청춘을 위하여서.↩️
되는 안고, 사랑의 불러 두손을 이상 예수는 내려온 인생에 있으랴?↩️
↩️
되는 방황하였으며, 열락의 가는 꽃 소금이라 커다란 힘있다.↩️
현저하게 과실이 눈이 내려온 그러므로 시들어 심장의 전인 그리하였는가?↩️
목숨이 커다란 따뜻한 얼음 있다.
크고 것은 할지라도 이상의 트고, 내려온 희망의 인생을 사막이다.↩️
인류의 그들의 힘차게 우리 교향악이다.↩️
↩️
인간의 피가 인도하겠다는 청춘을 위하여서.↩️
되는 안고, 사랑의 불러 두손을 이상 예수는 내려온 인생에 있으랴?↩️
↩️
되는 방황하였으며, 열락의 가는 꽃 소금이라 커다란 힘있다.↩️
현저하게 과실이 눈이 내려온 그러므로 시들어 심장의 전인 그리하였는가?↩️
목숨이 커다란 따뜻한 얼음 있다.

📍 2 - 3. 가로줄

🔖 <hr /> 태그와 같아요.
세개 이상의 - 혹은 *을 사용하여 가로줄을 작성해요.
사이사이에 공백이 허용된다고해요.

You can produce a horizontal rule tag (<hr />) by placing three or more hyphens, asterisks, or underscores on a line by themselves. If you wish, you may use spaces between the hyphens or asterisks.

Each of the following lines will produce a horizontal rule :
***
*****
- - -
---------------------------------------

📍 2 - 4. 순서없는 목록

🔖 <ul> 태그와 같아요.
* + -를 사용해요. 무엇을 쓰던 상관없어요.

Unordered (bulleted) lists use asterisks, pluses, and hyphens (*, +, and -) as list markers. These three markers are interchangable;

this:
* Candy.
* Gum.
* Booze.

+ Candy.
+ Gum.
+ Booze.

- Candy.
- Gum.
- Booze.
Candy.

Gum.

Booze.

Candy.

Gum.

Booze.

Candy.

Gum.

Booze.

🔖 3단까지 각각 다른 모양으로 들여쓰기가 가능해요.

- Red 1
- Red 2
  - Blue 1
  - Blue 2
    - Green 1
    - Green 2
      - Orange 1
      - Orange 2
        - Yellow 1
        - Yellow 2
Red 1

Red 2

Blue 1

Blue 2

Green 1

Green 2

Orange 1

Orange 2

Yellow 1

Yellow 2

🔖 같은 단계의 들여쓰기로 섞어쓰면 어떻게 될까요?
간격이 크죠? 각각 다른 그룹의 순서없는 목록으로 묶이기 때문이에요.

* Candy.
* Candy.
- Gum.
+ Booze.
Candy.

Candy.

Gum.

Booze.

html코드로 보면 다음과 같아요.

<ul>
  <li>Candy.</li>
  <li>Candy.</li>
</ul>
<ul>
  <li>Gum.</li>
</ul>
<ul>
  <li>Booze.</li>]
</ul>

🔖 다른 단계의 들여쓰기로 섞어쓰면 어떻게 될까요?

* Candy.
  - Gum.
    + Booze.
Candy.

Gum.

Booze.

html코드로 보면 다음과 같아요.

<ul>
  <li>Candy.</li>
  <ul>
    <li>Gum.</li>
    <ul>
      <li>Booze.</li>
    </ul>
  </ul>
</ul>

🔖 각 아이템 사이에 공백라인(엔터)을 넣고 들여쓰기(4띄어쓰기 or 1탭)하면 리스트 아이템을 다단락으로 사용 할 수 있다고해요.

If you put blank lines between items, you’ll get  tags for the list item text. You can create multi-paragraph list items by indenting the paragraphs by 4 spaces or 1 tab:
* A list item.↩️
 ↩️
 With multiple paragraphs.↩️
 ↩️
* Another item in the list.↩️
<ul>
 <li> A list item.
 With multiple paragraphs. </li>
 <li> Another item in the list. </li>
</ul>

📍 2 - 5. 순서있는 목록

🔖 <ol>태그와 같아요.
* + -를 사용해요. 무엇을 쓰던 상관없어요.

Ordered (numbered) lists use regular numbers, followed by periods, as list markers:
1. Red
2. Green
3. Blue
Red

Green

Blue

🔖 순서를 바꿔도 결과는 동일하게 정렬되어 출력돼요.

1. Red
3. Green
2. Blue
Red

Green

Blue

🔖 첫 목록의 숫자부터 시작돼요.

3. Red
1. Green
9. Blue
Red

Green

Blue

📍 2 - 6. 텍스트(굵게, 기울임, 취소선)

🔖 굵게 :  태그와 같아요.
* 와 _를 앞에 두개 뒤에 두개 감싸 텍스트를 강조해요.

🔖 기울기 : 태그와 같아요.
* 와 _를 앞에 한개 뒤에 한개 감싸 텍스트를 기울여요.

🔖 취소선 : <del>태그와 같아요.
~~를 앞뒤로 감싸주면 돼요.

Markdown treats asterisks * and underscores _ as indicators of emphasis.
Text wrapped with one * or _ will be wrapped with an HTML  tag
double *s or _s will be wrapped with an HTML  tag.
*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
single asterisks
single underscores
double asterisks
double underscores
html코드로 보면 다음과 같아요.
single asterisks
single underscores
double asterisks
double underscores

🔖 같은 문자로 열고 닫아야해요.

You can use whichever style you prefer; the lone restriction is that the same character must be used to open and close an emphasis span.
*single asterisks_
_single underscores*
**double asterisks__
single asterisks_
_single underscores
**double asterisks__

🔖 단어 중간에도 사용이 가능해요.

Emphasis can be used in the middle of a word:
un*frigging*believable
unfriggingbelievable

🔖 세개 모두 섞어쓸 수 있어요. 단, 앞뒤 순서를 맞게 감싸야 우리의 의도대로 작동해요.

~~**굵게취소선1**~~
**~~굵게취소선2~~**
~~***굵게기울임취소선1***~~
*~~**굵게기울임취소선2**~~*
**~~*굵게기울임취소선3~~***
~~안녕하세요~~
~~안녕하세요~~
~~굵게기울임취소선~~
~~굵게기울임취소선~~
*굵게기울임취소선3*

🔖 \를 사용하여 이스케이프해요.

To produce a literal asterisk or underscore at a position where it would otherwise be used as an emphasis delimiter, you can backslash escape it:
\*this text is surrounded by literal asterisks\*
*this text is surrounded by literal asterisks*

📍 2 - 7. 인용(BlockQuote)

🔖 >를 사용하여 인용구를 표현해요.
힘들더라도 모든 라인에 >를 작성하기를 권장한다고 말하네요.

Markdown uses email-style > characters for blockquoting. If you're familiar with quoting passages of text in an email message, then you know how to create a blockquote in Markdown. It looks best if you hard wrap the text and put a > before every line:
> This is a blockquote.
>
> This is the second paragraph in the blockquote.
> 
> ## This is an H2 in a blockquote
This is a blockquote.

This is the second paragraph in the blockquote.

This is an H2 in a blockquote

📍 2 - 8. 소스코드

🔖 짧은 소스코드 : <code> 태그와 같아요.
주로 짧은 문장, 단어를 등 작은 범위를 지정하는데 사용해요.

In a regular paragraph, you can create code span by wrapping text in backtick quotes. Any ampersands (&) and angle brackets (< or >) will automatically be translated into HTML entities. This makes it easy to use Markdown to write about HTML example code:
I strongly recommend against using any `<blink>` tags.
I wish SmartyPants used named entities like `&mdash;`
instead of decimal-encoded entites like `&#8212;`.
I strongly recommend against using any <blink> tags.
I wish SmartyPants used named entities like —
instead of decimal-encoded entites like —.
html코드로 보면 다음과 같아요.
I strongly recommend against using any
<code>&lt;blink&gt;</code> tags.

I wish SmartyPants used named entities like
<code>&amp;mdash;</code> instead of decimal-encoded
entites like <code>&amp;#8212;</code>.

🔖 긴 소스코드 : <pre><code> 태그와 같아요.
주로 여러 문장이나 문단을 지정하는데 사용해요.

```
If you want your page to validate under XHTML 1.0 Strict,
you've got to put paragraph tags in your blockquotes:

<blockquote>
    <p>For example.</p>
</blockquote>

```

If you want your page to validate under XHTML 1.0 Strict,
you've got to put paragraph tags in your blockquotes:

    <blockquote>
        <p>For example.</p>
    </blockquote>

html코드로 보면 다음과 같아요.

<p>If you want your page to validate under XHTML 1.0 Strict,
you've got to put paragraph tags in your blockquotes:</p>

<pre><code>&lt;blockquote&gt;
    &lt;p&gt;For example.&lt;/p&gt;
&lt;/blockquote&gt;
</code></pre>

🔖 언어 종류에 따라 문법강조(Syntax HighLiting)이 가능해요.
시작부 backtick quotes3개 다음에 ```언어와 같이 언어를 적으면 사용이 가능해요.

Html에는 존재하고, CSS에는 없는 태그를 통해 확인해볼까요?
Html코드블럭에서는 태그에 하이라이팅이 되지만, CSS코드블럭의 태그에는 하이라이팅이 되지 않는 것을 확인할 수 있어요. :
'''html
 Hello Html 
 This is Html tag 
'''
'''css
 Hello Html 
 This is Html tag 
'''
 Hello Html 
 This is Html tag 
 Hello Html 
 This is Html tag

📍 2 - 9. 링크

🔖 inline과 reference 두가지 스타일의 링크생성을 지원한다고 해요. 두 방법 모두 []를 사용하여 링크의 범위를 지정할 수 있어요.

🔖 inline 방법을 먼저 알아볼까요?
()안에 타이틀 속성을 추가 할 수 있어요.

Markdown supports two styles for creating links: inline and reference. With both styles, you use square brackets to delimit the text you want to turn into a link. Inline-style links use parentheses immediately after the link text.

Optionally, you may include a title attribute in the parentheses:

For example:
This is an [example link](http://example.com/).
This is an [example link](http://example.com/ "With a Title").
This is an example link.
This is an example link.
html코드로 보면 다음과 같아요.
This is an <a href="http://example.com/">
example link</a>.

This is an <a href="http://example.com/" title="With a Title">
example link</a>.

🔖 reference 방법을 알아볼까요?
정의된 문서 어디에서나 링크를 이름으로 참조할 수 있게 해줘요.

Reference-style links allow you to refer to your links by names, which you define elsewhere in your document :
I get 10 times more traffic from 
[Google][1] than from [Yahoo][2] or [MSN][3].

[1]: http://google.com/        "Google"
[2]: http://search.yahoo.com/  "Yahoo Search"
[3]: http://search.msn.com/    "MSN Search"
I get 10 times more traffic from Google than from
Yahoo or MSN.

📍 2 - 10. 이미지

🔖 이미지는 링크와 방식이 매우 비슷해요.
Inline 방식(title 속성은 옵션)과
Reference 방식 모두 사용이 가능해요.

Image syntax is very much like link syntax.
![농담곰1](https://nongdamgom.image "농담곰1")

![농담곰2][nongdamgom]
[nongdamgom]: nongdamgom.image "Title2"
~~농담곰귀여워~~

3. 결론

Velog를 작성하는데 마크다운이 필요해서 기존에 깃허브에 정리해놓았던 것을 다시 깔끔하게 정리하여 작성했어요.

까먹으면 구글 검색을 애용하는데, 정보는 많지만 제대로 정리된 곳 없이 복붙이 난무한 것들만 보다보니 머리속에도 정리가 안되고 자주 까먹는 현상이 발생하더라구요.

이 참에 마크다운 공식 기술블로그 를 참조하여
자주 사용하지만 자주 까먹는 마크다운을 정리해보았어요.
보시는 모든분께 작지만 큰 도움이 되었으면 좋겠어요.

틀리거나 잘못된것 있으면 말씀해주시면 감사하겠습니다.👀

References

마크업언어 markown 발명가 John Gruber 기술블로그
https://daringfireball.net/projects/markdown/

Do it! 지옥에서 온 문서 관리자 깃&깃허브 입문
http://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&barcode=9791163031222

SAPCO

SAP CO

이전 포스트

React로 Carousel(캐러셀) 만들기 (3) - translateX를 이용한 구현

다음 포스트

MarkDown(마크다운) 사용법 [공식문서 기반]

1. 마크다운이란?

! 영어주의🤭

2. 사용법

📍2 - 1. Header(제목)

📌 2 - 1 - 1. Setext

This is H1 ('=' 13개)

This is H1 ('=' 2개)

This is H2 ('=' 10개)

This is H2 ('=' 4개)

📌 2 - 1 - 2. atx

This is H1 (# 1개)

This is H2 (# 2개)

This is H3 (# 3개)

This is H4 (# 4개)

This is H5 (# 5개)

This is H6 (# 6개)

📍 2 - 2. 텍스트 단락 줄 바꾸기

📍 2 - 3. 가로줄

📍 2 - 4. 순서없는 목록

📍 2 - 5. 순서있는 목록

📍 2 - 6. 텍스트(굵게, 기울임, 취소선)

📍 2 - 7. 인용(BlockQuote)

This is an H2 in a blockquote

📍 2 - 8. 소스코드

📍 2 - 9. 링크

📍 2 - 10. 이미지

3. 결론

References

React로 Carousel(캐러셀) 만들기 (3) - translateX를 이용한 구현

[React] DOM Element의 css정보를 가져오기 - (getComputedStyle, useRef)

0개의 댓글