소프트웨어Markdown

3편. Markdown - Text, List

, , , , , , ,

목차

  1. Markdown 공부하는 방법
  2. Text 작성
  3. List 작성

알림 : 본 문서는 Markdown을 공부하러 들어오시는 분들에게 가이드를 제공하지만, 그와 별개로 필자가 외우기 싫어서 머리가 나빠 자기 보기 편할려고 정리한 목적이 크다보니 상단에 목차를 만들어 두었다. 목차를 클릭하여 세부 메뉴로 이동 후 다시 목차로 돌아오고 싶으면 ‘브라우저 뒤로가기’를 하면 된다.



Markdown 공부하는 방법

본 포스팅에서는 Markdown과 GFM을 구분하지 않고 그냥 Markdown이라고 칭하겠다.

Markdown은 프로그래밍 언어가 아니다. Markdown은 Markup 언어이다. 그러니 Markup 언어는 ‘이게 어떻게 작동하는 거지?’를 너무 고민하지 않고, 사용 방법을 그냥 외우시면 된다. 그러나 어쨌든 외워야 하는 양이 꽤나 많기 때문에 학습하는 과정에서는 이를 외우는 데에 우선순위가 필요한데, 아래 항목 중 「(1) 기본」에 집중하면 금방 익숙해질 수 있으니 이 순서대로 해 배워보시라고 추천드린다.

(1) 기본 : Text > List > Link > Image > Table > Code Block > Escape
(2) 응용 : 위 기본 사항 외 Markdown 문법을 사용하여 세련된 문서 만들기

본 블로그에서 정리하려고 하는 내용은 Github Guide - Mastering Markdown에 있는 내용들이다.



Text 작성

  • 일반 텍스트와 단락 나누기, Generic Text & Paragraph

아래 그림은 Github의 웹사이트에서 제공하는 Markdown Editor이다. 일반 텍스트 에디터에 작성하듯이 텍스트를 작성하면 된다. Markdown의 일반 텍스트 입력한 모양은 대략 아래와 같고, 결과는 본 블로그와 같다.

Github Editor에서 텍스트 사용하기

Github의 Markdown에서는 위 그림에서 보는 바와 같이 Enter Key로 줄을 띄어쓰기 하면 그 기준대로 문단(paragraph)으로 구성된다. 엔터의 빈 줄 처리를 지원하지 않는 Markdown도 있으므로, Github에서 Markdown을 다른 사이트로 옮길 때는 필요 시 <br> 태그를 사용해야 함 정도를 알아두시면 된다.


  • 제목 표시, Headers

Markdown에서는 HTML의 <h1>부터 <h6>까지 사용할 수 있으며, 텍스트 앞의 #의 개수에 따라 구분한다.

1
2
3
4
5
6
#       # 1개는 <h1>
##      # 2개는 <h2>
###     # 3개는 <h3>
####    # 4개는 <h4>
#####   # 5개는 <h5>
######  # 6개는 <h6>

Markdown과 GFM을 구분 페이지의 ‘알아두면 좋은 유의 사항’에 언급한 바와 같이 Github에 작성하는 Markdown과 Github Pages에서 Framework 및 Theme을 사용하는 경우는 모양이 다르게 나타날 수 있다. 제목을 표시하는 Header의 경우가 대표적이며, 현재 필자가 본 블로그에서 사용하고 있는 테마(Theme)에서는 아래와 같이 표시된다.

h1 태그

h2 태그

h3 태그

h4 태그

h5 태그
h6 태그

그 외에도 제목 강조 표시 는 아래와 같은 방식으로 H1과 H2를 사용할 수 있다. 하지만, 필자 입장에서는 실제 작성할 때 해당 문법이 잘 생각이 나지 않아 사용 빈도가 낮은 편이다. (그냥 Sharp # 표시가 외우기도 쉽고 편하기에…)

1
2
3
4
5
Heading 1 태그로 작동
=====================

Heading 2 태그로 작동
---------------------

Heading 1 태그로 작동

Heading 2 태그로 작동


  • 글자 강조, Emphasis

본 블로그의 Markdown 소개 페이지에서 언급한 바와 같이 Markdown은 발표되던 당시 다양하게 존재하던 여러 Text-to-HTML 문법들을 차용하였기 때문에 텍스트를 강조하는 방법이 한 개 이상 존재하곤 한다. 특별히 다른 점 없이 같은 기능이니 아무거나 본인 손에 맞는 대로 사용하면 된다.

1
2
*기울어진 글씨를 쓰기 첫 번째 방법*
_기울어진 글씨를 쓰기 두 번째 방법_

기울어진 글씨를 쓰기 첫 번째 방법

기울어진 글씨를 쓰기 두 번째 방법


1
2
**두꺼운 글씨를 사용하는 첫 번째 방법**
__두꺼운 글씨를 사용하는 두 번째 방법__

두꺼운 글씨를 사용하는 첫 번째 방법

두꺼운 글씨를 사용하는 두 번째 방법


1
_글씨 강조 규칙은 **여러 개를 섞어서** 사용할 수 있다._

글씨 강조 규칙은 여러 개를 섞어서 사용할 수 있다.


1
취소선을 ~~적용~~ 사용할 때는 **이런 식으로** _쓸 수 있습니다._

취소선을 적용 사용할 때는 이런 식으로 쓸 수 있습니다.


  • 줄 바꿈, Line Break
1
2
3
4
5
6
7
줄 바꿈 시에는 끝에 공백을 2개 이상 두면 줄 바꿈이 된다.  

이 예제를 드래그해 보면 알 수 있다.   
이 예제를 드래그해 보면 알 수 있다.  
이 예제를 드래그해 보면 알 수 있다. 
이 예제를 드래그해 보면 알 수 있다.<br>
이 예제를 드래그해 보면 알 수 있다.

줄 바꿈 시에는 끝에 공백을 2개 이상 두면 줄 바꿈이 된다.

이 예제를 드래그해 보면 알 수 있다.
이 예제를 드래그해 보면 알 수 있다.
이 예제를 드래그해 보면 알 수 있다. 이 예제를 드래그해 보면 알 수 있다.
이 예제를 드래그해 보면 알 수 있다.

줄바꿈 공백

위와 같이 공백 1칸일 때는 그냥 띄어쓰기라 생각해 줄바꿈이 되지 않는다. 2칸 이상의 공색은 바로 아랫줄로 줄바꿈이 된다. (문단 형식으로 2칸 띄어 쓰기는 <br> 태그를 사용해야 한다.)



List 작성

  • 글머리 기호, Unordered List

Markdown에서 글머리 기호는 • 표시만 가능하다. Microsoft Office에서 사용하는 여러 모양(네모, 마름모 등)을 사용할 수는 없다.

Markdown의 글머리 기호를 표시할 때는 *, +, - 총 세 가지 기호를 사용할 수 있다. 어떤 기호를 넣어도 • 표시로만 나타난다. 그러니 그냥 본인이 알아 보기 쉬운 기호를 사용하면 된다.

1
2
3
4
5
6
7
8
9
* 글머리 1a
* 글머리 1b
* 글머리 1c
  + 글머리 2a
  + 글머리 2b
  + 글머리 2c
    - 글머리 3a
    - 글머리 3b
    - 글머리 3c
  • 글머리 1a
  • 글머리 1b
  • 글머리 1c
    • 글머리 2a
    • 글머리 2b
    • 글머리 2c
      • 글머리 3a
      • 글머리 3b
      • 글머리 3c

  • 번호 순서 정렬, Ordered List

Markdown의 번호 순서 정렬에는 몇 가지 규칙을 가지고 있어 이를 이해해야 외워야 한다.

(1) Markdown에서 번호 순서 대로 정렬할 때는 아래와 같이 숫자를 넣어 사용하면 된다.
(2) 같은 Depth 내에서는 어떤 번호를 넣어도 무조건 순서대로 표시된다.
(3) 해당 Depth의 시작 번호는 제일 처음 사용된 번호에서부터 시작된다.

1
2
3
4
5
6
7
8
9
1. 번호 정렬 1a
3. 번호 정렬 1b
0. 번호 정렬 1c
  2. 번호 정렬 2a
  9. 번호 정렬 2b
  5. 번호 정렬 2c
    4. 번호 정렬 3a
    7. 번호 정렬 3b
    1. 번호 정렬 3c
  1. 번호 정렬 1a
  2. 번호 정렬 1b
  3. 번호 정렬 1c
    2. 번호 정렬 3a
    9. 번호 정렬 3b
    5. 번호 정렬 3c
    1. 번호 정렬 3a
    2. 번호 정렬 3b
    3. 번호 정렬 3c

  • 번호 순서 정렬 관련 팁

Markdown의 번호 순서 정렬 규칙을 이해해야 하는 이유는 Markdown을 사용하는 개발자들이 흔히 올려 놓는 팁에 잘 나타난다. 실제 일반적으로는 아래와 같이 사용한다.

실제 서비스를 배포하여 운영하다보면 컨텐츠의 순서를 뒤바꾸거나, 추가/삭제해야 하는 일이 빈번하게 발생하기 때문에 그냥 알아 보기 쉽게 특정 숫자만으로 정렬한다. 어떤 숫자를 쓰느냐는 본인 취향이지만, 위에 기재된 규칙 중 (3)번을 고려해야 하기 때문에 일반적으로는 숫자 1을 사용한다.

1
2
3
4
5
1. 예 1번
1. 예 2번
1. 예 3번
1. 예 4번
1. 예 5번
  1. 예 1번
  2. 예 2번
  3. 예 3번
  4. 예 4번
  5. 예 5번

  • 정렬 방식 혼합

Markdown에서 글머리 기호화 번호 순서 정렬은 혼합해서 사용할 수 있다. 단, 같은 Depth 내에서는 숫자와 글머리 기호 중 하나만 선택하여 사용할 수 있다.

1
2
3
4
1. 번호 정렬 1a
1. 번호 정렬 1b
  * 글머리 기호 2a
  * 글머리 기호 2b
  1. 번호 정렬 1a
  2. 번호 정렬 1b
    * 글머리 기호 2a
    * 글머리 기호 2b

  • 체크 박스 목록

체크 박스 목록을 표시할 때에는 - 기호와 [ ] 기호를 이용하여 표시할 수 있다. 체크박스 역시 일반 목록과 마찬가지로 들여쓰기 할 수 있다. 

1
2
3
4
5
6
- [x] 체크 표시된 체크 박스
  - [x] 체크 표시된 체크 박스
- [ ] 표시 없는 체크 박스
  - [ ] 표시 없는 체크 박스
  - [ ] 표시 없는 체크 박스
- [ ] 표시 없는 체크 박스
  • 체크 표시된 체크 박스
    • 체크 표시된 체크 박스
  • 표시 없는 체크 박스
    • 표시 없는 체크 박스
    • 표시 없는 체크 박스
  • 표시 없는 체크 박스

필자가 사용 중인 Hexo에서는 체크 박스 앞쪽에 List Bullet이 표시되지만, Github에서 지원하는 GFM에서는 나타나지 않는다.

GFM에서의 체크 박스 목록

(※참고 :이유는 알 수 없으나 Markdown에서 Radio button은 공식적으로 지원하지 않는다.)



주요 참고 자료