마크다운(Markdown)
Markdown은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.
- 간단히 설명하면, 다양한 사이트 등에 호환이 잘되고 쉽고 간단해서 많이 사용되는 마크업(markup) 언어이다.
마크다운 강조 표현 방법
-
강조 표현을 우선 간단하게 소개하고 본론으로 들어가겠습니다.
-
강조 표현 방법에는 ( * ) or ( _ )가 사용 되며, 기능은 동일합니다.
*이텔릭체 별 1개 (기울림)*
_이텔릭체 밑줄 1개 (기울림)_
**blod 별 2개 (굵은 글씨)**
__bold 밑줄 2개 (굵은 글씨)__
~~취소선 사용~~
=> 취소선 같은 경우 글자랑 양 옆의 물결(~)이랑
떨어져 있으면 취소선 작성이 안된다.
~~ 취소선 사용 ~~ [ X ]
- 다른 강조들은 시작하는 부분만 붙어 있으면
제대로 사용이 가능하다.
*이텔릭체(기울림) * [ O ]
* 이텔릭체(기울림) * [ X ]
__bold(굵은 글씨) __ [ O ]
__ bold(굵은 글씨)__ [ X ]이텔릭체 별 1개 (기울림)
이텔릭체 밑줄 1개 (기울림)
blod 별 2개 (굵은 글씨)
bold 밑줄 2개 (굵은 글씨)
취소선 사용
- 이스케이프 문자 ()를 이용하면, 기능을 가진 문자들을 텍스트처럼 사용 할 수 있다.
\* 이스케이프 문자로 양옆에 별 표시 가능 \*
\__ 이스케이프 문자로 양옆에 언더 바 표시 가능 \__* 이스케이프 문자로 양옆에 별 표시 가능 *
__ 이스케이프 문자로 양옆에 언더 바 표시 가능 __
1. 마크다운 언어 문법
1-1. 헤더 (Headers)
-
# 사용 헤더(Header) 표시
글머리(header)는 '#'으로 사용할 수 있으며, #의 개수에 따라 글자의 크기가 커진다.
# H1 헤더
## H2 헤더
### H3 헤더
#### H4 헤더
##### H5 헤더
###### H6 헤더H1 헤더
H2 헤더
H3 헤더
H4 헤더
H5 헤더
H6 헤더
- '#'이 아닌 단락 아래에 '=', '-'를 사용하여 헤더를 표현할 수 있다.
H1 헤더(Header)
==- '=' 단락 아래에 2개 이상의 '='을 붙이면 H1 헤더 크기로 표현할 수 있다.
('='의 개수는 웹 마다 상이할 수 있어서 하나로 안되시면 여러개 이어서 작성하시면 됩니다.)
H1 헤더
- '-' 단락 아래에 2개 이상의 '-'을 붙이면 H2 헤더 크기로 표현할 수 있다.
H2 헤더(Header)
-H2 헤더
1-2. Blockquotes (인용구)
- '>'를 사용하여 Blockquotes를 표현할 수 있다.
> 인용하고 싶은 단락
> 인용하고 싶은 단락 2
> 인용하고 싶은 단락 (space)(space)
인용하고 싶은 단락 2
-> 2 인용구 모두 동일하게 표현된다.인용하고 싶은 단락
인용하고 싶은 단락 2
- 인용구는 '>'를 중첩해서 사용할 수 있다.
> 인용하고 싶은 단락 1
>> 인용하고 싶은 단락 2
>>> 인용하고 싶은 단락 3
>>>> 인용하고 싶은 단락 4
- 벨로그에서 확인해본 결과 10개 이상도 가능하다.인용하고 싶은 단락 1
인용하고 싶은 단락 2
인용하고 싶은 단락 3
인용하고 싶은 단락 4
- 인용구 단락을 중첩해서 사용할 때는 Enter키로 줄을 바꾼 후 사용해야 한다.
1-3. Lists
- Markdown 문법에선 다양한 리스트 방법을 지원합니다.
1-3-1. 순서가 없는 리스트 표현 : '-', '*', '+'
- '*' 표현
* 리스트 1
* 리스트 2- 리스트 1
- 리스트 2
- '+' 표현
+ 리스트 1
+ 리스트 2- 리스트 1
- 리스트 2
- '-' 표현
- 리스트 1
- 리스트 2- 리스트 1
- 리스트 2
'-', '*', '+' 중에 자신이 사용할 때 가장 편한 단어로 사용하시면 됩니다. 저같은 경우 '-'(Hyphen)을 주로 사용합니다.
중첩 리스트 표현
- 리스트는 중첩해서 표현할 수 있는데 공백을 포함하여 리스트를 중첩시킬 수 있습니다.
- 중첩 리스트 1
- - 중첩 리스트 2
- - - 중첩 리스트 3
- - - - 중첩 리스트 4- 중첩 리스트 1
- 중첩 리스트 2
- 중첩 리스트 3
- 중첩 리스트 3
- 중첩을 좀 더 보기 좋게 응용해서 사용할 수 있습니다.
- 리스트 1
(space)(space)- 리스트 2
(space)(space)(space)(space)- 리스트 3
(space)(space)(space)(space)(space)(space)- 리스트 4-
리스트 1
- 리스트 2
- 리스트 3
- 리스트 4
- 리스트 3
- 리스트 2
-
위 처럼 표시할 때는 공백을 2배수씩 증가시켜서 작성하시면 됩니다.
1-3-2. 정렬된 순서가 있는 리스트 표현
- 순서(오름차순)으로 정렬된 숫자 뒤에 '.' 붙여 사용한다.
( 0이상의 정수여야 한다. )
1. 순서 1
2. 순서 2
3. 순서 3- 순서 1
- 순서 2
- 순서 3
- 순서를 표시할떄 순차적으로 하기 싫어서 작성하는 경우 Markdown을 표시하는 웹에서 정렬된 순서 표현 방식이 랜더링 되어있으면, 자동으로 순서를 표현해줍니다.
0. 순서 1
0. 순서 1
0. 순서 1 - 위의 표시는 아래와 같이 변합니다
- 순서 1
- 순서 1
- 순서 1
- 추가로 0이상의 숫자만 가능하고 -는 사용이 안됩니다.
-1. 음수로 순서 표시 -1
-1. 음수로 순서 표시 -1
-1. 음수로 순서 표시 -1-1. 음수로 순서 표시 -1
-1. 음수로 순서 표시 -1
-1. 음수로 순서 표시 -1
- 순서가 있는 리스트 표현도 중첩해서 사용이 가능합니다.
1. 순서1 2. 순서2 3.순서3
- 순서1 2.순서2 3.순서3
- 순서에 맞게 정렬이 되었다.
1. 순서1 1.순서1 3.순서1 (x)- 순서1 1.순서2 1.순서3
- 순서에 맞게 정렬이 안되었다.
- 순서 있는 리스트도 순서 없는 리스트에서의 중첩과 마찬가지로 아래와 같이 표현할 수 있다.
1. 순서1
(space)(space)(space)2. 순서2
(space)(space)(space)(space)(space)(space)3.순서3
(space)x9 4. 순서 4- 순서1
- 순서2
3.순서3- 순서 4
- 순서2
- 순서 있는 리스트는 순서 없는 리스트와 다르게 공백을 3배수씩 증가시키며 사용해야 한다!!!
1-4. 코드 블럭
- Markdown에서 코드 블럭은 최소 4개 이상의 공백, (space 4개 이상 단위의) Tab으로 표현할 수 있으며
( ` )로 표현이 가능합니다. - 단일 백틱 ( ` )
`print("Hello world")`
- 단일 백틱은 한 줄단위의 코드 블럭을 만들어 줍니다.
print("Hello world")
- 다중 백틱 (
3개 이상의 ( ` ) 사용)
백팅 사용에서 주의해야 할 점은 시작할 떄의 백틱 개수와 끝날 떄의 백틱의 개수가 동일해야 합니다.Tab or 4칸 이상의 공백으로 표현하는 코드블럭
(작성 예시)
(space)x4 print("4칸 이상의 공백 or tab 표현 코드 블럭 입니다."(적용)
print("4칸 이상의 공백 코드 블럭 입니다.")
print("tab 코드 블럭 입니다.")추가로, 벨로그(velog) 기준으로 3개 이상의 백틱 ( ``` ) 다음에 프로그램 언어를 작성하면 해당 언어에 맞게 랜더링 됩니다.
python (예시)
``` python
def python_example
print("Hello world")
```import math
from tensorflow.keras import layers
from tensorflow import keras
def python_example # (space)x4 사용
print("Hello world") # (space)x4 사용
layer = layers.Dense(32, activation='relu')
inputs = tf.random.uniform(shape=(10, 20))
outputs = layer(inputs)
'''
추가로 벨로그(velog)기준 코드 블럭에서 tab을 사용할 경우
들여쓰기가 과도하게 나타날 수 잇습니다.
'''
def python_indented_example # (tab)x1 사용
print("Hello world") # (tab)x1 사용
layer = layers.Dense(32, activation='relu')
inputs = tf.random.uniform(shape=(10, 20))
outputs = layer(inputs)
'''
해당 부분만 주의하면서 코드를 작성하시면 됩니다.
'''
java 예시
import java.util.*;
import java.lang.*;
import java.io.*;
class Velog
{
public static void main (String[] args) throws java.lang.Exception
{
System.out.println("Hello world");
}
}1-5. 수평선
- 수평선은
<hr />태그, 3개 이상의( * ), ( - )으로 수평선을 나타낼 수 있습니다.
<hr/>
***
---
* * *
- - - -- ( * ) , ( - ) 사이에 공백을 줘서 수평선을 표시할 수 있습니다.
1-6. Span 요소 [Links]
- 마크다운(Markdown)은 인라인과 참조 두 가지 스타일의 링크를 지원합니다.
일반적으론 주소를 붙여놓아도 링크가 작동은 하지만 보기에 깔끔하지가 않죠.
따라서 마크다운은 span 링크 요소를 지원한답니다~!!
https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4
- 이렇게 주소만 있는 경우 보기에 깔끔하지 않네요.
( 위의 링크는 마크다운 위키 링크입니다. )
두 스타일 모두 Link 텍스트는 [대괄호]로 구분합니다.
1-6-1. 인라인 링크 (Inline link)
(사용 예시)
[링크 대체 텍스트]
(https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4)(적용)
마크다운 위키 (링크 대체 텍스트)
- 해당 링크를 누르실 경우 마크다운 위키로 넘어갑니다.
- 사이트 title 정보도 넣어줄 수 있습니다. 이렇게 사용할 경우 링크에 마우스를 올리시면 사이트 title 정보가 화면에 표시됩니다.
(사용 예시)
[링크 대체 텍스트]
(https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4 "마크다운 위키 사이트")(적용)
마크다운 위키 (링크 대체 텍스트)
추가로, 블로그 글 등을 쓰시면서 링크 작성하실때 링크가 잘되는지 확인하다가
해당 링크로 옮겨지면 작성 중인 글이 날라갈 수 있으니 임시 저장한 후에 확인하세요
저처럼 저장 깜박해서 작성한 글 전부 날리지 마세요... ㅠㅠ
1-6-2. 참조 스타일 링크 (Reference-style links)
- 참조 링크는 인라인 링크랑은 다르게 id를 지정한 후 그 id를 문서 어디에서든 지정하면 해당 링크로 참조 됩니다.
(사용 예시)
[참조1][id]
---
Reference 링크 테스트!
[id]: https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4Reference링크 테스트!
- 인라인 링크는 [대체 텍스트]와 ["https:://..."] 주소를 한번에 지정해야 하지만 Reference 같은 경우 문서 어디에든 id만 작성하시면 사용할 수 링크로 사용할 수 있습니다.
- Reference 링크는 아래의 세 가지 정의 방식으로 title 정보를 나타낼 수 있습니다.
[id]: https://주소 입력... '"여기에 title 정보 입력"'
[id]: https://주소 입력... "'여기에 title 정보 입력'"
[id]: https://주소 입력... (여기에 title 정보 입력)- 마지막으로 Reference 링크의 id 주소 링크를 다시 지정해 줄 경우 해당 주소로 링크가 연결됩니다.
( Reference id는 마크다운 주소 -> 구글 주소)
[id]: https://www.google.com/ (구글 메인 화면입니다.)- 따라 해볼 경우 Reference 링크의 사이트 설명도 따라 바뀐 것을 확인할 수 있습니다.
Reference 링크는 id로 링크를 지정해주기 때문에 id를 기억하기 쉬운걸로 해주고 중복해서 id를 사용하면 원치 않는 링크를 걸 수 있으므로 조심해서 사용하시길 바랍니다!!
1-7. Image
- Markdown에 이미지 사용은 위의 링크 사용방식이랑 흡사하다.
1-7-1. Inline link 방식
- 이미지를 주소를 지정하지 않았을 시 아래와 같은 내용이 표시된다.
- 이미지 주소 지정할 시 아래와 같다.
- 이미지 정보를 작성했을 경우 이미지 위로 마우스를 올리면 작성한 정보가 나온다.
1-7-2. Reference link 방식
![대체 텍스트][Img_id]
[Img_id]: 이미지 url "이미지 설명 정보"
- Reference로 사용할 경우 [이미지 id]와 ' : '를 아래와 같이 반드시 붙여서 작성해야 한다.
[예시_id]:
Markdown에서 이미지 크기를 조정하고 싶은 경우 <img> 태그를 사용하는 방법이 있다.
<img src="이미지 주소" width="100px" height="100px"> 이미지 설명</img><img src="이미지 주소" width="200px" height="100px"> 이미지 설명</img>추가로, 현재 작성일 기준으로 벨로그(velog)에서는 width로 조정하는 경우만 이미지 크기가 조정이 되고 height 값을 아무리 줘도 조정이 안되니 만약 벨로그(velog)에서 이미지 크기 조정시 width 비율로만 조정이 된다는 점을 유념하면 될것 같다.
참조
daringfireball : Markdown 개발자 웹사이트
거북이가 되고 싶은 자라