[Markdown]마크다운 사용방법

hotoron·2020년 8월 27일
4

👾 개발지식

목록 보기
1/7
post-thumbnail

마크다운(Markdown)

마크다운이란?

일반 텍스트 형식 구문을 사용하는 마크업 언어의 일종으로 사용법이 쉽고 간결하여 빠르게 문서 정리를 할 수 있습니다. 단, 모든 HTML 마크업을 대체하지는 않습니다.

📌문법

1. Header

헤더는 제목을 표현할 때 사용합니다.

단순히 글자의 크기를 표현하는 것이 아닌 의미론적인 중요도를 나타냅니다.

  • <h1>부터 <h6>까지 표현 가능합니다.

  • #의 개수로 표현하거나 <h1></h1>의 형태로 표현 가능합니다.

    👊 사용예시

    # h1 태그입니다.
    ## h2 태그입니다.
    ### h3 태그입니다.
    ##### h4 태그입니다.
    ###### h5 태그입니다.
    ####### h6 태그입니다.

    👉출력결과

    h1 태그입니다.

    h2 태그입니다.

    h3 태그입니다.

    h4 태그입니다.

    h5 태그입니다.
    h6 태그입니다.

2. List

목록을 나열할 때 사용합니다.

순서가 필요한 항목과 그렇지 않은 항목으로 구분할 수 있습니다. 순서가 있는 항목 아래 순서가 없는 항목을 지정할 수 있으며 그 반대도 가능합니다.

  • 순서가 있는 목록

    • 1.을 누르고 스페이스바를 누르면 생성할 수있습니다.

    • tab키를 눌러서 하위 항목을 생성할 수 있고 shift + tab 키를 눌러서 상위 항목으로 이동 할 수 있습니다.

      👊사용예시

      1. 순서가 있는 항목 (enter)
      2. 순서가 있는 항목 (enter)
      (tab) 1. 순서가 있는 항목 (enter)
      	  2. 순서가 있는 항목

      👉출력결과

      1. 순서가 있는 항목
      2. 순서가 있는 항목
        1. 순서가 있는 항목
        2. 순서가 있는 항목
  • 순서가 없는 목록

    • -(하이픈) 또는 *을 쓰고 스페이스바를 누르면 생성할 수 있습니다.

    • tab 키를 눌러서 하위 항목을 생성할 수 있고 shift + tab 키를 눌러서 상위 항목으로 이동 할 수 있습니다.

      👊사용예시

      - 순서가 없는 항목 (enter)
      - 순서가 없는 항목 (enter)
      (tab) 순서가 있는 항목 (enter)
      	  순서가 있는 항목

      👉출력결과

      • 순서가 없는 항목
      • 순서가 없는 항목
        • 순서가 없는 항목

        • 순서가 없는 항목

3. Code Block

코드 블럭은 작성한 코드를 정리하거나 강조하고 싶은 부분을 나타낼 때 사용합니다.

인라인과 블럭 단위로 구분 할 수 있습니다.

  • Inline

    • 인라인 블럭으로 처리하고 싶은 부분을 ` (백틱) 으로 감싸줍니다.

      👊사용예시

      `sample code`

      👉출력결과

      sample code

  • Block

    • `(백틱)을 3번 입력하고 enter를 눌러 생성합니다.

      👊사용예시

      ​``` + sample code

      👉출력결과

      sample code

4. Image

로컬에 있는 이미지를 삽입하거나 이미지 링크를 활용하여 이미자를 나타낼 때 사용합니다.

  • ![]()을 작성하고 ()안에 이미지 주소를 입력합니다. []안에는 이미지 파일의 이름을 작성합니다.

  • 로컬에 이미지파일을 저장한 경우 절대 경로가 아닌 상대 경로를 사용하여 이미지를 저장합니다.

    👊사용예시

    ![git&github](https://i.morioh.com/2019/11/11/1f265e2d4c43.jpg)

    👉출력결과

특정 주소로 링크를 걸 때 사용합니다.

  • []() 을 작성하고 ()안에 링크 주소를 작성하고 [] 안에 어떤 링크 주소인지 작성합니다.

👊사용예시

[git 공식문서](https://git-scm.com)

👉출력결과

git 공식문서

6. Table

표를 작성하여 요소를 구분할 수 있습니다.

  • |(파이프) 사이에 컬럼을 작성하고 enter를 입력합니다.
  • 마지막 컬럼을 작성하고 뒤에 |를 붙여줍니다.

👊사용예시

|working directory|statging area|remoe repo|
|working tree|index|history|
|working copy|cache|tree|

👉출력결과

| working directory | statging area | remoe repo |
| ----------------- | ------------- | ---------- |
| working tree | index | history |
| working copy | cache | tree |

7. 마크다운 포맷 무시하기

  • \(backslash)를 원하는 글자 앞에 붙입니다.

    👊사용예시

    - 볼드체 대신 **별표**를 출력하고 싶어요
    - 볼드체 대신 \*\*별표\*\*를 출력하고 싶어요

    👉출력결과

    • 볼드체 대신 별표를 출력하고 싶어요
    • 볼드체 대신 **별표**를 출력하고 싶어요

8. 인용문

  • >을 입력하고 enter or space키를 누릅니다.

    👊사용예시

    > enter
    git은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산버전 관리 시스템이다.

    👉출력결과

    git은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산버전 관리 시스템이다.

  • 인용문 안에 인용문을 작성하면 중첩해서 사용할 수 있습니다.

    👊사용예시

    > $ git add. enter
    > $ git commit -m "first commit" enter
    > $ git push origin master

    👉출력결과

    $ git add.

    $ git commit -m "first commit"

    $ git push origin master

9. 수평선

  • ---,***,___ 을 입력하여 작성합니다

    👊사용예시

    Working Directory
    ---
    Staging Area
    ***
    Remote Repository
    ___

    👉출력결과

    Working Directory

    Staging Area


    Remote Repository


10. 강조

  • 이탤릭체는 해당 부분을 *혹은 _(언더바) 로 감싸줍니다.

  • 볼드체는 해당 부분을 **혹은 __(언더바 2개)로 감싸줍니다.

  • 취소선은 ~~표시를 사용합니다.

    👊사용예시

    이것은 *이탤릭체* 입니다.
    
    이것은 **보드체**입니다.
    
    이것은 ~~취소선~~ 입니다.

    👉출력결과

    이것은 이탤릭체 입니다.

    이것은 보드체입니다.

    이것은 ~~취소선~~ 입니다.

11. 체크박스

  • -, *, + 을 작성하고 [] 를 넣어주세요

  • [ ]는 빈 체크박스, [x]는 표시가 된 체크박스입니다.

    👊사용예시

    - [ ] 일일커밋하기
    - [x] 알고리즘 문제 풀기

    👉출력결과

    • [ ] 일일커밋하기
    • [x] 알고리즘 문제 풀기

12. 접기/펼치기

  • 마크다운에서는 지원하지 않지만 html의 details태그를 이용하면 사용가능하다.

  • ❌velog에서는 적용이 불가합니다❌

    👊사용예시

    <details>
        <summary>접기/펼치기</summary>
        <div markdown="1">
        
        여기에 내용을 적습니당
        이렇게 뿅 내용이 나타납니다😁
        
    </details>

    👉출력결과

    접기/펼치기
    여기에 내용을 적습니당
    이렇게 뿅 내용이 나타납니다😁

13. 이모지

  • 단축키는 window키 + . 을 사용합니다.

  • iemoji.com에서 원하는 이모지를 ctrl+c + ctrl+v 하셔도 됩니다.

  • 글씨와 마찬가지로 여러 옵션이 적용됩니다.

    👊사용예시

    #### 👀👌
    ## 👀😊

    👉출력결과

    👀👌

    👀😊

profile
응애 나 아기코더👶

0개의 댓글