서식 활용하기

2009/10/13 07:00

오늘은 티스토리 에디터의 '서식 활용하기'에 대해 알아봅니다. 자주 사용하는 서식을 미리 만들어두면 포스팅 시간을 줄일 수 있을 뿐더러 번잡스러운 작업을 생략할 수 있는 등 여러모로 편리한 점이 많습니다.

티스토리 에디터로 글을 작성할 때 서식기능을 활용하면 여러모로 편리한 점이 많죠? 현재 티스토리 에디터에는 '초대장 서식' 등 5가지의 서식이 기본적으로 제공되고(에디터 사이드바를 보시면 '서식'이라는 항목이 있습니다) 있는데요, 여기에 자신이 자주 사용하는 서식을 미리 만들어서 저장해 놓으시면 됩니다.


서식 만들기  

예제로 marquee 태그('상하좌우로 흐르는 문자' 태그)를 사용하여 추천 및 RSS 구독 안내문구 서식을 만들어보겠습니다.  


  1. (관리자) → 글쓰기 → '서식' 선택
  2. 'HTML' 체크
  3. 서식코드 삽입
  4. 저장

이렇게 저장한 서식은 에디터 사이드바 서식항목에 새롭게 등록됩니다.



서식 활용하기  

저장해 놓은 서식을 활용하는 것은 아주 간단합니다. (서식을 만들어 놓는 이유죠)


서식을 삽입할 위치에서 사이드바 서식항목에 미리 저장해 둔 서식을 클릭, 확인만 하면 되니까요. 결과를 볼까요?

어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 저쩌구어쩌구 

추천은 아래 손가락(view on)을, RSS 구독을 원하시면 사이드바의 노란여우를 꾸욱 눌러주세요~ 감사합니다. ^^




서식코드 4가지  

① '추천 및 RSS구독 안내문구' marquee태그 서식 코드

<center><img style="WIDTH: 이미지너비px; HEIGHT: 이미지높이px" alt="" src="이미지주소(URL)"></center> → 여기까지는 이미지부분

<center>
<marquee scrollamount="속도" width="범위"><span style="FONT-SIZE: 폰트사이즈pt; COLOR: #폰트컬러; FONT-FAMILY: 폰트스타일"><strong>문구</strong></span></marquee></center> → 여기는 marquee태그 부분
 
marquee scrollamount="속도" : 숫자가 클수록 문자가 느리게 흐름 (ex, 1, 2, 3...)
width="marquee 범위" : 문자가 흐르는 범위를 지정해 줍니다.(저는 390으로 지정했습니다.)

※ 움직이는 이미지 파일을 삽입하고 싶으면
  1. GIF 파일을 다운받는다.
  2. 다운받은 파일을 내 계정에 업로드한다.
  3. 이미지 속성값에서 이미지너비 및 높이, 그리고 이미지 주소(URL)을 알아낸다.
  4. 태그의 해당부분을 채워넣는다.
※ 이미지 부분에 관한 자세한 설명은 다음 글을 참조하세요 ☞ RSS 구독버튼 달기



② 다음뷰(Daum View) 구독권유 서식 코드




③ '소제목' 서식 코드 (박스모양) 

박스형태의 깔끔한 소제목 서식으로 Kay~님이 만든 코드입니다. 

옹리혜계는 바보다!  

요렇게 보이는 소제목 서식입니다.

<table style="BORDER-COLLAPSE: collapse" cellspacing="1" cellpadding="2" width="99%" bgcolor="#뒷꼬리 바탕색"> <tbody> <tr> <td style="BORDER-RIGHT: #박스 오른쪽 선색 1px solid; BORDER-TOP: #박스 윗부분 선색 1px solid; BORDER-LEFT: #박스 왼쪽 선색 1px solid; BORDER-BOTTOM: #박스 아랫부분 선색 1px solid" width="박스너비" bgcolor="#박스내부 바탕색"><span style="FONT-SIZE: 폰트사이즈pt; COLOR: #폰트컬러; FONT-FAMILY: 폰트스타"><strong>문구</strong></span></td> <td style="BORDER-RIGHT: #뒷꼬리 오른쪽 선색 0px solid; BORDER-TOP: #뒷꼬리 윗부분 선색 0px solid; BORDER-LEFT: #뒷꼬리 왼쪽 선색 0px solid; BORDER-BOTTOM: #뒷꼬리 아랫부분 선색 1px solid">&nbsp;</td> </tr></tbody></table>

※ 글자수가 박스를 벗어날 경우 박스너비(width="박스너비")를 적당히 조절해 주시면 됩니다.
※ RGB 색상코드표는 Kay~님 블로그를 참조하세요. 
    ☞ RGB 색상코드표



④ '소제목' 서식 코드 (라인모양)

   옹리혜계는 바보다!  



저작자 표시 비영리 동일 조건 변경 허락

옹리혜계 明窓淨机 [교육/IT]/Blog Tip & Tech ,

  1. 제게 꼭 필요한 내용이네요.

    감사합니다. 잘 지내시죠?

  2. 네, 잘 지내고 있습니다.
    감사합니다.

    ('원초적' 목소리 괜찮던데요? ^^)

  3. 뭔가 제게 꼭 필요한 포스트 같은데, 100% 알아듣지를 못하고 헤매고 있습니다.
    나중에 한번 더 들러서 읽고 시험해 볼게요.
    아주 유용한 팁이 아닐까 사료됩니다. ^^

  4. ㅎㅎ~
    뭐 별거 없습니다. '붙이기 신공'만 단련하신다면... ^^
    빨간 부분만 적당히 채워넣어시면 됩니다요~~

    서울엔 비님 오시네요...

  5. 이건 저에게 아주 필요한것 같네요.
    천천히 보면서 한번 해봐야겠네요.
    막걸리 한잔 대접해야 할까봅니다.

  6. 펨께님 주시는 막걸리 좋지요~ ^^
    한번 시도해 보시길요~

    글구보니 비님도 오시겠다, 오늘밤 막걸리가 제격인데요? ^^
    따뜻한 잠 구우세요~~

  7. 짜잔~
    ㅋㅋㅋ
    반갑죠?
    그렇죠? 진짜루 반갑죠?
    움하하하~
    두리번~ 두리번~ 안 반갑나??? 조용 하넹......
    칫~흥...핏....그래도 조용하넹.....
    이렇게 오면~ 맨발로 냉큼 나오셔야쥐~
    쥔장~ 이리오너라~~~걔~ 아무도 없느냣!!!!!
    ^^;;

    죠기~ 뭣이라뭣이라~ 돼 있는걸 글자가 맞죠?
    음....흠.....맞네..글자...
    음...연구해 보도록 합죠~ 어렵다..어려워~~~

  8. ㅋㅋ... 눈물나게 반갑슴돠~ ㅋㅋ
    연구까정 안하셔도 되고... 걍 붙이기 신공만 발휘하시옵소서~~ ^^

    아르님, 재미난 밤 맹그세욤~ ^^

  9. 서식 쓰면 정말 편해요. 자주 쓰는것 등록해 놓고 한번에 샤샥 입력하면 정말 좋더라구요~

  10. 네, 정말 편하죠?
    김군님처럼 고수들이야 뭐 벌써들 활용하고 계시겠지만서두...
    저 같은 초짜들은 정말 편리하더군요... ㅎㅎ

    밤공기가 제법 찹니다.
    예준이 감기 안걸리게 조심하시길요~ ^^

  11. 음..제가 요즘 지정신이 아닌관계로...
    며칠후쯤 붙이기신공에 들어가야겠습니다..ㅎㅎ

  12. 네, 붙이기 신공... ㅋㅋ

    아이미슈님, 건강 조심하시길요~ ^^

  13. 완젼 필요한 정보네요
    제가 3번 추천했어요^^

    잘 연습해서 해봐야 겠네요^^

  14. 감사합니다.

    첨부파일(txt파일) 내려받고 필요한 부분 채워넣으신 후 서식으로 저장해 놓고 그때 그때 사용하시면 되겠습니다.

    그나저나 유리님, 굉장한 미인이시라눙~ ^^

  15. 예전에 스치듯이 한번 봤는데, 필요할 것 같아 북마크 했다가 오늘 시간이 조금 생겨서 따라 해 봤습니다.
    서식 정말 편한데요!! 감사합니다.

  16. 감사합니다.

    편안한 저녁 맞으시길요~ ^^

  17. 손가락흔드는거 제가 예전에 다운로드 링크를 표시할때 쓰곤했는데.... 여기서보니까 반갑네요.

    서식을 잘 이용하면 정말 좋아요. 좀 고급스럽게 만들면 좋으련만 실력이 안되니....
    잘 봣습니다.

  18. 호곡~ demun님 같은 고수께서 실력이 안된다고 말씀하시믄... ㅜ.ㅜ
    참, 링크 걸어주셔서 감사합니다. ^^

    즐거운 오후시간 되시길요~

  19. 안녕하세요,옹리혜계님^^

    덕분에 좋은 곳에 보금자리를 마련했습니다.

    다시 한번 감사드립니다.




    게다가 이렇게 유용한 팁까지...ㄳㄳ





    그런데 한가지를 잘 모르겠습니다.

    다음뷰 구독 권유 서식은 따라하니까 잘 됩니다.

    그런데 옹리혜계님처럼 다음뷰 위젯에다가 붙이려고 하니까 방법이 잘....

    이부분에 대한 설명을 좀 해주시면 안될까요??

    꼭 좀 부탁드립니다.

  20. 에구 감사는요...벌써 포스팅 여러개 하셨던데, 즐겁게 블로깅 하시는 모습 보니 저도 기분이 좋습니다. ^^

    문의 주신 부분은 ... 간단합니다.
    제가 머걍님 포스트를 봤더니 CCL 라이센스 플러그인을 사용중이시더군요. CCL 표시가 있으면 구독권유문을 다음뷰위젯 바로 위로 붙일 수 없습니다. 우선 CCL 플러그인을 해제하셔야 합니다.

    기발행된 포스트의 경우, CSS를 손봐줘야 하는데요...
    관리도구 -> 스킨 -> HTML/CSS -> style.css에 들어가셔서
    맨 아랫부분에 다음과 같은 코드를 삽입하시면 됩니다.

    /* CCL 마크 안보이게 */
    .entry-ccl { display: none; }

    그런 다음 티스토리 에디터에서 구독권유문 서식을 삽입하신 후, 에디터 화면 우측상단에 있는 HTML 편집을 체크, 선택합니다. 편집화면 가장 아랫부분을 보시면 삽입하신 구독권유문의 코드가 나와있을텐데요... 코드 끝부분에 보시면 <br />이란 부분이 있을겁니다. 그걸 지워주시면 됩니다.

    해보시면 간단한 건데, 괜히 복잡해 보이지요? ^^

    그럼... 머걍님, 즐거운 주말 보내시길요~

  21. 아,ccl 저녀석이 둘 사이를 가로막았던 거군요.

    html,css 이런 외계인같은 녀석들하고 친해지려니 땀나네요^^

    구독권유문하고 위젯하고의 사랑이 이뤄져야할텐데...



    앞으로도 자주 신세를 좀.....그럼 중매하러 이만^^

  22. ㅎㅎ~
    차근차근 해보시면 그리 어렵지 않으실겁니다. ^^

    머걍님, 편안한 휴일 보내고계신가요?

  23. 머 진땀이 좀 나긴 했지만,

    옹리혜계님 덕분에 일단 중매는 성공을 했습니다. ㅎㅎ

    가끔씩 토라져서 등돌리긴 합니다만 ㅋㅋㅋ





    그런데 블로그라는게 제가 생각한거하고

    참 많이 다른거 같습니다.



    오늘 여기저기 몇군데 다녀봤는데요.

    머 걍 하는 블로그가 아니더라구요.ㅠㅠ



    전 제 아뒤처럼 머 걍 편안한 마음으로 시작한건데...

    머리가 복잡한게 ...지끈지끈 합니다^^



    뭐 지금 고민할 문제들은 아니니까

    일단은 처음 생각대로 머 걍 해볼라구요^^


    무엇이든 새로운 뭔가를 알아간다는건 기분 좋은 경험이니까요.



    이거 편안한 휴일날 무슨 헛소릴 한건지 모르겠습니다.

    다 잊어주시고..레드 썬^^

    즐거운 저녁시간 되세요.

  24. ㅎㅎ~ 중매하시느라 욕보셨습니다... ^^

    블로깅하는 이유가 각인각색이겠지만, 머걍님 말씀처럼 저도 걍~ 편안한 마음으로 합니다. 간혹 죽자사자 덤비는 분들도 계시고, 전문적인 콘텐츠로 즐거움을 주는 분들도 계시고...

    그래도 머걍님은 자신만의 콘텐츠로 꾸며나가실 수 있을 거 같던데...
    전 그냥 잡탕 블로그로 만족합니다... 크럴럴~~

    구람, 즐거운 하루 맹그세요~ ^^

  25. 음.. 서식이라, 잘 모르겠지만, 옹리혜계님이 갑자기 위대해 보이는 건 분명합니다.
    저.. 궁금한 게 있는데요. 제 블로그 오른쪽에 배너를 하나 달았는데 요 배너가 바로 위 <최근 댓글>과 너무 붙어 있어요. 요 두 놈의 칸을 띄려면 어케 해요 해요? 흑..

    글구. <최근 댓글> 이것처럼 <아침 신문 솎아보기>도 타이틀을 하나 달고 싶은데
    이런 것도 혹시 가능한 건가요? 흑..

    전, 뭐하는 놈인가요.. 흑.. 왜 난, 하나두 모르지.. 흑흑..

  26. 胃大요? 흐미~ 우찌 아셨을꼬? 동업하시자니깐요? 돗자리 준비는 이 초파리가 할텡께... 크럴럴~

    음, 사이드바 요소들간 간격은 <빈줄표시> 모듈만 넣어주시면 okay~
    관리자 -> 스킨 -> 사이드바 설정 에서
    '사용 가능한 모듈'에 보시믄 <빈줄 표시>라는 모듈이 있슴돠.
    (만약 없다면 플러그인 설정에서 <빈줄표시> 모듈을 활성화해 주세염. 빈줄 간격은 적당한 값으로 지정해 주시공...)
    그 <빈줄표시> 모듈을 떼어놓고 싶은 넘들 사이에 살포시 앉혀주심 끝.

    사이드바 타이틀을 달고 싶으시면...
    위젯을 붙여넣기한 HTML 배너출력 편집창을 여시공 위젯 태그 젤 위에
    <h3>아침 신문 솎아보기</h3> 이라구 입력하시믄 됩니다요..
    만약 타이틀과 위젯이 너무 붙어있어서 보기 싫다면 위 태그 바로 다음에 <br /> 이란 태그 하나만 더 써 주시고요~~

    림다님... 비오는 목요일이네요...
    활기찬 하루 여시길요~ ^^

  27. 제가 볼 때
    옹리혜계님은 천재같습니다요.
    천재 아닙니까. 어찌 이리 잘 아십니까. 딱 보구..
    제거 어제 1시간 넘게 끙끙대던 것이 혜계님의 말씀대로 하니 5분만에 뚝딱. 님은 천재십니다요.

    혹시 칠성장어 과 잡수신거 아닙니까?
    아니라면 말이 안됩니다. 뭐예요, 정체가. 흑흑.
    인문/법학/IT/문학/사회/정치/경제/육아
    장난이 아니구만요. 당연한 것이지만 새삼 놀랍니다요. 흑흑.. 대단하심다.

  28. ㅎㅎ... 천재되기 참 쉽습니다요? 크럴럴~

    제 정체요?
    음...
    이거 ... 대외비라 그간 말씀드리기가 곤란했습니다만...
    음, 이제는 말씀드릴(!) 수 있겠구만요...

    저는 사실... 하... 시방도 주저되긴 합니다만...

    제 소속은 '지구방위대 동아시아지구'로, 주된 임무는 외계생물체의 지구침입 징조를 선파악, 그에 따른 지구방위책을 planning하는 것이었(!)습죠.(딴은 핵심부서라지요? 귀화 외계생물체 관리부서 애들이 늘 부러워하곤 했습죠.. 케헬헬~) <- 왜 '과거형'인가? 음, 그 이유는... 이차저차한 연유로 인하여 이제 더 이상 지구방위대의 일원이 아니기 때문이죠.

    음, 그렇다하여 퇴출... 모 요런 쪽으로 단정짓지는 마시길... 물론 저의 '과체중'이 방위대 내부에서 문제가 됐던 적은 있었지만, 그것과는 무관하게 그간 임무수행에 있어 한치 어긋남이 없었고 그것은 방위대 차원에서도 일정 부분 '인정'을 받아왔기 때문입니다.

    님께옵선 전혀 감지하지 못하셨겠지만, 님께서 남대문 갈치조림을 편안하게 드시고 계셨던 바로 '그' 시각에도 저는 혼신의 힘을 다해 외계생물체의 지구침입 루트를 파악하고 있었답니다. 크흐~

    음...
    많이 주저됐던게 사실입니다만, 이리 다 털어놓으니 일단 맴은 후련합니다요... 물로 한편으로는 다소간 걱정되기도 합니다만...
    (그래서 드리는 말씀이온데, 양찰해 주신다면 이 답글은 정확히 24시간 후 자동삭제되도록 프로그래밍해 놓겠습니다.)

    아, 그리고 칠성장어 말입니다...
    고거 별무 효과가 없다는... 저희 방위대에서 주로 활용하던 킹왕짱 스테미너식의 레시피를 잠시 공개하자면...

    '개불 전립선 + 멍게 X알 + 바다거북 거시기'를 정확히 1대1대1의 비율로 믹스한 것을 삼칠일에 걸쳐 공복에 한 스푼씩 음용하시는 거이 짱이라는... (이뤈 고급정보를... 고맙지요? 크럴럴~)

    글구 요사이 님께옵사 열심히 까대고 계신 그 '가카'라는 생물체 말입져... 사실 우리 방위대의 특별관리를 받는 존재랍니다.. -_-;;; (조심하시길요~ 성정이 워낙이 단순무식해놔서리 특별관리대상 중에서도 초특별관리를 하는 케이스랍니다...)