마크다운으로 티스토리 글 싸지르기

나름 블로그질을 하다가 보니 이런 저런 글을 쓰는 것은 좋은데, 뭔가 목표를 정하고 하나씩 헤쳐나가는 것도 나쁘지 않을 것 같다는 생각이 들었다. 그래서 블로그에 유익한 것이 무엇이 있을까 생각하다가 나름 편리하게 글을 작성할 수 있도록 마크다운 문법을 익혀서 앞으로 사용할 것을 첫번째 과제로 삼았다.

물론 이 글도 첫번째 마크다운 문법 적용의 첫번째 산출물이다.

일반적으로 블로그를 운영하는 유저라면 글을 작성할 때의 저충(고충의 삼분의 일 정도) 중 하나가 아마도 글의 양식이 아닐까?

뭔가 내용이 풍부하고 멋지게 잘 꾸미고 싶은 것은 둘째 치고, 이와 버금가게 저충인 것이 아마 눈에 딱 들어오는 깔끔함과 절제된 어떤... 마치 개미들이 일열 횡대로 나란히 줄 지어 정확히 어떤 곳을 향해 가는 것인지 한 눈에 들어오는 그런 느낌..?

한 편으로는 블로그에서 눈팅하는 유저들에게 그런 느낌을 가지게 해주는 것 또한 운영자로서의 소명이라 생각이 들기도.

본문 내용은 어느 정도 기초 수준의 HTML, JavaScript, Sublime Text 의 지식을 필요로 한다.

마크다운(Markdown) 이란?

간단하게 그냥 HTML 문법이 최소한으로 간소화 된 버전이라고 할 수 있겠다. 궁극적인 취지는 아마도 위대한 한글을 창조하신 세종대왕님의 그 취지와 일맥상통 하지 않을까 싶다. 백성 누구든 쉽게 문자를 익히게 하여 어쩌고 저쩌고?

무엇보다 HTML 문법에 대한 지식이 있다면 그냥 HTML 문법을 혼용으로 사용해도 무방하다.

*순서 없는 리스트를 표현하는 마크다운 문법 중*
- 리스트1
- 리스트2를 <b><q>적습니다.</q></b>

순서 없는 리스트를 표현하는 마크다운 문법 중

리스트1
리스트2를 적습니다.

위와 같이 마크다운은 마크다운대로, 태그는 태그대로 표현 된다는 뜻.

열심히 문단, 목록, 링크, 이미지 등 마크다운 문법을 별도로 작성하다가... 나무위키 마크다운 문법 설명 페이지를 첨부하는 것이 나을 것 같기에 삭제

나무위키 마크다운 문법 참조
기본 마크다운 문법은 동일하지만 조금씩 그 기능을 더하거나 변형되어 추가 기능을 가진 여러 마크다운 문법이 존재했다. 위키, 깃헙, 워드프레스 등

마크다운 사용을 위한 에디터

기본 윈도우 제공 텍스트 에디터인 notepad 같은 소프트웨어를 사용한다면 많은 제약이 있다.

마크다운으로 작성한 글을 HTML 문서로 만들어주거나, 작성시 미리보기 기능 이라던지 좀 더 편리한 환경을 만들어준다. 구글링 해보면 수 많은 마크다운 에디터가 존재한다. 마음에 드는 에디터를 사용해도 무방하다. HTML 문법으로 파싱만 가능하다면 같다.

마크다운 전용 에디터도 물론 괜찮다. 오히려 전문적으로 글 작성하기에는 더 좋을지도 모르겠다. 하지만 글 작성 뿐만 아니라 뭐.. 이런 저런 작업을 같이 할 수 있는 에디터로 Sublime Text 를 추천 한다.

서브라임텍스트 설치 sublime text download
서브라임텍스트 패키지 컨트롤 설정 package control install
서브라임텍스트 마크다운 관련 패키지 설정
1. markdown editing
2. markdown preview

내가 사용해서 라기 보다는 유익한 소프트웨어다. 흠흠...

Markdown 문서를 HTML 문서로 파싱하기

마크다운으로 글을 작성 후 내용 전체를 복사해서 티스토리에 올리면 마크다운 문법으로 작성된 글을 보게 되므로 아무 소용이 없다. HTML 으로 보여질 내용을 등록 해야 하기에 서브라임 텍스트에서 다음과 같은 진행을 한다.

ctrl + shift + p
preview 입력
노출 리스트 중 Export HTML in Sublime Text 를 선택, 이어서 github 선택

이제, 서브라임 텍스트에 새로운 창에 HTML 문법으로 parsing 된 내용이 출력 된다. 그 내용 전부를 복사해서 티스토리 글 쓰기 모드를 HTML 모드로 붙여넣기 하면 가장 간단한 방법이 되겠지만 이렇게 하면 글 내용의 스타일이 고정으로 정해져 버린다.

PC 사용자는 별 차이를 느끼지 못할 수 있지만 티스토리 반응형 스킨이나 동적인 UI 를 적용하여 사용하고 있다면 위와 같이 싸지른 글을 다른 환경(태블릿이나 모바일)에서 확인 했을 때 가로가 길게 오버 되어, 정상적이지 않은 것 처럼 보이는 것을 확인했다. 아마 블로그에 유입된 타 유저는 해당 글을 보고는 에러라고 생각할 듯..

그래서 결국, 글 내용의 스타일이 고정 되지 않도록 지정해주는 수고가 필요 했는데, 다음과 같은 두 가지의 선택사항이 있다.

티스토리 글 작성시 HTML 문서로 파싱된 글의 특정 스타일(css)을 매 번 포함하여 복사해서 올리는 방법
HTML 문서로 파싱될 때 출력되는 스타일을 미리 티스토리에 업로드 하고 글의 내용만 복사해서 올리는 방법

첫번째 방법은 HTML 파싱 글 하나에 <style> .markdown- 포함 스타일</style> 부분과 글본문 HTML 중
<article class="markdown-body">글내용</article> 까지 부분적 복사로 티스토리에 글을 저장하는 방법이다.

하지만 좀 귀찮은 작업이 될 수 있겠다. 앞으로 마크다운을 계속 사용하여 글을 작성할 예정 이라면 당연히 두번째 방법이 나은 방법이다.

다만, 두번째 방법 또한 번거러울 수 있겠다 싶은 점이, 마크다운으로 작성한 글이 HTML 문서로 파싱될 때 포함하는 마크다운 문법이 매 번 조금씩 차이가 있지 않을까 싶었다. 그렇기에 마크다운 문법의 전체적인 스타일을 미리 1회는 HTML 문서로 파싱해서 저장, 업로드 해야 할 것 같았는데.. 뭐... 차이가 있다면 다시 업로드 하면 되겠지 싶다.

모든 마크다운 문법을 포함한 것은 아니겠지만 sample 로 기본적인 부분을 포함한 css 파일을 올려 본다.

md.css

위 md.css 파일을 저장하고, 티스토리 - 스킨편집 - 파일업로드 에 업로드한다
티스토리 - 스킨편집 - HTML 에서 업로드 스타일을 적용 시키는 내용을 입력한다

<head>
    ...
    <link rel="stylesheet" href="./images/md.css">
    ...
</head>

헤더와 헤더 사이, 다른 stylesheet 보다 하단에 입력하는 것이 좋겠다.

테스트로 HTML 문서로 파싱한 글을 한번 저장해보고, 서브라임 마크다운 프리뷰에서 미리보기 내용과 동일하다면 끝.

앞으로는 마크다운으로 글 작성하고 HTML 문서로 파싱하고 <article class="markdown-body">글내용</article> 부분만 복사해서 티스토리 글 작성시 HTML 모드로 변경 하고 붙여넣기 신공만 있으면 되겠다.

링크 클릭시 새 창(탭)으로

몇 번의 테스트 중, 마크다운으로 작성한 글의 링크를 새 창(탭)으로 띄우고 싶었다.

같은 창에서 다른 페이지로의 이동이 일어나는 것 자체도 싫고, 갔다가 뒤로가기로 돌아오면, 보고 있던 위치를 읽어버리고 상단으로 올라가는게 좀 짜증스럽기도 했다. (일반 사용자도 같은 생각 아닐까?) 그래서 jquery 를 이용하여 글 내용 중 링크 부분을 새 창으로 열리도록 보완을 해줬다.

현재 내가 적용한 반응형 티스토리 스킨은 jquery 를 기본적으로 참조 하고 있어서 선 작업이 필요 없었지만, 본인의 스킨에서 참조 하고 있지 않다면 다음과 같은 내용을 입력한다.

티스토리 - 스킨편집 - HTML 에서 <head>와 </head> 사이에 입력

<head>
    ...
    <!--[if lt IE 9]>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--<![endif]-->
</head>

구지 위의 내용을 모두 입력할 필요는 없다. 아래와 같이 심플하게 한 줄만 입력해도 무방하긴 하다...? (다르다면 지적바람)

<head>
    ...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

그냥 울트라 캡숑 구린 internet explorer 에서 좀 더 나으게 보여지라고 하는 정도로 알아두자.

울트라 캡숑 구린 IE 문제

그리고 jquery api 를 참조할 수 있도록 한 이 후에는 아래의 구문을 입력해준다. </body> 바로 위에 입력

<script>
    $(document).ready(function(){
        if($('.markdown-body a[class!=anchor]').length > 0){
            $('.markdown-body a[class!=anchor]').attr('target', '_blank');
        }
    });
</script>
</body>

마크다운을 HTML 로 파싱시 <a href=""></a>로 생성되는 녀석들은 링크와 목차가 있는 것을 확인했다.

그 중 링크는 'anchor' 클래스를 가진다. 현재 목차를 자동으로 만들어주는 확장된 마크다운 문법까지는 사용하지 않지만 나중에 갈대같은 변심으로 사용하게 될 수도 있기에 목차에 해당하는 Element 는 포함 되지 않도록 'anchor' 클래스를 가지는 <a> 태그에만 일단 적용되도록 했다.

정리

10가지 문법이 채 안되는 마크다운을 이용한 글 작성은 분명 쉽다고 생각한다. 어디서는 오버스럽게 몇 분, 몇 십분 이면 익힌다고 소개한 곳도 있던데... 좀 과장되지 않았을까? 간단하긴 해도 원하는 모양으로 글을 작성하려면 개인적으로 반나절은 써봐야 하지 않을까 싶다.

본인은 글의 문장과 내용 수정에 시간이 들어서 그럴지도 모르지만.. 개인차가 있겠지.

블로그에 글을 작성할 때 마다 효과를 주기 위한 편집의 시간 보다 간결하고 좀 더 깔끔하게 글을 작성할 수 있겠다는 기대감이 생긴다. 조금의 귀차니즘에서의 해방감은 덤 으로.

확장된 버전의 마크다운은 사용하지 말아야지...

추가 (티스토리 문단 간격 CSS 조정)

테스트를 하다 보니.. 문단간의 간격 스타일이 달랐다. 그래서 <p> 태그의 기본 스타일 변경이 필요했다. 티스토리에서 글 내용 중 문단에 해당되는 css 를 살펴보니 다음과 같은데

.tt_article_useless_p_margin p {
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
}

해당 css 가 </head> 바로 위에 md.css 파일이 있음에도 그 아래로 동적 생성이 되는 것으로 보여진다. 하단으로 빼기 위해서 그냥 글 내용 영역 바로 위에 추가 하기로 한다.

마찬가지로 티스토리 - 스킨편집 - HTML 에서 다음고 같이 수정했다.

...
<link rel="stylesheet" href="./images/md.css">
<style type="text/css">
    .tt_article_useless_p_margin p {margin-bottom:16px !important;}
</style>

<!-- 글내용영역 위로 입력 -->
<div class="area_view">
    
            



            

나름 블로그질을 하다가 보니 이런 저런 글을 쓰는 것은 좋은데, 뭔가 목표를 정하고 하나씩 헤쳐나가는 것도 
나쁘지 않을 것 같다는 생각이 들었다. 그래서 블로그에 유익한 것이 무엇이 있을까 생각하다가 나름 편리하게 
글을 작성할 수 있도록 마크다운 문법을 익혀서 앞으로 사용할 것을 첫번째 과제로 삼았다. 
물론 이 글도 첫번째 마크다운 문법 적용의 첫번째 산출물이다.
일반적으로 블로그를 운영하는 유저라면 글을 작성할 때의 저충(고충의 삼분의 일 정도) 중 하나가 아마도 글의 양식이 아닐까?
뭔가 내용이 풍부하고 멋지게 잘 꾸미고 싶은 것은 둘째 치고, 이와 버금가게 저충인 것이 아마 눈에 딱 들어오는 깔끔함과 
절제된 어떤... 마치 개미들이 일열 횡대로 나란히 줄 지어 정확히 어떤 곳을 향해 가는 것인지 한 눈에 들어오는 그런 느낌..? 
한 편으로는 블로그에서 눈팅하는 유저들에게 그런 느낌을 가지게 해주는 것 또한 운영자로서의 소명이라 생각이 들기도.


본문 내용은 어느 정도 기초 수준의 HTML, JavaScript, Sublime Text 의 지식을 필요로 한다.



마크다운(Markdown) 이란?

간단하게 그냥 HTML 문법이 최소한으로 간소화 된 버전이라고 할 수 있겠다. 궁극적인 취지는 아마도 위대한 한글을 
창조하신 세종대왕님의 그 취지와 일맥상통 하지 않을까 싶다. 백성 누구든 쉽게 문자를 익히게 하여 어쩌고 저쩌고?
무엇보다 HTML 문법에 대한 지식이 있다면 그냥 HTML 문법을 혼용으로 사용해도 무방하다.

*순서 없는 리스트를 표현하는 마크다운 문법 중*
- 리스트1
- 리스트2를 <b><q>적습니다.</q></b>

순서 없는 리스트를 표현하는 마크다운 문법 중


리스트1
리스트2를 적습니다.



위와 같이 마크다운은 마크다운대로, 태그는 태그대로 표현 된다는 뜻.
열심히 문단, 목록, 링크, 이미지 등 마크다운 문법을 별도로 작성하다가... 나무위키 마크다운 문법 설명 페이지를 첨부하는 것이 나을 것 같기에 삭제


나무위키 마크다운 문법 참조

기본 마크다운 문법은 동일하지만 조금씩 그 기능을 더하거나 변형되어 추가 기능을 가진 여러 마크다운 문법이 존재했다. 위키, 깃헙, 워드프레스 등



마크다운 사용을 위한 에디터

기본 윈도우 제공 텍스트 에디터인 notepad 같은 소프트웨어를 사용한다면 많은 제약이 있다. 
마크다운으로 작성한 글을 HTML 문서로 만들어주거나, 작성시 미리보기 기능 이라던지 좀 더 편리한 환경을 만들어준다.
구글링 해보면 수 많은 마크다운 에디터가 존재한다. 마음에 드는 에디터를 사용해도 무방하다. 
HTML 문법으로 파싱만 가능하다면 같다.
마크다운 전용 에디터도 물론 괜찮다. 오히려 전문적으로 글 작성하기에는 더 좋을지도 모르겠다. 
하지만 글 작성 뿐만 아니라 뭐.. 이런 저런 작업을 같이 할 수 있는 에디터로 Sublime Text 를 추천 한다. 


서브라임텍스트 설치 sublime text download

서브라임텍스트 패키지 컨트롤 설정 package control install

서브라임텍스트 마크다운 관련 패키지 설정


markdown editing
markdown preview




내가 사용해서 라기 보다는 유익한 소프트웨어다. 흠흠... 


Markdown 문서를 HTML 문서로 파싱하기

마크다운으로 글을 작성 후 내용 전체를 복사해서 티스토리에 올리면 마크다운 문법으로 작성된 글을 보게 되므로 아무 소용이 없다. 
HTML 으로 보여질 내용을 등록 해야 하기에 서브라임 텍스트에서 다음과 같은 진행을 한다.



ctrl + shift + p 

preview 입력
노출 리스트 중 Export HTML in Sublime Text 를 선택, 이어서 github 선택


이제, 서브라임 텍스트에 새로운 창에 HTML 문법으로 parsing 된 내용이 출력 된다. 그 내용 전부를 복사해서 
티스토리 글 쓰기 모드를 HTML 모드로 붙여넣기 하면 가장 간단한 방법이 되겠지만 이렇게 하면 글 내용의 
스타일이 고정으로 정해져 버린다. 
PC 사용자는 별 차이를 느끼지 못할 수 있지만 티스토리 반응형 스킨이나 동적인 UI 를 적용하여 사용하고 있다면 위와 같이 싸지른 글을 
다른 환경(태블릿이나 모바일)에서 확인 했을 때 가로가 길게 오버 되어, 정상적이지 않은 것 처럼 보이는 것을 확인했다. 아마 블로그에 
유입된 타 유저는 해당 글을 보고는 에러라고 생각할 듯..
그래서 결국, 글 내용의 스타일이 고정 되지 않도록 지정해주는 수고가 필요 했는데, 다음과 같은 두 가지의 선택사항이 있다.


티스토리 글 작성시 HTML 문서로 파싱된 글의 특정 스타일(css)을 매 번 포함하여 복사해서 올리는 방법
HTML 문서로 파싱될 때 출력되는 스타일을 미리 티스토리에 업로드 하고 글의 내용만 복사해서 올리는 방법


첫번째 방법은 HTML 파싱 글 하나에 <style> .markdown- 포함 스타일</style> 부분과 글본문 HTML 중

<article class="markdown-body">글내용</article> 까지 부분적 복사로 티스토리에 글을 저장하는 방법이다. 
하지만 좀 귀찮은 작업이 될 수 있겠다. 앞으로 마크다운을 계속 사용하여 글을 작성할 예정 이라면 당연히 두번째 방법이 나은 방법이다. 
다만, 두번째 방법 또한 번거러울 수 있겠다 싶은 점이, 마크다운으로 작성한 글이 HTML 문서로 파싱될 때 포함하는 마크다운 문법이 
매 번 조금씩 차이가 있지 않을까 싶었다. 그렇기에 마크다운 문법의 전체적인 스타일을 미리 1회는 HTML 문서로 파싱해서 
저장, 업로드 해야 할 것 같았는데.. 뭐... 차이가 있다면 다시 업로드 하면 되겠지 싶다.
모든 마크다운 문법을 포함한 것은 아니겠지만 sample 로 기본적인 부분을 포함한 css 파일을 올려 본다.


md.css



위 md.css 파일을 저장하고, 티스토리 - 스킨편집 - 파일업로드 에 업로드한다

티스토리 - 스킨편집 - HTML 에서 업로드 스타일을 적용 시키는 내용을 입력한다


<head>
    ...
    <link rel="stylesheet" href="./images/md.css">
    ...
</head>


헤더와 헤더 사이, 다른 stylesheet 보다 하단에 입력하는 것이 좋겠다.


테스트로 HTML 문서로 파싱한 글을 한번 저장해보고, 서브라임 마크다운 프리뷰에서 미리보기 내용과 동일하다면 끝.
앞으로는 마크다운으로 글 작성하고 HTML 문서로 파싱하고 <article class="markdown-body">글내용</article> 부분만
복사해서 티스토리 글 작성시 HTML 모드로 변경 하고 붙여넣기 신공만 있으면 되겠다.


링크 클릭시 새 창(탭)으로

몇 번의 테스트 중, 마크다운으로 작성한 글의 링크를 새 창(탭)으로 띄우고 싶었다. 
같은 창에서 다른 페이지로의 이동이 일어나는 것 자체도 싫고, 갔다가 뒤로가기로 돌아오면, 보고 있던 위치를 
읽어버리고 상단으로 올라가는게 좀 짜증스럽기도 했다. (일반 사용자도 같은 생각 아닐까?) 그래서 jquery 를 
이용하여 글 내용 중 링크 부분을 새 창으로 열리도록 보완을 해줬다.
현재 내가 적용한 반응형 티스토리 스킨은 jquery 를 기본적으로 참조 하고 있어서 
선 작업이 필요 없었지만, 본인의 스킨에서 참조 하고 있지 않다면 다음과 같은 내용을 입력한다.
티스토리 - 스킨편집 - HTML 에서 <head>와 </head> 사이에 입력

<head>
    ...
    <!--[if lt IE 9]>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--<![endif]-->
</head>

구지 위의 내용을 모두 입력할 필요는 없다. 아래와 같이 심플하게 한 줄만 입력해도 무방하긴 하다...? (다르다면 지적바람)

<head>
    ...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

그냥 울트라 캡숑 구린 internet explorer 에서 좀 더 나으게 보여지라고 하는 정도로 알아두자.


울트라 캡숑 구린 IE 문제


그리고 jquery api 를 참조할 수 있도록 한 이 후에는 아래의 구문을 입력해준다. </body> 바로 위에 입력

<script>
    $(document).ready(function(){
        if($('.markdown-body a[class!=anchor]').length > 0){
            $('.markdown-body a[class!=anchor]').attr('target', '_blank');
        }
    });
</script>
</body>

마크다운을 HTML 로 파싱시 <a href=""></a>로 생성되는 녀석들은 링크와 목차가 있는 것을 확인했다.
그 중 링크는 'anchor' 클래스를 가진다. 현재 목차를 자동으로 만들어주는 확장된 마크다운 문법까지는 사용하지 않지만 
나중에 갈대같은 변심으로 사용하게 될 수도 있기에 목차에 해당하는 Element 는 포함 되지 않도록 'anchor' 클래스를 가지는 <a>
태그에만 일단 적용되도록 했다.


정리

10가지 문법이 채 안되는 마크다운을 이용한 글 작성은 분명 쉽다고 생각한다. 어디서는 오버스럽게 몇 분, 몇 십분 이면 익힌다고
소개한 곳도 있던데... 좀 과장되지 않았을까? 간단하긴 해도 원하는 모양으로 글을 작성하려면 개인적으로 반나절은 써봐야 하지 않을까 싶다. 
본인은 글의 문장과 내용 수정에 시간이 들어서 그럴지도 모르지만.. 개인차가 있겠지.
블로그에 글을 작성할 때 마다 효과를 주기 위한 편집의 시간 보다 간결하고 좀 더 깔끔하게 글을 작성할 수 있겠다는 
기대감이 생긴다. 조금의 귀차니즘에서의 해방감은 덤 으로.


확장된 버전의 마크다운은 사용하지 말아야지...



추가 (티스토리 문단 간격 CSS 조정)

테스트를 하다 보니.. 문단간의 간격 스타일이 달랐다. 그래서 <p> 태그의 기본 스타일 변경이 필요했다.
티스토리에서 글 내용 중 문단에 해당되는 css 를 살펴보니 다음과 같은데

.tt_article_useless_p_margin p {
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
}

해당 css 가 </head> 바로 위에 md.css 파일이 있음에도 그 아래로 동적 생성이 되는 것으로 보여진다.
하단으로 빼기 위해서 그냥 글 내용 영역 바로 위에 추가 하기로 한다.
마찬가지로 티스토리 - 스킨편집 - HTML 에서 다음고 같이 수정했다.

...
<link rel="stylesheet" href="./images/md.css">
<style type="text/css">
    .tt_article_useless_p_margin p {margin-bottom:16px !important;}
</style>

<!-- 글내용영역 위로 입력 -->
<div class="area_view">
    
</div>
...


jquery 로 수정하려고 했지만 important 속성 때문에 변경이 되지 않는 듯



                    
        
  
    반응형
    
    
    
  

        







</div>
...

jquery 로 수정하려고 했지만 important 속성 때문에 변경이 되지 않는 듯

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

우리는 오랜만에 편히 앉아서 한담을 나누었다