티스토리 서식 활용

여러분 티스토리를 하다가 보면 <서식>이라는 항목이 있는데 어떤 기능을 하는지 궁금하지 않으셨나요?

전 최근에 알았는데, 이 기능을 활용하면 포스팅쓰는 속도를 몇 배나 올릴 수 있습니다.

왜 이 좋은걸 이제야 알았나 싶지만 지금이라도 알아서 얼마나 다행인지 모르겠네요.

 

아무튼 이 좋은걸 함께 하고자 오늘 포스팅 합니다.

특별히 이 포스팅은 오늘 소개하고자 하는 서식으로 모든 글을 적었습니다.

 

 

티스토리 서식이란?

 

티스토리 서식이란 글 쓰면서 자주 쓰는 '서식'들을 미리 만들어 둠으로서, 포스팅 작성 시 필요할 때 불러들여 편하게 쓰고 적용할 수 있는 걸 말합니다.

 

아쉽게도 티스토리에서 기본적으로 제공해주는 서식 파일은 없어 사용자가 일일이 모두 작업해야 합니다.

이 포스팅에서는 가장 기본적이면서 가장 활용을 많이 하게 되는 <타이틀>, <소제목> 등에 내용을 다뤄보도록 할게요.

파란색 본문에 보이는 <티스토리 서식이란?> 타이틀도 서식을 활용하면 만들었습니다.

 

본문에 적힌 타이틀 역시 서식으로 만든 것입니다.

 

티스토리 서식의 장점

• 서식 활용을 하여 빠르게 글을 써 내려갈 수 있다.
• 포스팅 모두 통일이 되어 신뢰감을 준다.
• 전체적으로 깔끔하여 가독성이 좋아진다.

 

티스토리 서식의 단점

• 포스팅마다 개성이 없다.
• 다른 블로거들도 사용해 더욱더 개성이 없으므로 나만의 서식을 만들어야 한다.

 

 

티스토리 서식 활용 무작정 따라 하기

 

티스토리 서식을 활용하기 위해서는 서식에 필요한 HTML 코드가 있어야겠죠?

원래 사용자가 일일이 모두 세팅을 해줘야 하지만 현재 인터넷에 떠도는 유명한 HTML 코드를 갖고 왔습니다.

첨부된 파일 '서식 파일. txt'를 활용하시거나 화면상에 보이는 HTML 코드를 복사 + 붙여 넣기로 하시면 됩니다.

* 원작자가 이 글을 보시고 알려주시면 출처를 밝히거나 해당 글 부분을 삭제하도록 하겠습니다.

 

서식파일.txt

0.00MB

 

<!-- 타이틀 시작 -->
<p style="FLOAT: none; CLEAR: none">
<span style="FONT-SIZE: 10px; FONT-FAMILY: Verdana, sans-serif; COLOR: rgb(255,255,255); TEXT-ALIGN: justify; BACKGROUND-COLOR: rgb(105,139,226)">&nbsp;타이틀 입력부분&nbsp;</span></p>
<p style="COLOR: rgb(101,101,101); TEXT-ALIGN: justify"></p>
<p style="TEXT-ALIGN: center"></p>
<h3 style="BOX-SIZING: border-box; MARGIN-BOTTOM: 5px; BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-COLOR: ; WORD-SPACING: 3px; MARGIN-TOP: 5px; BORDER-BOTTOM: rgb(105,139,226) 2px solid; 
PADDING-BOTTOM: 3px; PADDING-TOP: 3px; PADDING-LEFT: 5px; BORDER-LEFT: rgb(105,139,226) 12px solid; BORDER-RIGHT-COLOR: ; LETTER-SPACING: 1px; LINE-HEIGHT: 1.5; PADDING-RIGHT: 5px; 
BORDER-TOP-WIDTH: 0px; MARGIN-RIGHT: 0px; border-image: initial">
<font color="#5d5d5d" face="Arial">
<span style="FONT-SIZE: 21px">타이틀 입력부분</span></font></h3>
<p style="TEXT-ALIGN: left">
타이틀 입력부분</p>
<p style="TEXT-ALIGN: center"><br /></p>
<!-- 타이틀 종료 -->

<!-- 소제목1 시작 -->
<h3 style="box-sizing: border-box; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; border-width: 0px 0px 2px 10px; word-spacing: 3px; border-bottom-style: solid; border-bottom-color: rgb(204, 204, 204); 
padding: 3px 5px; border-left-style: solid; border-left-color: rgb(85, 85, 91); margin: 5px 0px; letter-spacing: 1px; line-height: 1.5; border-image: initial;">
<font color="#5d5d5d">
<span style="font-size: 21px;">소제목1</span></font></h3>
<p style="TEXT-ALIGN: left">-------------내용입력----------- </p>
<p style="TEXT-ALIGN: left"><br /></p>
<!-- 소제목1 종료 -->

<!-- 소제목2 시작 -->
<h3 style="box-sizing: border-box; font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; border-width: 0px 0px 2px 10px; word-spacing: 3px; border-bottom-style: solid; border-bottom-color: rgb(204, 204, 204); 
padding: 3px 5px; border-left-style: solid; border-left-color: rgb(85, 85, 91); margin: 5px 0px; letter-spacing: 1px; line-height: 1.5; border-image: initial;">
<font color="#5d5d5d">
<span style="font-size: 21px;">소제목2</span></font></h3>
<p style="TEXT-ALIGN: left">-------------내용입력----------- </p>
<p style="TEXT-ALIGN: left"><br /></p>
<!-- 소제목2 종료 -->

<!-- 마무리 시작 -->
<h4 style="FONT-SIZE: 10px; FONT-FAMILY: dotum, sans-serif; COLOR: rgb(31,31,31); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 7px; BORDER-LEFT: rgb(255,50,127) 10px solid; 
MARGIN: 0px 0px 10px; LETTER-SPACING: -1px; LINE-HEIGHT: normal; PADDING-RIGHT: 0px; font-stretch: normal">
<span style="font-size: 21px; color: rgb(255, 50, 127); font-family: Arial;">
마무리</span></h4>
<p style="TEXT-ALIGN: left">-------------내용입력----------- </p>
<p style="TEXT-ALIGN: left"><br /></p>
<!-- 마무리 종료 -->

<!-- 관련글 시작1-->
<h4 style="font-family: dotum, sans-serif; padding: 0px 0px 0px 7px; border-left: 10px solid rgb(254, 137, 67); margin: 0px 0px 10px; letter-spacing: -1px; line-height: normal; font-stretch: normal;">
<font color="#FE8943"><span style="font-size: 21px; font-family: Arial;">관련글</span></font></h4><div>
<div class="txc-textbox" style="box-sizing: border-box; font-size: 2px; border-width: 2px; border-style: solid; border-color: rgb(254, 137, 67); font-family: Arial, 돋움, Dotum, AppleGothic, sans-serif; padding: 
10px; margin: 0px; line-height: 1.5; background-color: rgb(255, 255, 255);">
<p style="font-size: 13px; font-family: &quot;맑은 고딕&quot;, sans-serif; color: rgb(101, 101, 101); text-align: left;">
<span style="font-size: 14px; font-family: Dotum, sans-serif; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"><b>
<span style="font-family: Arial; color: rgb(85, 85, 91);">1.URL</span></b></span></p></div>
<p style="float: none; text-align: center; clear: none;">&nbsp;</p></div><div><br /></div><div>
<font color="#FE8943"><span style="font-size: 15.3333px;"><br /></span></font></div>
<p style="TEXT-ALIGN: left">&nbsp;</p>
<!-- 관련글 종료1-->

<!--마무리멘트 시작1-->
<div class="txc-textbox" style="BOX-SIZING: border-box; FONT-SIZE: 14px; BORDER-TOP: rgb(254,137,67) 10px solid; FONT-FAMILY: Arial, 돋움, Dotum, AppleGothic, sans-serif; BORDER-RIGHT: rgb(254,137,67) 10px solid; 
BORDER-BOTTOM: rgb(254,137,67) 10px solid; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; PADDING-LEFT: 10px; BORDER-LEFT: rgb(254,137,67) 10px solid; MARGIN: 0px; LINE-HEIGHT: 1.5; PADDING-RIGHT: 10px; 
BACKGROUND-COLOR: rgb(254,222,199)">
<p style="FONT-SIZE: 13px; FONT-FAMILY: &quot;맑은 고딕&quot;, sans-serif; COLOR: rgb(101,101,101); TEXT-ALIGN: center">
<span style="FONT-SIZE: 14px; FONT-FAMILY: Dotum, sans-serif; FONT-WEIGHT: bold; COLOR: rgb(0,0,0); BACKGROUND-COLOR: rgb(250,224,212)">
안내문구</span></p></div>
<!--마무리멘트 종료1-->

<p style="FLOAT: none; TEXT-ALIGN: center; CLEAR: none"><br /></p>

 

 

사용 이미지를 보시면 어떻게 해야 하는 금방 감이 잡히실 겁니다.

그래서 많은 설명을 하지 않고 이미지로 대신할게요.

 

내 블로그 설정 -> 서식관리 -> 서식쓰기로 이동합니다.

 

본문에 첨부된 코드를 활용하여 우선 <타이틀 코드> 부분을 모두 복사합니다.

 

서식쓰기 모드로 들어가신 다음 HTML 코드로 들어갑니다.

 

방금 복사한 HTML 코드를 붙여넣기 하세요

 

HTML 모드에서 -> 기본모드로 변경해주면 서식을 볼 수 있습니다.

 

짜잔! 서식이 완성이 되었습니다. 참쉽죠?

 

나머지 서식들도 방금했던 것처럼 해주고 활용하면 됩니다.

 

 

서식 활용을 하여 포스팅 하기

 

서식을 활용하여 포스팅할 때는 아주 간단합니다.

기타 (:) 기능에서 '서식'을 누른 후 선택하고자 하는 서식을 누르면 됩니다.

 

기타기능에서 '서식'을 누른 후 원한는 서식을 눌러 줍니다.

 

참 쉽죠?

 

 

오늘은 티스토리 서식에 대해서 간략하게 알아봤습니다.

서식이 뭔지 몰랐던 블로거님들에게는 아주 유용한 팁이 될 것 같네요.