마크다운 작성법 요약 - 마크다운 블로그를 작성할때 필수 지식!

마크 다운 작성법을 아주 간략하게 적어 보았다.
마크 다운 블로그를 작성할때 모르겠으면 컷닝하자!
특히 이미지, 링크는 잘 까먹으니 참고 하자

1. 줄바꿈

  • 일반 문단인 경우
    • 라인끝에 띄어쓰기 두번
  • 여러 라인을 넣고 싶으면
    • <br/>


2. 강조

*강조 1*  
_강조 2_  
**강조 3**  
__강조 4__  
~~취소선~~

강조 1
강조 2
강조 3
강조 4
취소선

3. 헤더

# H1 태그
## H2 태그
### H3 태그
#### H4 태그
##### H5 태그
###### H6 태그


4. 인용

> 인용
>> 인용2
>>> 인용3

인용

인용2

인용3


5. 목록

- 순서 있는 목록

1. 첫번째
1. 두번쨰
1. 세번째
  1. 첫번째
  2. 두번쨰
  3. 세번째


- 순서 없는 목록

- a
  + b
    * c
  • a
    • b
      • c


6. 코드 삽입

6 - 1. 블록으로 코드 삽입

    ```js
    function test () {
        console.log('Hello, markdown testing.')
    }
    ```

function test () {
    console.log('Hello, markdown testing.')
}

6 - 2. 인라인으로 코드 삽입

    `<div>인라인 코드 블록</div>`

<div>인라인 코드 블록</div>


7. 수평선

---
<hr/>


8. 링크

1. 링크 사용법 1  
<https://google.com>  

2. 링크 사용법 2  
[구글 링크](https://google.com, "마우스 툴팁 이건 옵션")  

3. 링크 사용법 3 (변수 사용)  
[링크 최종 이름][링크변수]

[링크변수]: <https://google.com> “마우스 툴팁 이건 옵션”

4. 링크 사용법 4 (해당 페이지의 제목 링크)  
[줄바꿈 항목으로](#1-줄바꿈)

1. 링크 사용법 1
https://google.com

2. 링크 사용법 2
구글 링크

3. 링크 사용법 3 (변수 사용)
링크 최종 이름

4. 링크 사용법 4 (해당 페이지의 제목 링크)
줄바꿈 항목으로

링크 변수 사용할 때 아래 같은 경우 제대로 동작하지 않았다. 조심하자

  • 띄어쓰기가 없는 경우 (두개의 라인이 붙어있는 경우)
[링크 최종 이름2][링크변수2]
[링크변수2]: <https://google.com> “마우스 툴팁 이건 옵션”

9. 이미지

1\. 이미지 사용법 1  
<img src="/assets/image/TestImage.png" width="300px"/>

2\. 이미지 사용법 2  
![이미지텍스트](/assets/image/TestImage.png "테스트 이미지"){: width="300px"}

3\. 이미지 사용법 3 (변수 사용)  
![이미지 이름][이미지변수]{: width="300px"}

[이미지변수]: /assets/image/TestImage.png

1. 이미지 사용법 1

2. 이미지 사용법 2
이미지텍스트

3. 이미지 사용법 3 (변수 사용)
이미지 이름

응용편으로 이미지를 클릭했을 때 링크로 가게 하는 방법이다. 방법은 링크의 텍스트가 나타나는 부분에 이미지를 넣는 것이다.

[![이미지 텍스트][이미지 링크의 이미지변수]{: width="300px"}][이미지 링크의 URL변수]

[이미지 링크의 이미지변수]: /assets/image/TestImage.png
[이미지 링크의 URL변수]: <https://google.com>

이미지 텍스트

10. 표 만들기

| 가운데 정렬 | 오른쪽 정렬 | 왼쪽 정렬 |
| :---------: | ----------: | :-------- |
|   음료수    |      1000원 | 100개     |
|    과자     |      1500원 | 20개      |
가운데 정렬 오른쪽 정렬 왼쪽 정렬
음료수 1000원 100개
과자 1500원 20개

11. 체크 박스

- [ ] YAML
- [x] YAML
  • YAML
  • YAML

12. 접기 / 펼치기

마크다운에서는 기본적으로 접기 / 펼치기를 제공하지 않는다.
그래서 html의 details를 이용한다.

<details>
<summary>펼치기 제목</summary>
<div markdown="1">
마크다운 내용  
div에 markdown="1" 속성은 jekyll에서 html사이에 markdown을 알려주기 위한 속성이다.
- [x] 이건 마크다운의 체크박스
</div>
</details>
펼치기 제목

마크다운 내용
div에 markdown=”1” 속성은 jekyll에서 html사이에 markdown을 알려주기 위한 속성이다.

  • 이건 마크다운의 체크박스

댓글남기기

참고