W' page

# Tistory 에서 Markdown 문법으로 글 쓰기
> 2016.12.21
> 참조 : [링크](https://github.com/devxoul/TistoryMarkdown)
> README.md 를 복붙 했습니다.
> `\` 문자열은 알아서 센스있게 빼 주시길...

## 설치법
1. 티스토리 관리 페이지로 이동 후 HTML/CSS 편집 메뉴로 이동하여 '파일업로드'' 탭을 선택합니다.
1. [추가] 버튼을 눌러 `tistory-markdown-min.js` 파일 업로드합니다.
1. 'HTML/CSS' 탭으로 이동하여, `<\/body>` 태그의 바로 윗부분에 아래의 코드를 추가합니다.

  ```
  <스크립트 src="./images/tistory-markdown-min.js"><\/스크립트>
  <스크립트>markdown();<\/스크립트>
  ```

## 사용법
1. 글쓰기 화면에서 HTML모드로 전환 후 Markdown을 사용할 부분을 `
` 태그와 `
` 태그로 감쌉니다.
1. [저장] 버튼을 눌러 글 작성을 완료하면 자동으로 Markdown으로 번역됩니다.

## 안예쁜데 왜 쓰나?
1. 앞으로 별 일이 없는 한 Markdown 문법을 계속해서 사용 할 예정
1. Tistory 는 `나`를 위한 공간
1. 앞으로 시간 나면 [링크](http://blog.saltfactory.net/note/renewal-blog-from-tistory-to-github-pages-via-jekyll.html) 처럼 바꾸거나 더 좋은 방법을 고민 할 예정

출처 : http://blog.gaerae.com/2015/09/google-code-prettify.html

<SCRIPT src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=java&lang=sql&skin=desert"></SCRIPT>
 <PRE class=prettyprint linenums>class Voila {
    public:
        // Voila
        static const string VOILA = "Voila";}
</PRE>

의 결과물

class Voila {
    public:
        // Voila
        static const string VOILA = "Voila";
}

아래 방법은 본인의 도메인이 있어야 한다. 없는 분은 입맛에 맞는 주소를 구입하기 바란다.

나의 경우 http://kanziw.com 도메인을 가지고 있어 이것으로 진행하였다.

1. Tistory 내 설정

Tistory 관리 - 환경설정 - 기본 정보의 주소설정에서 2차주소 사용에 버튼을 클릭 하고 저장한다.

2. 도메인 관리업체 설정

도메인을 구입한 곳에서 나의 도메인이 가리키는 A 레코드에 110.45.229.135 을 지정한다.

나의 경우 CNAME 레코드에 www를 추가하여 kanziw.com 을 가리키도록 추가 설정하였다.

*

A 레코드(호스트IP) : kanziw.com 을 쳤을 때 접속 시도 요청할 IP

CNAME 레코드 : www 을 추가했다고 하면, www.kanziw.com 을 kanziw.com 에 연결.

이젠 잘 되는 것을 확인할 수 있다.

사실 별 돈 안되는것은 알지만 그래도 광고하는 기분 내고자 달았다.ㅎㅎ

애드센스 계정은 이전 홈페이지 운영할 때 만들어뒀던 것이 있어 그것을 이용하였다.

1. 구글 애드센스 계정 생성

https://www.google.com/adsense  에서 구글 계정으로 생성하면 된다.

페이지의 내용도 어느정도 있어야만 애드센스를 사용할 수 있다고 한다.

나의 경우는 게시글이 어느정도 있었을 때 신청해서 한번에 통과했는데 실패하는 경우도 있다고 한다.

2. 광고 생성

콘텐츠 - 광고단위 에 들어가면 +새 광고단위 버튼을 통해 광고를 만들 수 있다.

아래쪽 옵션들을 선택하여 자신의 블로그에 삽입할 크기대로 만들면 되겠다.

나의 경우 게시글마다 위쪽에 띄우기 위해 728 * 90 사이즈로 설정했다.

광고 유형은 텍스트 및 디스플레이 광고를, 광고 스타일은 단순형 스타일이다.

아래쪽 저장 및 코드 생성하면 코드가 생성되는데 잘 복사해두길 바란다.

3. 코드 삽입

1) HTML 수정

HTML/CSS - skin.html

         <div class="article_post">

<div class="googld_adsense" align="center">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- kanziw.tistory.com -->

<ins class="adsbygoogle"

     style="display:inline-block;width:728px;height:90px"

     data-ad-client="xxxxxxxxxx"

     data-ad-slot="xxxxxxxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script></div><br><br>

##_article_rep_desc_##</div>

*

class가 article_post인 div를 찾아 그 안에 생성된 코드를 삽입한다.

광고를 가운데 정렬 하기 위해 div 태그 안에 scsript를 넣었으며 가운데 정렬을 설정했다.

아래쪽 css에서 크기 옵션을 주기 위해 google_adsense class를 만들었다.

2) CSS 수정

HTML/CSS - skin.css

/* 포스트 내부 */

.google_adsense * { width: 728px; height: 90px; } 

*

광고 크기 대로 너비 728px, 높이 90px로 지정했다.

이제 정상적으로 광고가 게시된 것을 확인할 수 있다.

원래는 무료 호스팅 업체를 통해 XE로 개인 블로그를 운영하였지만

감사하게도(?) 무료 호스팅에서 제공해줄 수 있는 서비스의 수준을 넘어서 쫒겨났다.

그래서 선택한 것이 이 Tistory.

나중을 위해 Tistory 에서 내가 설정한 것들을 기록하려 한다

1. Skin

스킨명 : Divergence(Mint)

스킨 위자드로 변경

배경 : 색상

타이틀 : 패턴

제목 및 게시글 : 글꼴, 글자색

글영역 넓이 : 900px (헌데 기본 본문 가로 사이즈가 824px 이라 변경이 될지는 모르겠다.)

2. CSS

1) 게시글의 줄간격이 너무 좁아 p 태그에 css를 줬다.

HTML/CSS - style.css - /* 본문 */

.article,

.article p { line-height: 170%; }

a:hover {text-decoration: underline; }

*

.article p { line-height: 170%; }  추가

2) 본문의 링크 색이 잘 보이지 않아 a 태그의 색을 노란색으로 변경하였다.

HTML/CSS - style.css - /* 공통요소 */

a {color: #ffcc00; text-decoration: none; }
a:hover {text-decoration: underline; }

*

#415360 -> #ffccoo 으로 변경

3) 카테고리의 글씨가 잘 보이지 않아 글씨 색 변경

HTML/CSS - style.css - /* 본문 */

.article_head .title {display: inline; color: #ffffff; line-height: 1.2em; padding: 0 0 0

*

#181818 -> #ffffff 으로 변경

4) 글 아래 태그 글씨 색 변경

HTML/CSS - style.css - /* 본문 */

.article_tag a {color: #FCEEFD; }

*

#2d353b -> #FCEEFD 으로 변경

3. HTML

1) 카테고리 밑 글들도 색이 잘 안보인다. CSS 로 수정하려 했으나 잘 모르겠어서 HTML 안에 font 태그를 넣어 수정했다.

HTML/CSS - skin.html

<ol class="article_post">
    <s_list_rep>
        <li>
            <span class="date"><font color=#FCEEFD>##_list_rep_regdate_##</span>
            <span class="title">
                <a href="##_list_rep_link_##"><font color=#FCEEFD>##_list_rep_title_##</a>

                <span class="count">##_list_rep_rp_cnt_##</font></span>
             </span>
        </li>
    </s_list_rep>
</ol>

*

각각의 ##_list_rep_regdate_## & ##_list_rep_title_## & ##_list_rep_rp_cnt_## 를 font 태그로 감쌌다.

각 ##변수## 앞 뒤로 대괄호가 있다는 것 주의! (본문에 나타나지 않음)

2) Google Analytics 사용 위한 코드 삽입

HTML/CSS - skin.html

<head>

<!-- Google Analytics -->

<script>

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-61222542-1', 'auto');

  ga('send', 'pageview');

  ga(‘set’, ‘&uid’, {{USER_ID}}); // 로그인한 User-ID를 사용하여 User-ID를 설정합니다.

</script>

*

head 태그 바로 밑에 태그 삽입하였다.