Markdown Language 마크다운언어 란? + 예제

마크다운이란?

Markdown은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다. 마크다운이 최근 각광받기 시작한 이유는 깃헙(https://github.com) 덕분이다. 깃헙의 저장소Repository에 관한 정보를 기록하는 README.md는 깃헙을 사용하는 사람이라면 누구나 가장 먼저 접하게 되는 마크다운 문서였다. 마크다운을 통해서 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되면서 점점 여러 곳으로 퍼져가게 된다.

마크다운의 장단점

장점

1. 간결하다.
2. 별도의 도구없이 작성이 가능하다.
3. 다양한 형태로 변환이 가능하다.
4. 텍스트로 저장되기 때문에 용량이 적어 보관이 용이하다.
5. 텍스트파일이기 때문에 버전관리시스템을 이용하여 변경이력을 관리할 수 있다.
6. 지원하는 프로그램과 플랫폼이 다양하다.

단점

1. 표준이 없다.
2. 표준이 없기 때문에 도구에 따라 변환방식이나 생성물이 다르다.
3. 모든 HTML 마크업을 대신하지 못한다.

마크다운 문법

지금 위에서 설명한것만으로 벌써 마크다운의 문법을 사용하였다.
사용한것부터 시작하여 마크다운 문법을 봐보자.

1. 헤더

위에서 장단점을 설명할때 이미 다양한 헤더를 사용하였다.

# this is a h1
## this is a h2
### this is a h3
#### this is a h4
##### this is a h5
###### this is a h6

🔍 결과

this is a h1

this is a h2

this is a h3

this is a h4

this is a h5

this is a h6

2. 코드블럭

위에서 장단점을 설명할때 사용한 박스를 4가지 방식을 사용하여 나타내본다.

1. <pre><code>
2. ``` 또는 ~
3. 들여쓰기
4. 언어별 코드블럭

2.1 <pre><code> 사용

<pre>
<code>
def func(a,b):
    return a+b

print(func(2,3))
</code>
</pre>

🔍 결과

def func(a,b):
    return a+b

print(func(2,3))

2.3 들여쓰기 사용

탭이나 스페이스 4번을 통해 코드블럭을 만들수 있다.

    def func(a,b):
        return a+b

    print(func(2,3))

🔍 결과

def func(a,b):
    return a+b

print(func(2,3))

2.4 언어별 코드블럭 사용

python

~~~python
def func(a,b):
    return a+b

print(func(a,b))
~~~

🔍 결과

def func(a,b):
    return a+b

print(func(a,b))

• 그밖에 언어들
  • Bash (bash)
  • C# (cs)
  • CSS (css)
  • Diff (diff)
  • HTML, XML (html)
  • Ini (ini)
  • JSON (json)
  • Java (java)
  • JavaScript (javascript)
  • PHP (php)
  • Perl (perl)
  • Python (python)
  • Ruby (ruby)
  • SQL (sql)

3. BlockQuote (인용문)

> This is a first blockquote

>> This is a second blockquote

>>> This is a third blockquote

blockquote 안에 다른 마크다운 요소를 포함할 수 있다.

> ## This is a h3
> * list1
> * list2
>   ~~~
>   code
>   ~~~

🔍 결과

This is a h3

• list1
• list2

  code

4. 글머리 기호

+ 글머리
  + 글머리2
    + 글머리3
      + 글머리 4

🔍 결과

• 글머리
  • 글머리2
    • 글머리3
      • 글머리 4

5. 강조

*single asterisks*  
_single underscores_  
**double asterisks**  
__double underscores__  
~~cancelline~~  

🔍 결과
single asterisks
single underscores
double asterisks
double underscores
cancelline

6. 기호표시

Markdown에서 이미 사용되는 기호 표기하기

Markdown 문법에 사용되는 기호를 있는 그대로 표시하고 싶을 경우가 있다.
예를 들어 #을 기호 그대로 사용하고 싶지만 그냥 쓰면 H1 헤더로 출력된다.
그런 기호들을 아래에 표기하였다.

\   backslash
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

이런것들을 사용하고 싶다면 기호앞에 \(=back slash)를 붙혀주면 된다.

예 :#, !, +

7. 수평

* * *

***

*****

----

- - -

🔍 결과

---

---

---

---

---

8. 링크

• 외부 링크
  [링크 키워드](링크 주소)

  예 : [내 블로그](https://myblog.github.io/about.html)

🔍 결과

• 자동 링크

예 : <https://hyesue-lee.github.io/about/>

🔍 결과
https://hyesue-lee.github.io/about/

9. 이미지

이미지 크기 조절은 뒤에 {: width='400' height='400'}

![그림1](/이미지경로/파일명)
![그림2](/이미지경로/파일명){: width="400" height="400"}

🔍 예시

![그림1](/assets/img/blog/coding.jpg)
![그림2](/assets/img/blog/coding.jpg){: width="400" height="400"}

10. 줄바꿈

마크다운에서는 엔터를 한번친다고 줄바꿈이 일어나지 않는다.

줄 바꿈시 사용
줄 바꿈시 사용

1. <br> 사용

줄 바꿈시 사용 <br>
줄 바꿈시 사용

🔍 결과
줄 바꿈시 사용

줄 바꿈시 사용

2. Enter 2번

줄 바꿈시 사용  


줄 바꿈시 사용

🔍 결과

안녕하세요

줄바꿈

3. 스페이스바 2번

줄 바꿈시 사용     
줄 바꿈시 사용

🔍 결과

안녕하세요
줄바꿈

11. 표

| ------ | NumPy | PyTorch |
| ------ | -------- | ---------- |
| 선언 | np.array() | torch.FloatTensor, <br/> torch.Tensor()|
| 차원 확인 | .ndim | .dim()|
| 크기 확인 | .shape | .size()|

🔍 결과

------	NumPy	PyTorch
선언	np.array()	torch.FloatTensor, torch.Tensor()
차원 확인	.ndim	.dim()
크기 확인	.shape	.size()

12. Expander control

마크다운에서 접기/펼치기 가능한 컨트롤 문법
마크다운 자체에는 기능이 없고 html을 이용 --> html의 details 사용

<details>
<summary>접기/펼치기 버튼</summary>
<div markdown="1">

|제목|내용|
|--|--|
|1|1|
|2|10|

</div>
</details>

🔍 결과

접기/펼치기 버튼

제목	내용
1	1
2	10

<details>
<blockquote>
    숨김숨김
</blockquote>
</details>

🔍 결과

숨김숨김

13. 이모지

1. 'Window 키' + ';' 또는 'Window 키' + '.'

2. 복붙 🔗 http://www.iemoji.com/ 📝✏️✒️💡 🧰 🙋🏻‍♂️

🔍 결과

📝✏️✒️💡 🧰 🙋🏻‍♂️
🤩😇👩🏻‍💻👩🏻‍💻👩🏻😖

14. 수학수식

$$x + y = 1$$

🔍 결과

$$x + y = 1$$

15. highlight

kdb- hello

a- hello

code - hello

mark - hello

under - hello

16. youtube

not yet

17. slick (이미지 슬라이드 효과)

<div class="main_center">
<div><img src= "/assets/img/blog/img1.JPG" style="width: 729px; height: 400px;"></div>
<div><img src="/assets/img/blog/img2.JPG" style="width: 729px; height: 400px;"></div>
<div><img src= "/assets/img/blog/img3.JPG" style="width: 729px; height: 400px;"></div>
</div>

<script>
$(document).ready(function() { $('.main_center').slick({
autoplay : true, /*자동으로 슬라이딩됨*/
dots:true,/* 하단 점 버튼 */
speed : 300, /* 이미지가 슬라이딩시 걸리는 시간 */
infinite : true,
autoplaySpeed : 30000 /* 이미지가 다른 이미지로 넘어 갈때의 텀 */, arrows : true,
slidesToShow : 1,
slidesToScroll : 1,
touchMove : true, /* 마우스 클릭으로 끌어서 슬라이딩 가능여부 */ nextArrows : true, /* 넥스트버튼 */
prevArrows : true,
arrow : true, /*false 면 좌우 버튼 없음, true 면 좌우 버튼 보임*/ fade : false
}); });
</script>