Markdown이란 무엇인가?

마크다운은 일종의 태그입니다. 최근에 개발자 문서를 웹을 통해 배포하기 위해서 HTML을 공부해서 웹페이지를 만들었습니다. 신기하게도 난 그저 텍스트만 입력하면 나머지는 HTML 태그와 CSS 속성들에 의해서 알아서 꾸며지는 것이었습니다.

간단한 문서화 작업에 CSS를 쓸 것인가?

프로그래머이지만 디자인 등에도 관심이 있는 저로써는 블로그를 쓰는데도 여간 신경쓰이는 부분이 많은게 아니었습니다. 보통의 블로그 페이지에서 제공하는 기능들로는 원하는 모양의 블로그를 쓰는게 힘들었습니다. 워드와 같이 스타일 Sheet가 있는 것도 아니고 그렇다고 CSS 등을 이용해서 하자니 오버하는 것 같았습니다. 누가 만들어 놓은것 없나?

절충점에 서있는 Markdown

Markdown은 일종의 CSS입니다. 특정한 태그를 붙이고 글을 쓰면 해당 글에 정해진 스타일(CSS)이 입혀지는 것입니다. 그래서 어떤 마크다운을 쓰느냐? 어떤 테마를 쓰느냐에 따라 블로그 디자인 및 사용자 UX가 확연히 달라집니다.

Markdown 문법 알아보기

Header (#)

HTML의 h1, h2, h3와 같은 기능을 합니다. 문서 내용 중 목록을 나타냅니다. 계층적인 관계도 나타내고, 실제 글자 크기도 shap 개수가 늘어날수록 크기가 작아집니다.

인용 어구 (>)

인용 어구를 사용하면 해당 글조각을 강조할 수 있다.

> 너 자신을 알라.<br/>
> 지피지기면 백전백승

너 자신을 알라.
지피지기면 백전백승

Code (~~~ java)

public void main(Strint[] args) {
    System.out.println("Hello, Java");
}

프로그래머들에게 마크다운이 최적의 솔루션이 될 수 있는 이유는 위와 같이 소스 코드를 간단하게, 이쁘게 포스팅할 수 있다는 것입니다. 대부분의 주요 프로그램 언어를 지원하기 때문에 골라서 사용하면 됩니다.

• java
• html
• javascript
• ruby
• c(++)

Horizontal Rules (—)

단락 구분을 위한 “줄긋기” 입니다. 다음과 같이 다양한 방식으로 쓸 수 있습니다. 그러나 HTML로 바뀌면 모두다 ‘‘<hr/>’’ 태그입니다.

* * *

---

_  _  _  _

---------------

List (*)

• 리스트 1
• 리스트 2
• 리스트 3

Ordered List(1,2,3)

1. 첫번째
2. 두번째
   1. 두번째 중 첫번째
   2. 두번째 중 두번째
3. 세번째

정의 리스트 (:)

나란 사람은?

나는 나다.

너는 아니다.

강조 (**)

나는 이곳을 강조한다.

테이블 (| :—-)

이미지

다음과 같이 html 코드를 사용하여 이미지를 등록할 수 있다. 즉, 일반적인 HTML5 문법을 사용 가능하다는 것이다. 여기에 테마에서 지원하는 CSS가 자동으로 적용되는 것이다.

<figure>
    <a href="https://atinjin.github.io//images/lena_big.jpg"><img src="https://atinjin.github.io//images/lena.jpeg"></a>
    <caption></caption>
</figure>

두가지 이미지를 등록했습니다. 하나는 링크(a)를 나머지 하나는 이미지(img)입니다. 링크(a)를 이용해 추가한 이미지의 경우는 “클릭”에 반응합니다. 이미지를 클릭할 경우 링크의 이미지가 팝업됩니다.

또한 글과 함께 그림을 넣을 수도 있는데

![Smithsonian Image](https://atinjin.github.io/images/3953273590_704e3899d5_m.jpg)
{: .pull-right}

쓰고 싶은 글을 쓰는곳~~~

원하는 글을 함께 쓰면 이렇게 정렬이 된다. 이 경우 글의 오른쪽에 그림이 위치하도록 하였다. 옵션을 바꿀 경우 왼쪽에 위치 시킬 수도 있다. 글을 많이 써도 알아서 들여쓰기가 되기 때문에 글을 쓰는 사람은 글의 모양이 나빠지는 것에 대해서 고민할 필요가 없어진다. 어찌보면 HTML와 CSS를 알면 다 할 수 있는 부분이다. 그러나 마크다운을 쓸 경우 이를 좀 더 편하게 미리 다른 사람이 잘 정의해놓은 양식을 빌려다 쓸 수 있다. 물론 완벽하게 마크다운을 쓰기 위해서는 HTML과 CSS의 기본적인 원리, 종류를 알고 있으면 좋다.

원하는 글을 함께 쓰면 이렇게 정렬이 된다. 이 경우 글의 왼쪽에 그림이 위치하도록 하였다. pull-left로 옵션을 바꾸었기 때문이다. 해당 옵션은 사실 CSS에서 해당 부분에 적용할 클래스를 지정하는 것이다.

비디오

비디오 클립을 추가할 수도 있다. ‘‘<iframe>’’ 태그를 사용하면 된다.

<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>

주석

용어 설명 등과 같이 따로 추가적인 설명이 필요한 경우 주석 기능을 사용하면 된다. 주석의 경우 주석을 달기 원하는 단어 옆에 ‘[^주석 번호]’를 표시하고 아무곳에서나 ‘[^주석 번호]:’를 정의하면 된다. 그러면 해당 주석은 문서의 맨 아래 달릴 것이다.

여기에 주석¹을 달았다. 주석이란 글씨 옆의 숫자 1을 클릭하면 주석으로 이동한다.

버튼

링크를 버튼 모양으로 달수도 있다.

<div markdown="0"><a href="http://blog.ryanjin.net" class="btn">This is a button</a></div>

Gist 추가하기

무궁무진한 마크다운

마크다운은 기본적으로 좀 더 편리하게 정의해놓은 HTML/CSS 패키지라고 할 수 있다. 그렇기 때문에 마크다운 문법을 외우는 것도 중요하지만 이 기회에 HTML/CSS를 조금 공부해둔다면 좀 더 다양한 기능 멋진 블로그 페이지를 만들 수 있을 것이다.