마크다운 문법 정리하기!
마크다운
공부
첫글
2021-10-28

마크다운이란?

검색해서 찾아보기

문법 정리

Headings

제목 태그 1-6단계로 나눠진다. 1단계가 가장 큰 구획, 6단계가 가장 작은 구획이다. #개수에 따라 달라진다.

  1. h1 : heading1 #
  2. h2 : heading2 ##
  3. h3 : heading3 ###

Thematic Break

thematic break는 문단을 나눠주는 가로선이다. --- 또는 ***를 사용한다.

Blockquote

인용 블록 요소 태그이다. 자동으로 들여쓰기가 적용된다. >를 사용한다.

이렇게!

중첩도 가능함!

Unordered List

순서가 없는 리스트. -를 사용해 나타낸다.

  • 리스트 1
  • 리스트 2

Ordered List

순서가 있는 리스트. 숫자와 온점의 조합으로 사용한다. ex) 1. 리스트 1

  1. 리스트 1
  2. 리스트 2

Pre

문자를 그 자체로 출력할 때 사용한다. 백틱(`) 1개를 사용한다. Pre Paragraph

Code

프로그래밍 코드를 작성할 때 사용한다. 백틱(`) 3개를 사용한다.

1  console.log("hello world!");
2  const Text = "안녕하세요";
3  Text.split(" ");

Emphasis

문자를 강조할 때 사용한다. 강조하고 싶은 문자열 양 끝에 _를 사용한다. 강조!

Strong

문자를 강조할 때 사용한다. 강조하고 싶은 문자열 양 끝에 **를 사용한다. 강조2

Delete

취소선을 위해 사용한다. 취소선을 그을 문자열 양 끝에 ~~ 를 사용한다. 취소해버리기

Table

|와 -를 사용해서 테이블을 그릴 수 있다.

SyntaxDescription
HeaderTitle
ParagraphText

Link

링크를 걸기 위해 사용한다. 이동할 주소를 입력하거나 [alt text](url) 의 형태로 사용한다. alt text

Image

이미지를 위해 사용한다. Link 사용법에서 맨 앞에 느낌표(!)를 붙이면 사용할 수 있다. alt text

줄바꿈

줄의 마지막에서 줄바꿈을 하고 싶으면 두개 이상의 스페이스를 사용하면 된다.

커스텀 디자인 적용하기

마크다운 문법을 사용할 수 있는 페이지마다 디자인이 조금씩 다른걸 확인할 수 있다.
마크다운으로 작성된 문서는 HTML 문서로 변환되는데, 이때 변환되는 태그의 디자인 속성을
설정하면 원하는 디자인을 적용할 수 있다.

  1. Blockquote blockquote 깃허브나 벨로그에서 보면 왼쪽에 블럭 단위로 구분되어 있다.
    gatsby 에서는 커스텀 디자인을 적용할 수 있는 태그를 명시하고 있다. 커스텀 가능한 목록
    MDXProvider의 components 속성에 디자인 적용을 원하는 태그와 그에 따른 리액트 커스텀 컴포넌트를 넘겨주면 된다.
    1  <MDXProvider components={{
    2      h1:Foo.h1
    3      h2:Foo.h2
    4  }}

    적용이 된다!

정리

위에서 마크다운 문법을 몇 가지 살펴봤다.
더 많은 마크다운 문법이 있지만 Gatsby에서 커스텀 할 수 있는 태그부터 정리했다.
생각이 나는대로 더 정리해야겠다.

copyright 2021-2022. Jeongki.dev