2017년 12월 4일 월요일

Markdown의 기본

차례


시작하며….

한동안 정리를 하면서 단순 Text로 글을 정리 한다는게 매우 불편하다는 생각을 했어요.

나중에 다른 곳에 글을 올린다고 할 때 원본글은 있지만 글자의 크기나 이미지의 링크 등을 일단 txt로는 관리 하기 너무 어렵더라고요.

그러니 만약에 다른 곳에 글을 옮긴다고 하면 또 다시 해당 사이트에 맞게 구조의 편집을 다시 해야 하더라고요.

그런 생각을 하니 갑자기 귀찮다는 생각이 들더군요.

그래서 이것 저것 찾다가 괜찮은 택스트 편집 문법인 Markdown을 찾게 되었네요.

이 편집 문법이 Html 처럼 복잡 하지 않고 제가 사용할 정도까지는 딱!! 적당했어요.

Markdown의 장점

이제 Markdown을 사용한지는 별로 되지 않았지만 그래도 제가 생각하는 장점은 다음과 같아요.

  1. 짧은 명령어
  2. 많은 Viewer
  3. Github 연동

1. 짧은 명령어

우선 기본 문법이 많지 않고 사용하는 방법이 굉장히 쉬워요.

  • Test1
  • Test2
  • Test3

예를 들어 위 처럼 html에서는 list를 주려고 하더라도.

<li> Test1
<li> Test2
<li> Test3

으로 <li>을 반복적으로 적어줘야 하지만.. Markdown은 아래처럼만 적으면 되요.

* Test1
* Test2
* Test3

3글자를 더 입력하지 않는다는게 얼마나 편한 건지 모르겠어요.^^

2. 많은 Viewer

Markdown이라는거 자체가 단순 문서 편집 문법을 가져서 그런지 생각보다 Viewer가 많더라고요.

Chrome 같은 곳에서 확장 기능도 있고요.

그리고…

저는 그냥 Vim으로 보는 것도 나쁘지 않은거 같아요.^^

Markdown Syntax in Vim

위의 이미지는 지금 작성하는 글의 Syntax가 포함된 화면이예요.

편집기는 Vim이고요.

Syntax를 이용하여 Markdown의 문서를 조금은 이쁘게 볼 수 있어서 단순 Text 보다 좋은거 같더라고요.

3. Github 연동

사실 Markdown이라는 용어를 알게 된것도 Github를 하면서 였어요.

하던 일만 하니(저는 임베디드쪽에서 일을 하고 있어요~) 웹쪽이나 어플 쪽은 까막눈이죠.ㅎㅎ

그러다가 Github에 README.md를 작성해야 한다는데 “이게 뭔가요..” 했지요.;;

처음에는 무관심하게 지나쳤는데 최근에 블로그를 하면서 찾다 보니 이게 저한테 맞는다는 생각을 했어요.

그리고 Git도 같이 사용하려고 했는데 Markdown이 Github는 기본 제공이 되더라고요!!

즉, 제가 모든 문서를 Markdown으로 작성을 한다면 특별한 Viewer 없이도 양식대로 볼 수 있는거더라고요.

지금 하고자 하는 것들이 모두 맞아 떨어 지게 된거죠.^^


위의 장점들은 저의 개인적인 장점들이니 다른 분들은 다른 장점 혹은 단점을 가지고 계실수도 있어요~

Markdown의 문법

기본 문법

사실 지금도 고민이예요.

너무나 많은 곳에서 Markdown 문법을 알려주고 있는데..

나도 여기에 적어야 하나…

아니면 링크만 열결을 해야 하나..^^;;

일단 가장 기본적인 Markdown의 문법은 아래 사이트에서 확인을 하시면 될거 같아요~

마크다운의 사용법과 정보

그외 문법

위에 없는 문법 중에 자주 쓸거 처럼 보이는거 몇개만 더 알려 드리면 다음과 같아요.

Code 부분

    ```javascript
        userCustom.onReady = function() {
            /* PlantUML Prepare */
            previewContentsElt = document.getElementById('preview-contents');
            $.getScript('//cdn.rawgit.com/dankogai/js-deflate/master/rawdeflate.js', makeUml);
        };
    ```

위 처럼 입력을 하고 Viewer로 보면 아래 처럼 나와요.

    userCustom.onReady = function() {
        /* PlantUML Prepare */
        previewContentsElt = document.getElementById('preview-contents');
        $.getScript('//cdn.rawgit.com/dankogai/js-deflate/master/rawdeflate.js', makeUml);
    };

신기하지 않나요?? ^^

Table

  |       | 철수   | 영희   |
   ----- | ------ | ------ 
  | 국어  | 100    | 80     |
  | 영어  | 90     | 90     |
  | 수학  | 80     | 70     |

Table도 그릴 수 있어요.

위처럼 작성을 하게 되면 아래 처럼 그림을 그려주죠.

철수 영희
국어 100 80
영어 90 90
수학 80 70

저는 이런게 왜이렇게 신기하고 좋은지 모르겠네요.ㅎㅎ

아.. 그리고 위의 테이블은 Viewer 마다 조금씩 문법이 다를 수 있어요~

마치며….

오늘은 Markdown에 대해 이야기 해 보았어요.

아직 편한건 잘 모르겠지요?? ^^;;;

하지만 슬슬 왜 제가 이걸 사용하게 되었는지 또 설명을 드릴게요.

오늘도 감사합니다.

댓글 없음:

댓글 쓰기