마크다운 사용해보기

in Unclassified on Blog, Github, Pages, Jekyll, Markdown


이번 포스트에서는 깃허브 블로그 작성에 사용되는 마크다운(Markdown) 에 대해 알아본다. 마크다운은 처음 접할 때는 문법이 다소 낯설게 느껴질 수 있지만, 한 번 익숙해지고 나면 HTML과 같은 다른 웹 기반 언어보다 훨씬 간결하고 편리하게 문서를 작성할 수 있다. 특히 코드 블록, 링크, 이미지, 표와 같은 요소들을 간단한 문법만으로 표현할 수 있어 기술 문서나 개발 블로그 작성에 널리 사용된다. 이번 글에서는 이러한 마크다운의 기본 문법과 실제 블로그 작성에서 자주 사용되는 기능들을 함께 살펴본다.

Markdown이란?

Markdown은 문서를 쉽고 간결하게 작성할 수 있도록 만들어진 경량 마크업 언어이다.

마크다운 왜 사용할까?

일반적으로 사람들이 블로그 글을 작성할 때 많이 사용하는 티스토리나 네이버 블로그는 HTML을 기반으로 동작하는 편집 환경을 제공하지만, 실제로 사용자는 시각적인 에디터를 통해 글을 작성하게 된다.

이러한 방식은 텍스트 중심의 글을 작성하는 데에는 비교적 편리하지만, 이미지나 표, 수식과 같이 다양한 요소를 함께 다룰 때는 다소 불편한 점이 존재한다. 예를 들어 이미지 크기를 세밀하게 조정하거나, 표의 구조를 수정하고 셀을 추가하는 과정이 직관적이지 않을 수 있으며, 수식을 삽입하는 것도 제한적인 경우가 많다.

반면 HTML로 블로그를 직접 작성하는 방식은 문법 구조가 복잡하고 작성 난이도가 높아 일반적인 사용자 입장에서는 부담이 크다.

이와 달리 마크다운을 사용하는 깃허브 블로그는 간단한 문법만으로도 다양한 형태의 문서를 구조적으로 작성할 수 있어, 개발 문서나 기술 블로그 작성에 보다 효율적인 환경을 제공한다.

마크다운의 좋은점은?

마크다운의 장점은 매우 다양하지만, 대표적으로 다음과 같이 정리할 수 있다.

  • 별도의 워드 프로세서 없이도 다양한 환경에서 문서를 작성할 수 있다.
  • 문법이 단순하고 직관적이어서 배우기 쉽다.
  • 텍스트 기반이라 파일 용량이 작고 보관 및 관리가 용이하다.
  • 작성한 문서를 HTML과 같은 형식으로 쉽게 변환할 수 있다.
  • 링크, 코드 블록, 이미지, 표 등을 간단한 문법만으로 작성할 수 있다.

그렇다면 이제 마크다운 문서를 실제로 어떻게 작성하는지 기본 문법을 살펴보자.

마크다운 기본 문법

포스트 작성에 유용한 문법들을 간단히 정리한다.

1. 텍스트 스타일

문장에서 특정 부분을 눈에 띄게 표현할 때 사용한다.

`텍스트 블록`
__볼드(진하게)__
_이탤릭체(기울기)_
~~취소선~~
<u>밑줄</u>
<span style="color:red">강조</span>

텍스트 블록

볼드(진하게)

이탤릭체(기울기)

취소선

밑줄

강조

2. 제목 (Heading)

글의 구조를 잡고, 문서의 계층을 표현할 때 사용한다.

# 글1
## 글2
### 글3
#### 글4
##### 글5
###### 글 6

글1

글2

글3

글4

글5
글 6

3. 목록(List)

목차를 구성하거나 요소를 나열할 때 사용된다.

1. A
2. B
3. C
+ 1
  - 2
    * 3
      + 4
  1. A
  2. B
  3. C
    • 1
      • 2
    • 3

      • 4

4. 텍스트박스(TextBox)

인용문 혹은 강조하고 싶은 문장이 있을 때 사용한다.

> 아이즈원 조유리
>> 좋아
>>> 조유리 화이팅!

아이즈원 조유리

좋아

조유리 화이팅!

클릭하면 다른 페이지로 이동하거나 같은 페이지의 다른 문단으로 이동한다.

1. [클릭하면 URL로 이동](https://ekspertos.github.io)
2. <https://ekspertos.github.io>
3. [문단이동](#마크다운-기본-문법)
  1. 클릭하면 URL로 이동
  2. https://ekspertos.github.io
  3. 문단이동

6. 이미지(Image)

글에 이미지를 삽입한다.

1. (``이미지`` 삽입) :
![이미지](https://ekspertos.github.io/assets/img/me2.jpg "인공지능")
2. (`사이즈를 조절`하고 싶은 경우 HTML 태그로 처리) :   
<img src="https://ekspertos.github.io/assets/img/me2.jpg" width="300" height="200">

3. (이미지 삽입 후, `링크 걸기`)
[![이미지](https://ekspertos.github.io/assets/img/me2.jpg)](https://ekspertos.github.io/assets/img/me2.jpg)
  1. (이미지 삽입) : 이미지

  2. (사이즈를 조절하고 싶은 경우 HTML 태그로 처리) :

  3. (이미지 삽입 후, 링크 걸기) 이미지

7. 표 (Table)

글에 표를 작성한다.

|     | 표 | 작성 |  
| :---| ---: | :---: |  
| A | 100 | 호 |  
| B | 200 | 우 |
 표작성
A100호
B200우

마무리

이로써 마크다운에서 자주 사용하는 기본 문법들을 정리해보았다.

처음에는 다소 낯설게 느껴질 수 있지만, 익숙해지면 글을 구조적으로 작성하는 데 훨씬 수월해진다.

앞으로 사용하면서 새롭게 알게 되는 내용이나 유용한 기능이 있다면 그때그때 추가로 정리해 나갈 것이다.


© 2021.06. by ekspertos

Powered by Ekspertos