마크다운 문법 [Markdown Syntax]

2020. 8. 12. by 원더바웃

마크다운은 일반 텍스트 서식 구문을 사용하는 경량 마크업 언어로 같은 이름의 도구를 사용하여 HTML 및 기타 여러 형식으로 변환할 수 있도록 설계되었다.

마크다운 문법[Markdown Syntax]

Markdown 원문 참조 : JOHN GRUBER :: daringfireball.net

HEADERS [머리글]

Markdown 표기 HTML 표기 결과 보기
제목 1
=====		 <h1>제목 1</h1>

제목 1
제목 2
-------		 <h2>제목 2</h2>

제목 2
# 제목 1 <h1>제목 1</h1>

제목 1
## 제목 2 <h2>제목 2</h2>

제목 2
### 제목 3 <h3>제목 3</h3>

제목 3
#### 제목 4 <h4>제목 4</h4> 제목 4
##### 제목 5 <h5>제목 5</h5> 제목 5
###### 제목 6 <h6>제목 6</h6> 제목 6
  • 참고 : 머리글 h1 과 h2 표기는 총 3가지 h3~h6은 2가지 방법이 있다.
제목 아래에 ===== 이퀄 또는 제목 앞에 # 샵을 마지막으로 제목 앞과 뒤에 # 샵을 사용 할 수 있다.
1. 제목 1    2. # 제목 1    3. # 제목 1 #  
   =====  
### 제목 3 또는 ### 제목 3 ###

STYLING TEXT [글자 꾸미기]

Markdown 표기 HTML 표기 결과 보기
_italic_ 또는 *italic* <emi>italic</emi> italic
__bold__ 또는 **bold** <strong>Bold</strong> Bold
~~Strikethrough~~ <del>Strikethrough</<del> Strikethrough
**Bold and _italic_** <strong>Bold and <em>italic</em></strong> Bold and italic

 

BLOCKQUOTES [인용문 블럭]

Markdown 표기 HTML 표기 결과 보기
> 이것은 인용문 블럭 입니다. <blockquote>이것은 인용문 블럭 입니다.</blockquote> 이것은 인용문 블럭 입니다.
  • 참고: 인용문 블럭 표시는 스타일 설정에 따라 브라우저에서 다르게 보인다.

LINKS [링크]

INLINE LINKS [한줄 스타일 링크]

Markdown :
타이틀 속성이 있는 링크 : [Google](https://www.google.com/ "구글") 마우스를 올려 보세요.  
타이틀 속성이 없는 링크 : [Google](https://www.google.com/) 마우스를 올려 보세요.  
상대경로 : [Home](/home "홈") 으로 이동.  
이메일 : [e-mail](mailto:name@email.com)
html :
<p>타이틀 속성이 있는 링크 : <a href="https://www.google.com/" title="구글">Google</a>마우스를 올려 보세요.</p>  
<p>타이틀 속성이 없는 링크 : <a href="https://www.google.com/">Google</a>마우스를 올려 보세요.</p>  
<p>상태경로 : <a href="/home">Home</a>으로 이동.</p>  
<p>이메일 : <a href="mailto:name@email.com">e-mail</a></p>

결과 보기:

  • 타이틀 속성이 있는 링크 : Google 마우스를 올려 보세요.
  • 타이틀 속성이 없는 링크 : Google 마우스를 올려 보세요
  • 상대경로 : Home 으로 이동.
  • 이메일 : e-mail

AUTOMATIC LINKS [자동 링크]

Markdown :
링크 주소   : <https://www.google.com/>
이메일 주소 :<name@email.com>

html :
<p>링크 주소   : <a href="https://www.google.com/">https://www.google.com/</a></p>  
<p>이메일 주소 : <a href="mailto:name@email.com">name@email.com</a></p>

결과 보기 :

REFERENCE LINKS [참조 스타일 링크]

총 3가지 방식.

첫 번째:
참조 스타일 링크 첫 번째 [마이홈][id] 입니다.
[id]: https://wonderbout.tistory.com/  "wonderbout.tistory"

두 번째:
대한 민국 검색 포털 1위는  [네이버][] 그리고 2위는 아마도 [다음][] 또는 [구글][] 이다.  

[네이버]: http://www.naver.com/     "Naver"
[다음]:   http://www.daum.net/      "Daum"
[구글]:   http://www.google.com/    "Google"

세 번째:
대한 민국 검색 포털 1위는  [네이버][1] 그리고 2위는 아마도 [다음][2] 또는 [구글][3] 이다.

[1]: http://www.naver.com/     "Naver"
[2]: http://www.daum.net/      "Daum"
[3]: http://www.google.com/    "Google"

첫 번째 결과 보기 :

  • 참조 스타일 링크 첫 번째 마이홈 입니다.

두 번째 & 세 번째 결과 보기 :

IMAGES [이미지]

Markdown :
![Markdown](markdown.png)
![티스토리](tistory.png "티스토리")
html :
<img src="markdown.png" alt="Markdown">  
<img src="tistory.png" title="티스토리" alt="티스토리">

결과 보기:

Markdown
티스토리

LISTS [목록]

순서가 있는 목록

Markdown :
1. 첫번째
2. 두번째
3. 세번째
html :
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>

결과 보기 :

  1. 첫번째
  2. 두번째
  3. 세번째

순서가 없는 목록

Markdown : 세가지 방법 결과는 같음.
* 첫번째
* 두번째
* 세번째

- 첫번째
- 두번째
- 세번째

+ 첫번째
+ 두번째
+ 세번째
html :
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ul>

결과 보기 :

  • 첫번째
  • 두번째
  • 세번째

CODE [코드]

INLINE CODE

한 줄 소스 코드 출력은 ` (backtick)로 감싼다.

결과 보기 :

  • 이것은 HTML <span>hello world</span> 코드 입니다.

Block CODE

블럭 코드는 ` (backtick) 세개를 사용 한다.
예)
```
여기에
소스
코드
```

var x, y;
x = 5; y = 6;
z = x + y;

TABLE [표]

| 항목1        | 항목2             |항목3        |
|:-------------|:----------------:|------------:|
|왼쪽 정렬      |양쪽 정렬          |오른쪽 정렬  |

정렬은 : 콜론 위치에 따라 정렬 된다.

결과 보기

항목1 항목2 항목3
왼쪽 정렬 양쪽 정렬 오른쪽 정렬

LINE [수평선]

* 또는 -를 세개 이상 쓰면 됨.  
* * *  
***  
*****  
- - -  
-------------

기타 등등

한줄개행
문장이 끝나때 스페이스 바 두번
<!-- 주석은 HTML과 같다. -->
마크다운은 다음 문자에 대한 백 슬래시 손실을 제공합니다.

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark
반응형
'코드조각/HTML'