마크다운
마크다운(markdown)은 일반 텍스트 문서의 양식을 편집하는 문법이다.
README 파일이나 온라인 문서, 일반 텍스트 편집기 등에 사용된다.
깃헙이나 velog 등 많은 곳에서 마크다운 문법이 쓰이므로 한 번 정리해두면 좋을 것 같아서
정리해보려 한다.
문법
1. 제목
h1~h6으로 제목의 크기 설정. 제목의 크기로 velog 목차에 들여쓰기 설정 가능
마크다운
# h1
## h2
### h3
#### h4
##### h5
###### h6미리보기
2. 인용문
마크다운
> 첫번째 블록
>> 두번째 블록
>>> 세번째 블록미리보기
첫번째 블록
두번째 블록
세번째 블록
3. 문단
문단 사이는 엔터키 두 번으로 구분한다.
마크다운
첫번째 문단
두번째 문단미리보기
첫번째 문단
두번째 문단
4. 목록
4.1 순서있는 목록
마크다운
1. 첫번째
2. 두번째
3. 세번째미리보기
- 첫번째
- 두번째
- 세번째
4.2 순서없는 목록
마크다운
* 첫번째
* 두번째
* 세번째미리보기
- 첫번째
두번째
세번째
5. 코드 블럭
마크다운
1번째 방법
.``` //. 없이 사용하면 됩니다.
코드블럭 예시입니다.
.``` //. 없이 사용하면 됩니다.
2번째 방법
This is a normal paragraph:
This is a code block.
end code block.
미리보기
코드블럭 1번째 방법 예시입니다.<코드블럭 2번째 방법 예시입니다.>
다음 줄부터 코드블럭 시작!
여기서 계속 코드블럭이고, 들여쓰지 않는 행을 만날 때까지 계속 코드블럭임
코드블럭 두번째 줄코드블럭이 끝났음.
.``` 이후에 javascript 등 언어를 선언하면 문법강조가 가능하다.
.```javascript``` 와 같은 식으로 코드를 감싸면 된다.<결과>
function funcA() {
}6. 인라인 코드
`로 감싼 텍스트(한 줄 단위 블럭을 만들 수 있음)
마크다운
`이렇게 인라인 코드를 생성합니다.`미리보기
이렇게 인라인 코드를 생성합니다.
7. 수평선
아래의 방법들 중 어느 것을 사용해도 수평선을 만들 수 있다.
나는 주로 ---를 이용한다.
마크다운
* * *
***
*****
- - -
-----------------
<hr/>미리보기
8. 줄바꿈
마크다운 문법에서는 엔터를 입력해도 개행이 되지 않는다.(엔터키 2번은 단락을 구분하는 것)
문장 마지막에서 ' '(공백)을 2번이상 입력하고 엔터로 줄바꿈하면 개행처리가 된다.
마크다운
개행연습입니다. //개행연습(띄어쓰기2번)
개행1<br/> 태그를 이용해서도 개행이 가능합니다.
개행2미리보기
개행연습입니다.
개행1
개행2
9. 표 만들기
본문에 표를 넣을 수 있습니다.
헤더 셀을 구분할 때 3개 이상의 -(하이픈) 기호가 필요합니다.
헤더 셀을 구분하면서 :(콜론) 기호로 셀(열/칸) 안에 내용을 정렬할 수 있습니다.
가장 좌측과 가장 우측에 있는 |(vertical bar) 기호는 생략 가능합니다.
마크다운
| 첫번째(기본왼쪽정렬) | 두번째(가운데정렬) | 세번째(오른쪽정렬) |
|---|:---:|---:|
| `왼쪽` | 정렬확인1 | abc |
| `정렬` | 정렬확인2 | abcdefgh |
| `123` | 정렬확인,정렬확인,정렬확인 | abcdef |
| `456` | 정렬확인1234 | abc |미리보기
| 첫번째(기본왼쪽정렬) | 두번째(가운데정렬) | 세번째(오른쪽정렬) |
|---|---|---|
왼쪽 | 정렬확인1 | 오른쪽 |
정렬 | 정렬확인2 | 정렬 |
123 | 정렬확인,정렬확인,정렬확인 | 123 |
456 | 정렬확인1234 | 456 |
10. 강조
이탤릭체(기울여진 글씨), 굵은 글씨, 밑줄, 취소선 등이 가능하다
마크다운
*이탤릭체*
_이탤릭체_
**굵은글씨**
__굵은글씨__
***굵은글씨+이탤릭체***
___굵은글씨+이탤릭체___
~~취소선~~
**~~굵은글씨+취소선~~**
<u>밑줄</u>미리보기
이탤릭체
이탤릭체
굵은글씨
굵은글씨
굵은글씨+이탤릭체
굵은글씨+이탤릭체
취소선
굵은글씨+취소선
밑줄
11. 링크
인라인 링크와 url 링크 2가지 종류가 있다
11.1 인라인 링크
마크다운
[Google](https://www.google.com "구글")
* 참조링크 방법
Link: [Google][googleLink]
[googleLink]: https://www.google.com "Go google"미리보기
Google
<참조링크 미리보기>
Link: Google
11.2 url 링크
마크다운
<https://www.google.com>12. 이미지
12.1 이미지 삽입
단순 이미지 삽입만 하는 것
마크다운
미리보기
12.2 이미지 링크
이미지에 링크를 걸 수 있음
마크다운
[](https://예시.com "링크 설명")미리보기
12.3 이미지 크기 및 정렬 조절
이미지 크기 조절은 마크다운 문법으론 해결이 어렵고 <img>태그를 이용한다.
마크다운
<img src="이미지 주소" width="450px" height="300px" title="px(픽셀) 고정크기 설정" alt="exampleImage"></img>
<img src="이미지 주소" width="40%" height="30%" title="px(픽셀) %크기 설정" alt="exampleImage2"></img>미리보기
이미지 정렬 조정은 img 태그를 p 태그로 감싸주는 방식 등으로 해결한다.
<p align="center"><img src="https://images.unsplash.com/photo-1659260516446-e49823490a9b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" width="400px"></p>