Markdown

[Markdown] .md 형식의 Markdown 이해하기

Minny27 2021. 7. 16. 20:01

MarkDown 사용법

ㅁ .md 확장자를 사용하는 이유

코드 설명 및 정리가 유용하고 쉽고 빠르게 저장 및 공유할 수 있습니다. 또한 특정 도구없이 작성이 가능하다는 장점이 있습니다.

1. 글자 크기

'#' 을 사용하면 크기를 조절할 수 있고 최대 6개까지 사용 가능합니다.
```
  ex)
  # 안녕하세요?! 
```

2. BlockQuote

'>'을 사용하면 문자 앞에 블럭을 생성할 수 있습니다.
```
  ex)
  > 오늘의 주제
```

3. BlockQuote

'*', '+', '-' 을 사용하면 목록을 작성할 수 있습니다.
```
  ex)
  * 자료구조 
```

4. 코드 블럭

<pre><code> 내용 </code></pre> 로 작성할 수 있습니다.

  ex)
  <pre>
  <code>
  input = sys.stdin.readline
  </code>
  </pre>

또는 ` 을 3번 사용하면 내용에 블럭을 생성할 수 있습니다. 그리고 한줄에서 사용할 때는 한 개만 사용해도 됩니다.
` 는 작은 따옴표가 아니라는 것을 주의하자!

5. 수평선

'* * ' 또는 '**' 또는 '- - -' 을 이용하면 수평선을 생성할 수 있습니다.
```
  ex)
  1부 내용
  ***
  2부 내용
```

6. 개행

문자열 끝에 띄어쓰기 2회 이상하면 줄바꿈이 됩니다.

글과 글 사이의 간격을 두고 싶다면 <br> 태그를 이용할 수 있습니다.

  ex)
  밥을 많이 먹지 않았다.  # 띄어쓰기 2번
  그러나 살이 찌고 말았다.

  ------------------------------

  1. 배열

  <br>

  2. 문자열

7. 기울기 및 강조

"문자", 문자, 문자 로 문자를 강조할 수 있습니다.

  ex)
  *강조할 내용*
  **강조할 내용**
  ~~강조할 내용~~

8. 코드 인용

`뒤에 py를 쓰면 코드가 python 형식으로 키워드가 강조됩니다.
```
ex)
```py
import sys
input = sys.stdin.readline
```

9. 링크 인용

'[' ']' 꺾쇠를 이용해서 참조 링크를 생성할 수 있습니다.
```
  ex)
  [Naver][Naverlink]
  [Naverlink]: www.naver.com "naver!"
```
'[' ']' 꺾쇠를 이용해서 외부 링크를 생성할 수 있습니다.
```
  ex)
  [Naver](www.naver.com, "naver link")
```
'<'>' 꺾쇠를 이용해서 자동 연결 링크를 생성할 수 있습니다.
```
  ex)
  <www.naver.com>
```

10. 이미지 삽입

상대주소, 절대주소로 이미지를 업로드할 수 있습니다.
여기서 주의할 점은 상대주소로 접근할 때는 .git파일이 포함된 리포지토리 안에 이미지 파일이 포함되어 있어야합니다.

링크를 cmd + 클릭을 했을 때 이미지가 나와야합니다.

  ㅁ 상대주소로 접근
      ![태그명](.git을 포함하고 있는 파일명/이미지.jpg)
      ex)
      ![하트](Images/heart.jpg)

      또는

      <img src="git을 포함하고 있는 파일명/이미지.jpg" width="450px" height="300px"></img>
      ex)
      <img src="Images/heart.jpg" width="450px" height="300px"></img>

  ㅁ 절대주소로 접근
      ![태그](이미지 링크)
      ex)
      ![하트](https://github.com/Minny27/TIL_PUBLIC/blob/main/Images/heart.jpg)

      또는

      <img src="이미지 링크" width="450px" height="300px"></img>
      ex)
      <img src="https://github.com/Minny27/TIL_PUBLIC/blob/main/Images/heart.jpg" width="450px" height="300px"></img>

11. 정렬

    ㅁ 가운데 정렬
        <p align="center">
            가운데
        </p>

    ㅁ 왼쪽 정렬
        <p align="left">
            왼쪽
        </p>    
    ㅁ 오른쪽 정렬
        <p align="right">
            오른쪽
        </p>

12. 표 만들기

    ex)
    |제목|내용|설명|
    |---|---|---|
    |테스트1|테스트2|테스트3|
    |테스트1|테스트2|테스트3|
    |테스트1|테스트2|테스트3|

    왼쪽 정렬
    |제목|내용|설명|
    |:---|:---|:---|
    |테스트1|테스트2|테스트3|
    |테스트1|테스트2|테스트3|
    |테스트1|테스트2|테스트3|

    가운데 정렬
    |제목|내용|설명|
    |:---:|:---:|:---:|
    |테스트1|테스트2|테스트3|
    |테스트1|테스트2|테스트3|
    |테스트1|테스트2|테스트3|


    오른쪽 정렬
    |제목|내용|설명|
    |---:|---:|---:|
    |테스트1|테스트2|테스트3|
    |테스트1|테스트2|테스트3|
    |테스트1|테스트2|테스트3|

참고 출처

저작자표시

현재글[Markdown] .md 형식의 Markdown 이해하기

ELLO의 개발일지