블로그 서식 꾸미기 #2 - 플래쉬 소제목 활용하기 (동영상)

블로그에 글을 쓰다보면 본문에 여러 소제목을 사용하면서 글을 쓸 때가 있습니다.

예를 들면,

제목 : 큰제목
내용 :

1. 소제목입니다.
어쩌고 저쩌고 어쩌고 저쩌고
2. 소제목 2입니다.
어쩌고 저쩌고 어쩌고 저쩌고


이렇게 글을 쓸 수있겠죠. 이때 소제목에 해당하는 부분을 플래쉬 글꼴로 나타나도록 서식을 만드는 방법에 대해서 설명하고 쓰는 방법을 공유하겠습니다. 서식을 만드는것은 코드를 복사한뒤 붙여넣고 서식을 만든뒤, 글을 쓸때 서식을 불러와서 소제목을 입력해주기만 하면 됩니다. 참 쉽죠.


먼저 사용 예시를 보여드리겠습니다.

글 본문 부분입니다



11111111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111



22222222222222222222222222222222222222222222222222222222222222222222222222222222222222
22222222222222222222222222222222222222222222222222222222222222222222222222222222222222
22222222222222222222222222222222222222222222222222222222222222222222222222222222222222

지금 이것은 서식에서 불러와서 간단히 제목에 해당하는 부분만 입력하고 완성한것입니다. 복잡한 설정으로 만든것이 아니라는것이죠.
그림으로도 처리할 수 있겠지만, 포토샵이나 기타 툴을 이용해서 만들고 업로드하고 좀 복잡하겠죠? 근데 쉽게 하는 방법이 있습니다.

포토샵 NO , 복잡한것 NO


급하신분은 맨아래 동영상파일을 다운로드 후 압축 해제해서 보세요. 바로 이해가 가실겁니다.







<object height="50" width="600" align="middle" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="always" name="allowScriptAccess" />
<param value="http://cdmanii.com/attachment/cfile10.uf@116B5E214A9910892D2C30.swf" name="movie" />
<param value="transparent" name="wmode" />
<param value="false" name="menu" />
<param value="high" name="quality "/>
<param value="isContent=Y&amp;titleText=출력할타이틀부분&amp;titleLink=[##_article_rep_link_##]&amp;detailText=" name="FlashVars" />
<embed flashvars="isContent=Y&amp;titleText=출력할타이틀부분&amp;titleLink=[##_article_rep_link_##]&amp;detailText=" height="50" width="600" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" name="title_flash" quality="high" menu="false" wmode="transparent"  src="http://cdmanii.com/attachment/cfile10.uf@116B5E214A9910892D2C30.swf" /></object>



먼저 위에 코드를 복사를 합니다.





티스토리 관리자 페이지 > 글쓰기 > 서식 체크 > HTML 체크 > 서식 제목 입력 > 복사한 코드를 내용에 붙여넣기 > 저장하기

위와 같이 서식을 저장을 합니다. 서식 제목은 햇갈리지 않게 자세히 적어서 입력해 둡니다. 서식은 글관리에서 언제든 불러와서
편집 가능합니다.










티스토리 관리페이지에서 글 쓰기를 합니다. 서식에 위에 과정에서 만들어두었던 서식을 확인합니다.






미리 만들어둔 서식을 불러오기를 합니다. 서식을 불러올까요? 물음에 예를 누릅니다.






서식이 불러와지면 저렇게 Object 가 생성됩니다. 생성되지 않고 실패한다면 다시 서식을 불러옵니다.








<object height="50" width="600" align="middle" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><param value="always" name="allowScriptAccess" /><param value="http://cdmanii.com/attachment/cfile10.uf@116B5E214A9910892D2C30.swf" name="movie" /><param value="transparent" name="wmode" /><param value="false" name="menu" /><param value="high" name="quality "/><param value="isContent=Y&amp;titleText=출력할타이틀부분&amp;titleLink=[##_article_rep_link_##]&amp;detailText=" name="FlashVars" /><embed flashvars="isContent=Y&amp;titleText=출력할타이틀부분&amp;titleLink=[##_article_rep_link_##]&amp;detailText=" height="50" width="600" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" name="title_flash" quality="high" menu="false" wmode="transparent"  src="http://cdmanii.com/attachment/cfile10.uf@116B5E214A9910892D2C30.swf" /></object>

<!-- 코드설명 -->
<!-- 초보자를 위한 설명 : 출력할타이틀부분 2부분만 수정해서 사용하세요. 아래설명은 패스* -->
<!-- 출력할타이틀부분 은 소제목 타이틀 부분입니다. 이부분이 플래쉬 글자로 나타나게 됩니다. 2부분 모두 같은 제목으로 수정해줍니다. width="600" 은 넓이 부분입니다. 기본적으로 600 사이즈로 해놓았지만 자신의 블로그가 좀 더 넓고 글자를 길게 넣고 싶은경우에는 넓게 수정하세요. 플래쉬 주소 부분은 기본적으로 제가 저 플래쉬를 지우지 않을것이기에 변경하지 않아도 상관없지만, 따로 플래쉬파일을 자신의 블로그에 업로드 해놓고, 사용하고 싶다면 아래의 플래쉬 파일을 다운로드 후 자신의 계정에 업로드 한뒤 플래쉬 주소를 수정한뒤 사용하세요. -->



HTML 를 체크합니다. 하단 부분쯤에 출력할타이틀부분  2개 부분을 원하는 소제목으로 변경을 해줍니다.
(예) 출력할타이틀부분 → 나 글쓰는 중 말리지 마!







나 말리지 말라고 했지? 말리지 마요!!~  라고 저는 입력했습니다.








HTML 체크를 다시 해제한뒤 소제목 아래에 본문에 해당하는 글을 적고 글을 완성해 나갑니다. 소제목 아래에 또 다른 소제목이 있어야한다면 위에 과정을 다시 반복해서 또 소제목을 입력해줍니다.







글을 모두 완성한 뒤, 저장하기를 하면 플래쉬 타입의 Object 에 입력했던 글들이 나타납니다. 완성!



* 넉두리

처음에 이부분을 따서 만들때 고민을 좀 많이 했습니다. 조금 쉽게 사용가능하게 하려고 스크립트를 썻지만, 그렇게 할 경우에는 글을 길게 적었을때, 어느부분에 소제목을 추가했는지 나타나지 않으니 알 수 가 없더군요. 그래서 <embed> 부분은 꼭 살아있어야했는데 그래서 어쩔 수 없이 코드가 전체적으로 다 들어가도록 만들어서 서식을 만들었습니다. 덕분에 소제목을 2번 입력해야하는 수고는 있지만, 소제목 2번만 입력하면 깔끔하게 플래쉬 소제목이 뜨는군요.

<embed> 태그만 바로 쓰는것보다는 <object> 태그로 묶어서 사용하는게 아무래도 더 좋기에 (여러 브라우저에서 통용하기 위해서) 가능한 에러가 안나도록 만들어보았습니다.

정말 여러가지 실험을 해봤네요. 좀 쉽게 쓰게끔 만들어보려고했는데 계속 벽에 부딪치네요. 한참 스크립트를 만들어놓고 돌리니 FF 에서는 잘 되지만 IE 에서는 출력이 안되고 또는 서식이 재대로 동작을 안하고..  지금 이코드는 IE,FF 둘다 잘 돌아가는걸 확인했습니다.

플래쉬파일도 사실 제가 게시물에 넣어둔것을 끌어가는 형태이기때문에 스킨에 업로드해놓은것보다 가벼울듯하네요.
스킨에 올려놓는다면 항상 로드하기 때문에 무거워질테니까요. 플래쉬파일은 삭제하거나 하진 않겠지만 꼭 불안하신분은
파일을 압축해서 올릴테니 자신의 계정에 업로드 후 경로를 따서 코드를 수정하시기 바랍니다.


플래쉬타입의 제목을 블로그의 본문글 제목으로 사용하는경우도 있는데요(스킨) 이경우에는 SEO 때문에 좀 신경을 써 주어야할듯합니다. 좀 찾아보니 플래쉬글자는 당연 Object 이기때문에 검색사이트에 검색이 안된다고 하는글이 보이네요. 저는 본문에 플래쉬 제목을 넣은것이기때문에 이것과는 무관합니다.











동영상을 다운 받은뒤 (파일) 보시면 더 깨끗한 영상을 볼 수 있습니다. (800x600 영상)



아 참고로 피드버너가 100명이 넘었네요 구독자분들께 감사드립니다. 조만간 선물 행사를 해야겠네요 ^^
feedburner



이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

:)   :(   --;   :D   :O   :x   r:r   g;g   i;t   s;s

     이미지 업로드  [무료이미지 업로드 방법 설명]

  1. 이전 댓글 더보기
  2. 정지영 2010.02.17 17:41 신고

    우왕 !! 정말 쉽게 설명해주셔서 감사합니다 ㅠㅠ..

    perm. |  mod/del. |  reply.
  3. 지후아타네호 2010.02.20 20:48 신고

    아, 혹시 이거 폰트를 바꿀 수 있는 건가요? 바꿀 수 있다면 어떻게 바꾸나요?

    perm. |  mod/del. |  reply.
  4. krhyun 2010.04.19 01:33 신고

    블로그 시작한지 얼마 안됬는데 여기서 도움이 많이 되었어요 ㅎㅎ

    좋은 정보 받아갑니다. ^^

    perm. |  mod/del. |  reply.
  5. 윈컴이 2010.05.01 15:10 신고

    감사합니다^^

    perm. |  mod/del. |  reply.
  6. 버섯공주 2010.05.03 16:43 신고

    너무 궁금했던 유용한 정보에요! +_+ 우왕! 잘 보고 갑니다. 앞으로도 유용한 정보 많이 올려 주세요!

    perm. |  mod/del. |  reply.
  7. 2010.07.07 01:27

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  8. heejoo 2010.09.24 23:26 신고

    우와.. 어떻게 이런 대단한 걸 만드시는지요~
    소중히 사용할게요. 감사합니다! ^_^

    perm. |  mod/del. |  reply.
  9. 야진 2010.09.26 09:10 신고

    정말 유용한 정보 잘보고 갑니다

    perm. |  mod/del. |  reply.
  10. 노펫 2010.12.27 08:58 신고

    인용구 관련 그림을 찾다가 또 훌륭한 팁 발견했네요...

    제가 필요한 기능만 포스팅하셨네여...

    정말 유용했습니다.

    감사합니다.

    운전 조심하세요~^^

    perm. |  mod/del. |  reply.
  11. 아바래기 2010.12.29 15:43 신고

    소제목 서식을 찾아 헤매다가 정말 좋은 것을 발견했네요^^
    테스트로 적용해보니까 아주 예쁘고 보기 좋은 것 같아요~
    유용한 tip 잘 얻어갑니다!

    perm. |  mod/del. |  reply.
  12. 힘내자 2011.01.29 15:13 신고

    와우, 이렇게 간단하게 적용할 수 있게 해주셔서 감사합니다. 잘 활용하겠습니다^^

    perm. |  mod/del. |  reply.
  13. 울산남스 2011.03.03 11:41 신고

    완전 감사합니다.ㅠㅠ
    정말 좋은거 배워가네요...
    당장 실행해봐야겠어요^^

    perm. |  mod/del. |  reply.
  14. ruCat 2011.03.10 21:29 신고

    아~~ 정말 너무 감사한 팁입니다. ㅠ

    이런 스타일을 하고 싶었는데, 이렇게 가져다가 쓰면,,,그냥 거저 먹는거니, 죄송스럽고,;
    감사하고 그러네요 ㅠ.

    잘 쓰겠습니다!!

    perm. |  mod/del. |  reply.
  15. =다다= 2011.03.22 13:58 신고

    블로그 초보입니다. 블로그 디자인을 수정하려고...

    1. 제목을 강조하고싶어서요. LG 블로그처럼.. 여기선 플래시 썻더군요. 내용 잘 참고할께요.
    2. 중간제목도 강조하고 싶어서요.

    테스트 해보고 다른방법도 찾아볼려 합니다.
    이런 정보 공개가 참으로 감사합니다.

    perm. |  mod/del. |  reply.
  16. 한씨이야기 2011.06.12 03:39 신고

    (질문이 있습니다) 씨디맨님 유용한 정보 감사합니다. 다름이아니라 플래쉬파일을 스킨에 업로드하고 사용할려고 합니다. 근대 어떤 부분의 내용(소스)를 수정해야 되는지 모르겠습니다. 도와주세요!

    perm. |  mod/del. |  reply.
    • 씨디맨 2011.06.12 09:07 신고

      제가 할 수 있는 설명은 이 글에 모두 다 있습니다. 이글을 천천히 정독하시고 아래에 동영상도 보시면 아마 가능하실겁니다. 실제로 아주 초보자 분들을 위해서 적어둔 글입니다. 아래 동영상만 먼저 보시는것도 도움이 됩니다.

      perm. |  mod/del. | 
    • 한씨이야기 2011.06.12 09:19 신고

      답글 감사합니다. 제가 너무 서툴게 봤나봐요. 알려주셔서 고맙습니다.

      perm. |  mod/del. | 
  17. 꽃물담은마음 2011.07.24 14:41 신고

    멋지신 시디맨님,
    적용 했어요. 신나요! 야호! :D
    감사합니다.

    perm. |  mod/del. |  reply.
  18. 에말이오 2012.02.16 18:33 신고

    좋은 정보 감사합니다.^^*
    그런데 소제목 색깔을 바꾸려면 더떤걸 만져야 하나요?
    자세히 봐도 칼라 라는 부분이 없어서요

    perm. |  mod/del. |  reply.
  19. kasutera 2012.03.05 03:07 신고

    혹시나 싶어 출력할 타이틀부분에 제목 치환자를 넣고 시험해보니 제목으로도 뜨네요~ 웹폰트를 적용하고 싶었는데 번번이 실패했었거든요ㅠㅠ 대신 이 방법으로 제목에 멋진 폰트로 출력할수 있어서 좋으네요~ 좋은 정보 감사합니다!

    perm. |  mod/del. |  reply.
  20. 냉초코홀릭 2014.09.18 13:12 신고

    폰트나 색상을 변경하고 싶은데 어디를 손봐야 할지 모르겠습니다. HTML 서식에서는 폰트와 색상에 대해서 없는거 보니 플래쉬 파일에 정해진 대로만 가능한건가요? 혹 괜찮으시다면 저만의 플래쉬를 만들어 보고싶은데 그거에 관한 포스팅이 가능할까요?

    perm. |  mod/del. |  reply.
    • 씨디맨 2014.09.18 13:47 신고

      컬러도 가능은 한걸로 압니다. 다만 저도 정보를 다 가지고 있진 않습니다. 만들어놓은 용도를 벗어나서 따로 빼서 쓰는것이라서요.

      perm. |  mod/del. | 
  21. 【서유】 2015.05.24 16:01 신고

    궁금한게.,핸드폰에서 볼 수 있나요??
    플래시로 된 거요^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2015.05.24 21:50 신고

      이 글을 쓸 당시에는 나왔지만 지금은 안되므로 가능하면 hx 태그를 쓰시는게 좋습니다.

      perm. |  mod/del. |