[티스토리 팁_12] 마크다운 문법을 활용해서 티스토리 블로그 작성

마크다운 문법을 활용해서 티스토리 블로그 쓰기

​

구글 블로그에는 올리는데 성공을 했는데 티스토리 블로그에도 잘 될지 테스트를 위해 작성하는 포스팅.
구글블로그와 동일하게 크롬 브라우저에 설치된 Markdown here 프로그램을 활용해서 적용할 예정.
구글에서는 글 작성 후 영역을 설정해서 마크다운 토글 하면 HTML에 자동으로 변환되었는데 여기서는?
일단, 기본적인 문법들을 정리하고 적용을 해보겠습니다.

​

기본적인 방식은 아래와 같습니다.

1. 마크다운 문법으로 글 내용 작성
2. 마우드 드래그로 적용할 영역 선택 후 마우스 오른쪽 버튼
3. 마크다운 토글 선택 or 우상단 주소창 옆에 마크다운 이미지 적용

Note:
티스토리 가이드의 포럼(클릭))에도 기본적인 마크다운 문법이 설명되어있으니 참고하시면 됩니다.

​

---

​

기본적인 마크다운 문법들 정리

1. 제목 쓰기

​

       제목에 대한 마크다운 문법은 제목 문장앞에 #을 붙이는 것이다.

       #은 1개부터 6개 까지 넣어볼 예정.

# 제목 1

## 제목 2

### 제목 3

#### 제목 4

##### 제목 5

###### 제목 6

라고 쓴 다음 **마크다운 토글**을 적용하면 아래와 같이 보입니다.

제목 1

제목 2

제목 3

제목 4

제목 5

제목 6

​

2. 인용구

​

      인용구는 > 으로 적용가능합니다. >를 두 개 쓰게되면 인용구 안에 인용구로 표시 됩니다.

      인용구와 목록 문법을 같이 쓰면 인용구 안에 목록도 가능합니다.

> 인용구 적용 예시

> 인용구 안에

>> 인용구 적용 예시

> 인용구 안에 목록표시 (나열)

> - 인용구 안에 목록1

> - 인용구 안에 목록2

> 인용구 안에 목록표시 (숫자)

> 1. 인용구 안에 목록1

> 2. 인용구 안에 목록2

라고 쓴 다음 **마크다운 토글**을 적용하면 아래와 같이 보입니다.

인용구 적용 예시

​

인용구 안에

인용구 적용 예시

​

인용구 안에 목록표시 (나열)

• 인용구 안에 목록1
• 인용구 안에 목록2

​

인용구 안에 목록표시 (숫자)

1. 인용구 안에 목록1
2. 인용구 안에 목록2

​

3. 이미지 및 하이퍼링크 넣기

​

      하이퍼링크 넣는 법 1. [링크를 걸 단어](링크주소) 형태

[블루이드의 구글 블로그](http://blueidblues.blogspot.kr/2016/07/iptv-olleh-tv.html) 가보기

블루이드의 구글 블로그 가보기

​

      하이퍼링크 넣는 법 2. <링크주소> 형태 - 링크 주소를 그대로 노출

블루이드의 구글 블로그 <http://blueidblues.blogspot.kr/2016/07/iptv-olleh-tv.html> 포스팅을 참고하세요

블루이드의 구글 블로그 http://blueidblues.blogspot.kr/2016/07/iptv-olleh-tv.html 포스팅을 참고하세요

​

      이미지 넣는 법

       형태

       하지만 이건 그냥 티스토리 이미지삽입 툴을 활용하기로 해서 따로 예제를 만들지는 않았습니다.

4. 기타

​

(1) 구분선 적용하기

     *** 세 걔를 넣어주면 아래와 같이 표기됩니다.

***

---

​

(2) 문단 구분 하기

     한 줄을 띄워주면 문단이 적용 됩니다.

문단1 시작

문단1 끝.

문단2 시작

문단2 끝.

적용되면 아래처럼 보이게 됩니다. 

(마우스로 드래그 해보시면 문단 사이 한 줄이 없어진 것을 확인 할 수 있습니다.)

문단1 시작

문단1 끝.

문단2 시작
문단2 끝.

​

(3) 강조, 기울임

* 기울이는 것은 단어 앞뒤로 * 한 개

* 강조(굵은글씨)는 단어 앞뒤로 * 두 개

적용 예시

*기울임 테스트*와 **굵은 글씨 테스트**를 합니다.

기울임 테스트와 굵은 글씨 테스트를 합니다.

​

(4) 태그/소스코드 삽입

문장 앞뒤로 ``` 을 넣어줍니다

```

<li><a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" class="facebook-link"><span class="facebook-icon svgicon">페이스북 공유 버튼</span></a></li>

```

라고 쓰면 아래처럼 보입니다.

<li><a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" class="facebook-link"><span class="facebook-icon svgicon">페이스북 공유 버튼</span></a></li>

​

여기까지 마크다운 문법을 활용해서 작성한 글입니다.

이제 각 부분부분을 적용/변환해보고 다시 포스팅 하겠습니다.