JinWoo Kim

백문이 불여일견, 백견이 불여일행.

4 minute read

마크다운 작성법

1. 마크다운이란?

  • 2004년 만들어진 텍스트 기반의 마크업 언어.
  • 특수 기호와 문자를 이용한 간단한 문법을 사용.
  • 작성한 문서를 html파일로 빠르게 변환 가능한것이 특징.
  • 깃헙 Repository에 관한 정보를 기록하는 README.md는 마크다운 문법으로 작성됨.

2. 마크다운 사용법

2.1 Inline HTML

  • 마크다운 문법에서 다루지 않는 마크업은 HTML 그 자체를 사용하면 된다.
    • 다만, <div>,<table>,<pre>,<p>등의 블록 태그는 한줄 띄워서 구분하고, 블럭의 시작과 끝 태그는 탭이나 공백으로 들여쓰면 안된다.

    테이블을 추가한다고 가정하면,

    <table>
   <tr>
       <td>one</td>
       <td>two</td>
   </tr>
   <tr>
       <td>three</td>
       <td>four</td>
   </tr>
</table>  

This is another regular paragraph.
    one two
    three four

    This is another regular paragraph.

    이렇게 설정한 블록태그 내부에서는 마크다운 문법이 처리되지 않음에 주의해야 한다.

  • <span>,<cite>,<del>등의 인라인 HTML태그는 마크다운 문단, 목록, 헤더 등에 사용할 수 있다.
    • 따라서, 마크다운 링크나 이미지 문법 대신에 <a>태그나 <img>태그를 사용하는것도 가능하다.

2.2 블럭 요소

2.2.1 강제 줄바꿈

  • 마크다운 문법에서 HTML에서의 <br />태그와 같은 효과를 내려면 줄 마지막에 두칸 공백을 주고 줄바꿈을 하면 된다.

2.2.2 헤더(글머리)

  • 큰 제목(문서 제목) 
    This is H1
==========

    This is H1

  • 작은 제목(문서 부제목) 
    This is H2
----------

    This is H2

    • 큰 제목 및 작은 제목의 밑줄 개수는 여러개이기만 하면 상관없다.

  • 글머리(1~6까지만 지원)

    # This is H1
## This is H2
### This is H3
#### This is H4
##### This is H5
###### This is H6

    This is H1

    This is H2

    This is H3

    This is H4

    This is H5
    This is H6
  • 글머리 헤더를 닫을수도 있다만, 장식용 기능이다. 
    ### This is H3 #
닫는 헤더의 개수는 상관없다.

    This is H3

    닫는 헤더의 개수는 상관없다.

2.2.3 BlockQuote (블록 인용문)

  • > 블록 인용문자를 이용한다.

    > This is a first blockqute.
>	> This is a second blockqute.
>	>	> This is a third blockqute.

    This is a first blockqute. > This is a second blockqute. > > This is a third blockqute.

  • 이 안에는 다른 마크다운 요소를 포함할수 있다.

    > This is H3
> > * List
> > >```
> > >this is code
> > >```

    This is H3

    • List 
      this is code

2.2.4 목록

  • 순서 있는 목록(번호)

    순서 있는 목록은 숫자와 점을 사용한다.

    1. 첫번째
2. 두번째
3. 세번째
    1. 첫번째
    2. 두번째
    3. 세번째
  • 어떤 번호를 적어도 순서는 내림차순으로 정의된다. 
    1. 첫번째
3. 세번째
2. 두번째
    1. 첫번째
    2. 세번째
    3. 두번째
  • 가장 처음에 적은 번호를 기준으로 내림차순이 정의된다. 
    3. 세번째
5. 다섯번째
2. 두번째
    1. 세번째
    2. 다섯번째
    3. 두번째

2.2.5 여러 문단 이어 쓰기

  • 목록 하나에 여러 문단을 이어서 작성하고 싶다면 네개 이상의 공백이나 하나 이상의 탭으로 들여써야한다.

    1. This is a list item with two paragraphs. Lorem ipsum dolor
   sit amet, consectetuer adipiscing elit. Aliquam hendrerit
   mi posuere lectus.

   Vestibulum enim wisi, viverra nec, fringilla in, laoreet
   vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
   sit amet velit.

2.  Suspendisse id sem consectetuer libero luctus adipiscing.

    1. This is a list item with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

      Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

    2. Suspendisse id sem consectetuer libero luctus adipiscing.

2.2.7 코드블럭

  • 글 안에 코드블럭을 넣고싶다면 `(억음 부호. 탭키 위의 자판)을 세번 입력하고 다음줄에 코드를 입력한 후, 다시 억음부호를 세번 입력해 코드블럭을 닫는다.

    (코드블럭 시작)```
your code goes here
(코드블럭 종료)```

    your code goes here

2.3 수평선

  • ---(빼기 세개),***(별표 세개),___(언더바 세개)로 수평선을 만들수 있다.
    원한다면 사이에 공백을 넣어도 된다.

2.4 링크 걸기

마크다운은 인라인 링크와 참조형식 링크 두가지를 지원한다.

2.4.1 인라인 링크

  • 기본적인 형식은 다음과 같다. 
    This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

    This is an example inline link.

    This link has no title attribute.

  • 같은 서버의 리소스를 참조한다면, 상대 경로를 사용할수 있다.

    See my [About](/about/) page for details.

    See my About page for details.

2.4.2 참조 링크

  • 참조형식의 링크는 대괄호를 두번 사용하며, 첫번째에는 링크의 제목을, 두번째에는 링크에 대응하는 레이블을 적는다. 
    This is [an example][id] reference-style link.
  • 그리고 문서 아무곳에나 해당하는 링크를 참조하면 된다.
    참조하는 형식은 다음과 같다. 
    [레이블이름]: 링크 "마우스를 올릴시 나타나는 텍스트"

    [id]: http://example.com/  "Optional Title Here"
  • 결과는 다음과 같다.

    This is an example reference-style link.

  • 또한, 링크의 제목 그 자체를 레이블로 사용할수 있다. 
    Visit [Daring Fireball] for more information.
[Daring Fireball]: http://daringfireball.net/

    Visit Daring Fireball for more information.

2.5 강조

  • 마크다운은 별표(*)와 밑줄(_)을 강조 문자로 다룬다.
    하나의 *나 _로 감싼 문자열은 HTML <em> 태그로 감싸게 되어 이탤릭체로 표기된다.
    두개의 *나 _로 감싸면 HTML <strong> 태그로 감싸게 되어 굵은 글씨로 표기된다.

    *single asterisks*

_single underscores_

**double asterisks**

__double underscores__

    single asterisks

    single underscores

    double asterisks

    double underscores

  • 강조는 단어 중간에도 사용할수 있다. 
    single asterisks use like *this one*

    single asterisks use like this one

  • 강조의 의미로 사용하고 싶지 않다면, 역슬래시(\)를 앞에 붙여 예외처리 하면 된다. 
    only single asterisks use like \*this one\*

    only single asterisks use like *this one*

2.6 이미지 삽입

링크와 마찬가지로, 인라인 방식과 참조 방식 두가지가 있다.

2.6.1 인라인 방식

  • 형식은 다음과 같다. 
    ![이미지 텍스트](이미지URL "마우스를 가져다댔을때 나타나는 텍스트")

    ![Alt text](https://dimg.donga.com/ugc/CDB/WEEKLY/Article/5b/b3/22/85/5bb32285000ed2738de6.jpg "귀여운 고양이 사진")

    Alt text

2.6.2 참조 방식

  • 형식은 다음과 같다. 
    ![이미지 텍스트][레이블이름]
[레이블이름]: 이미지URL "마우스를 가져다댔을때 나타나는 텍스트"

    ![Alt text][meow]
[meow]: https://newsimg.hankookilbo.com/cms/articlerelease/2019/04/29/201904291390027161_3.jpg  "귀여운 고양이 사진2"

    Alt text

2.7 URL 자동 링크

  • URL을 꺽쇠(<>)로 감싸는것으로, 간단하게 링크를 걸 수 있다.



3. 작성하며 참고한 글

You May Also Enjoy