마크다운 공부하기

in Devlog on Markdown



파이썬에 대해 자세한 공부를 하기 전 포스팅을 위해 마크다운(Markdown)을 알아보자.

마크다운은 내가 느끼기에 HTML의 태그 없이 편하게 심플한 온라인 문서(혹은 페이지)를 작성하기 위해 만든 하나의 표현방식(언어)으로 쉽고 간편하게 필요한 기능들을 구현 했다고 느껴진다.

주로 Github 에서 사용되는데, 마크다운 문법이 어떤 것이 있는지 알아보자.

실제로 문법에 대한 공부는 Yonn’s devlog를 참고했으며, 구성을 따와서 내가 알아가며 느낀 것을 정리했음을 밝힌다.

Markdown

제목(Heading)

제목, 헤딩, 타이틀로 볼 수 있는 마크다운 문법으로 ‘#’으로 표현하며, ‘#’의 개수가 많을 수록 크기가 작은 제목이 된다.

주의할 점은 ‘#’과 내용 사이에 공백(띄어쓰기)이 하나가 꼭 들어가야 한다는 점. . .(안되서 물어봤다. 왜 안돼요?)

# '#'하나가 들어간 제목, '#'과 내용 사이 띄어쓰기에 주의!

’#’하나가 들어간 제목

### '#'이 세게 들어간 제목, '#'과 내용 사이 띄어쓰기에 주의!

’#’이 세게 들어간 제목

###### '#'이 6개 들어간 제목, '#'과 내용 사이 띄어쓰기에 주의!
’#’이 6개 들어간 제목

본문

본문은 사실 따로 HTML 태그처럼 <p>같은 태그가 존재하진 않는다. 그냥 작성하면 그게 본문이 된다.

인용

인용은 ‘>’를 넣어서 작성하며, ‘»‘와 같이 ‘>’가 추가될 수록 하위 단계로 넘어가게 된다. 에디터를 통해 인용을 하다보면, 하위로 들어가는건 잘하는데 어떻게 빠져나오는지 모르는 사람이 많다. 이는 ‘Shift + Tab’을 통해 한 단계씩 빠져나올 수 있다.

> 이것이 '>'를 사용했을 경우

> > 이것이 '>'를 사용한 상태에서 '>'를 한번 더 쓴 경우

> 'Shift + Tab'을 사용하여 한단계 상위로 빠져나옴

이것이 ‘>’를 사용했을 경우

이것이 ‘>’를 사용한 상태에서 ‘>’를 한번 더 쓴 경우

‘Shift + Tab’을 사용하여 한단계 상위로 빠져나옴

여기서 궁금한건 한번에 » 를 쓰면 어떻게 될까?

> > '>' 이후 스페이스바, 다시 '>' 이후 스페이스바를 눌렀을 때 상태이다.

’>’ 이후 스페이스바, 다시 ‘>’ 이후 스페이스바를 눌렀을 때 상태이다.

리스트

순서가 없는 리스트(Unordered List)

‘*‘또는 ‘-‘를 사용해서 순서가 없는 리스트를 작성할 수 있다. 리스트 내에서 하위 항목들은 ‘Tab’ 또는 ‘2칸 띄어쓰기’를 통하여 구분합니다.

* Frontend
	* HTML
	* CSS
	* JavaScript
		* Vue.js

- Frontend
	- HTML
	- CSS
	- JavaScript
		- Vue.js

  • Frontend

    • HTML

    • CSS

    • JavaScript

      • Vue.js

  • Frontend

    • HTML
    • CSS
    • JavaScript
      • Vue.js

순서가 있는 리스트(Ordered List)

‘숫자.’을 이용하여, 순서가 있는 리스트를 작성할 수 있으며, 숫자는 실제로 무엇을 써도 상관없는 듯하다.

1. HTML
2. CSS
3. JavaScript
  1. HTML
  2. CSS
  3. JavaScript
1. HTML
2. CSS
1. JavaScript
  1. HTML
  2. CSS
  3. JavaScript
1. Frontend
	1. HTML
	2. CSS
	3. JavaScript
		1. Vue.js
2. Backend
  1. Frontend
    1. HTML
    2. CSS
    3. JavaScript
      1. Vue.js
  2. Backend

코드블럭

코드블럭은 일반 문장 사이에 단어, 짧은 문장 단위로 표현 할 수 있는 방법과 여러줄 코드를 삽입하는 방법이 있으며, 이를 코드블럭이라고 부릅니다.

단어, 짧은 문장을 감싸는 경우 `를 앞뒤로 감쌉니다.

’ 가 아니라 ` 인 점에 주의하자! 키보드 상단 숫자 1 왼쪽, 탭 키 위의 그거다

`1
TabQ

이런 느낌? 여하튼 본론으로 돌아가서

단어, 짧은 문장을 감싸는 경우, 코드블럭은 `<pre>`와 `<code>`로 감쌉니다

단어, 짧은 문장을 감싸는 경우, 코드블럭은 <pre>와 <code>로 감쌉니다.

여러줄의 코드를 나타내는 경우 코드블럭의 시작과 끝을 ```으로 감싸고 내부에 코드를 작성하면 됩니다.

설명을 위해 ```을 ‘ ‘ ‘로 바꿔서 다시 보자면 하단의 코드는 다음과 같다

’ ‘ ‘사실 이렇게 쓰는 이게 코드블럭이었다.’ ‘ ‘

사실 이렇게 쓰는 이게 코드블럭이었다.

재미있는 점은 ```이후에 Python이라고 언어를 명시하고 시작하는 경우 해당 Python언어에 맞는 하이라이트가 된다

’'’Python

def mysum(a, b, c)

’'’세 인자를 받아 합을 리턴하는 함수입니다.’’’

​ return a + b + c

’’’

def mysum(a, b, c)
'''세 인자를 받아 합을 리턴하는 함수입니다.'''
	return a + b + c

수평선(Horizontal Rules)

문단과 문단사이를 나누거나 사이를 구분해야 하는 경우에 사용되는 수평선은 HTML의 <hr />과 같이 동작하며, 아래와 같이 표현하여 사용할 수 있다.

근데 사실 ———– 막눌러 놓는게 편하다 직관적이기도 하고

* * *
***
*****
- - -
---
--------------------------

HTML의 하이퍼링크와 같은 기능이며, title은 생략 가능하다.

[보여질 텍스트](https://링크할URL.com "title") 순이며
[구글](https://www.google.com "Google") 를 테스트해보자

구글

강조(Emphasis)

HTML의 <em>과 같은 동작을 하며 *, _를 이용하여 감싸는 경우엔 기울어짐 강조가 되고, **, __를 이용하여 감싸는 경우엔 굵은체(볼드) 강조가 된다. 취소선은 ~~를 사용하여 감싸면 된다.

*강조를 넣은* 텍스트
_강조를 넣은_ 텍스트

강조를 넣은 텍스트 강조를 넣은 텍스트

**강조를 넣은** 텍스트
__강조를 넣은__ 텍스트

강조를 넣은 텍스트 강조를 넣은 텍스트

~~취소선을 넣은~~ 텍스트

취소선을 넣은 텍스트

이미지 삽입(Images)

이미지 또한 HTML의 <img> 태그와 마찬가지로 동작한다. 대체 택스트를 삽입할 수 있으며, 링크나 로컬의 이미지 파일을 연결할 수 있다.

![대체 택스트](/경로/test.png)
![대체 텍스트](링크)

와 같이 작성할 수 있으며, 참고된 블로그와 마찬가지로 Github의 로고를 이용하는 예제를 보기로 하자.

![Github](https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png)

Github

표(Table)

마크다운으로도 표를 만들 수 있다.

엉성한 테이블을 만들면 만들어주는 느낌. . . 이랄까?

| 맨위 머리글 1 | 맨위 머리글 2 |
|--------------|--------------|
| 테이블 셀 1   | 테이블 셀 2   |
맨위 머리글 1맨위 머리글 2
테이블 셀 1테이블 셀 2

일단은 여기까지 :) 추가로 공부해서 사용되는 마크다운 문법이 있다면 새롭게 포스팅을 하겠다.