마크다운이란?
Markdown은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다. 마크다운이 최근 각광받기 시작한 이유는 깃헙(https://github.com) 덕분이다. 깃헙의 저장소Repository에 관한 정보를 기록하는 README.md는 깃헙을 사용하는 사람이라면 누구나 가장 먼저 접하게 되는 마크다운 문서였다. 마크다운을 통해서 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되면서 점점 여러 곳으로 퍼져가게 된다.
마크다운의 장단점
장점
- 간결하다.
- 별도의 도구없이 작성이 가능하다.
- 다양한 형태로 변환이 가능하다.
- 텍스트로 저장되기 때문에 용량이 적어 보관이 용이하다.
- 텍스트파일이기 때문에 버전관리시스템을 이용하여 변경이력을 관리할 수 있다.
- 지원하는 프로그램과 플랫폼이 다양하다.
단점
- 표준이 없다.
- 표준이 없기 때문에 도구에 따라 변환방식이나 생성물이 다르다.
- 모든 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가지 방식을 사용하여 나타내본다.
<pre><code>
```
또는~- 들여쓰기
- 언어별 코드블럭
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
- 글머리3
- 글머리2
5. 강조
*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
~~cancelline~~
🔍 결과
single asterisks
single underscores
double asterisks
double underscorescancelline
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/>
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. 줄바꿈
마크다운에서는 엔터를 한번친다고 줄바꿈이 일어나지 않는다.
줄 바꿈시 사용
줄 바꿈시 사용
<br>
사용
줄 바꿈시 사용 <br>
줄 바꿈시 사용
🔍 결과
줄 바꿈시 사용
줄 바꿈시 사용
- Enter 2번
줄 바꿈시 사용
줄 바꿈시 사용
🔍 결과
안녕하세요
줄바꿈
- 스페이스바 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. 이모지
'Window 키' + ';' 또는 'Window 키' + '.'
복붙 🔗 http://www.iemoji.com/ 📝✏️✒️💡 🧰 🙋🏻♂️
🔍 결과
📝✏️✒️💡 🧰 🙋🏻♂️
🤩😇👩🏻💻👩🏻💻👩🏻😖
14. 수학수식
$$x + y = 1$$
🔍 결과
$$x + y = 1$$
15. highlight
a- hello code - hello
mark - 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>
'Back-end > DEV notes' 카테고리의 다른 글
git 저장소 주소 repository 변경하기 (1) | 2022.03.13 |
---|---|
GitHub Pages 활성화 시켜 여러 repository 웹 호스팅하기. (0) | 2022.03.13 |
jekyll 지킬이란? (0) | 2022.03.13 |
티스토리 애드센스 관리 다시 조회하기 에러 1초 해결 (3) | 2022.01.06 |
Git Hub Pages 란? (0) | 2021.11.16 |