블로그 서식 꾸미기 #1 (동영상)

블로그 서식을 이쁘게 꾸미는 방법에 대해서 간단한 예제 및 동영상으로 설명을 할까 합니다. 가능한 쉽게 동영상을 만들었으니 한번 봐주세요.

서식을 미리 만들어놓고 쓴다면 글을 쓸때 서식을 사용하여 블로그에 한층 통일감있는 글을 쓸 수 있습니다. 어떨때는 이렇게 어떨때는 저렇게 박스를 항상 다르게 넣는것보다는 통일감있게 자신의 블로그와 어울리게 미리 만들어둔 서식을 쓰는게 좋겠죠.

천천히 읽어주시고 마스터 하신다면 블로그의 느낌을 한층 UP↑ 하실 수 있을 겁니다.

#
제가 미리 만들어둔 서식을 보여드리겠습니다.



프로그램 다운로드에 활용하는 서식입니다. 이렇게 통일된 서식을 준다면 다운로드 글을 쓸때 편리하겠죠.



프로그램 코드등을 적을때 사용하는 서식입니다. 최근에 만들었네요. 글을 쓰면 오른쪽 상단에 Source Code 라는 그림 글자가 나타나게 해놓았습니다.






# 동영상 서식(예제)을 만들어보겠습니다.  동영상은 아래에서 확인해주세요

블로그 글쓰기에서 자신이 사용하고 싶은 박스를 그립니다.



동영상을 올릴때 검은박스를 먼저 만들고 박스안에 동영상을 넣은 상태입니다. 오른쪽 부분이 조금 허전하죠.
꼭 검은 박스일 필요는 없습니다. 위에도 말했든 활용은 여러분의 몫




저부분에 들어갈 그림을 먼저 그립니다. 포토샵을 활용하여 그림이나 , 글자 여러분이 꾸미고 싶은대로 꾸밉니다.
이제 만든 그림을 해당 서식에 업로드를 합니다. 그런뒤 그림을 임의의 공간에 먼저 올린뒤 저장 후 글 보기에서 그 그림의
절대 주소를 가져옵니다.





다시 서식 편집을 한 뒤, HTML 편집으로 들어가면 위와 같이 나옵니다.
class="txc-textbox" 는 기본값입니다. 이것을 다른것과 섞이지 않게 이름을 바꾸어줍니다.

calss="txc-textbox-movie" 로 바꾸겠습니다.




그 하단 부분에 위와 같은 코드를 입력해 넣습니다. 배경으로쓸그림주소 부분은 배경부분에 넣을 그림의 주소를 복사해둔 부분을 복사해서 넣습니다.

no-repeat : 배경 반복하지 않음
right top : 위치 오른쪽 상단
color : 글 색

서식을 저장하면 마무리가 되며 다음글을 쓸때 서식을 불러와서 항상 일정한 미리 꾸며진 멋진 서식을 사용할 수 있습니다.


# 동영상 설명

동영상으로 설명을 모두 만들어보았습니다. 동영상은 어디까지나 쉬운 예제이며, 활용은 여러분의 몫입니다.
다양하게 활용하고 서식도 공유하면 좋겠습니다.




# 서식 공유

class 의 이름은 일치를 시켜주셔야 사용이 가능합니다.

<!-- 동영상 서식 -->
<style type="text/css">
    .txc-textbox-movie{
    background: url(http://cfile23.uf.tistory.com/image/207F53204A87D71F15B77A) no-repeat right top;   
    color: rgb(232, 232, 232);
}
</style>




<!-- 코드 서식 -->
<style type="text/css">
.txc-textbox_code{
background: url(http://cfile5.uf.tistory.com/image/182C97114A8420D9241C18) no-repeat right top;
color: rgb(232, 232, 232);
}
</style>




// 추가
사실 <style> 은 본문에 지정하는것보다는 블로그 스킨에다가 지정하는게 좋겠지만, 항상 쓰는 부분이 아니고 스킨변경을 하면 다시 넣어줘야하는 번거로움이 있을 수 도 있어서 글쓰기에서 해결하는 방법을 올린것입니다. 그리고 궁금하신점이나 지적해주고 싶은 부분이 있다면 댓글이나 Q/A 를 이용해서 댓글 부탁드립니다.
신고

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

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

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

댓글 입력 폼

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

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

  1. 이전 댓글 더보기
  2. 아빠공룡 2009.08.18 14:55 신고

    아, 멋진 정보네요^^
    귀차니즘만 극복한다면... 제 블로그도 덕분에 더 멋져질텐데...;;;

    perm. |  mod/del. |  reply.
  3. 2009.08.19 00:04

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  4. LiveREX 2009.12.26 23:50 신고

    이 강좌 정말 유용하게 써먹고 있습니다 ^^
    이제 다운로드 서식하나 만들었네요 ㅠㅠ

    perm. |  mod/del. |  reply.
  5. 잉커 2010.03.19 04:14 신고

    아 이렇게 만드는거였군요.
    불면증 때문에 이 시간에 일어났는데, 할게 생겼네요!

    perm. |  mod/del. |  reply.
  6. Mystika 2010.05.15 21:32 신고

    전에 계속 찾아다녔는데 ㅎㅎ; 좋은 팁 감사합니다^^

    perm. |  mod/del. |  reply.
  7. 데니엘 2010.05.17 02:56 신고

    좋은 글 감사합니다!!

    perm. |  mod/del. |  reply.
  8. Mikuru 2010.06.28 09:27 신고

    정말 알고 싶었는데 감사합니다 ^^이제야 이것을 보다니

    perm. |  mod/del. |  reply.
  9. 미스터브랜드 2010.07.04 15:30 신고

    너무 신기하네요..예쁘기두 하구요..
    저두 자유자재로 이렇게 응용할 수 있음
    좋을텐데..너무 어렵더라구요..

    perm. |  mod/del. |  reply.
  10. 재아 2010.07.04 22:28 신고

    좋은 팁입니다.

    perm. |  mod/del. |  reply.
  11. 2010.07.05 00:55

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  12. 닉쑤 2010.07.06 03:31 신고

    처음에 씨디맨님 글 보고나서부터 서식 꼭 따라해봐야겠다고 생각하고 있었는데 포스팅 하셨네요. ㅋㅋ 통일성도 있고 깔끔하고 보기 좋더라는.. 꼭 해볼거임. ㅎㅎ 항상 좋은 글 잘 읽고 있습니다. 하지만 언제 다 읽을지.. 요새 이웃이 생기고, 블로그 고수님들을 많이 접하게 될수록 정보량이 너무 방대해져서 제 G한Rss가 터질려 그러네요. 포스팅은 안하고 허우적거리고 있어요. ㅎㅎ

    perm. |  mod/del. |  reply.
  13. NewObserver 2010.07.07 20:34 신고

    따라해보고 싶었지만,,초보인저에게는 아직 힘든가봅니다ㅜ,,
    앞으로도 좋은팁들 부탁드립니다.!!

    perm. |  mod/del. |  reply.
  14. 티비의 세상구경 2010.08.27 13:47 신고

    유용한 포스팅 잘 배우고 갑니다~!
    이미지 잘 사용할께요 ^^;

    perm. |  mod/del. |  reply.
  15. shakej 2010.10.07 17:08 신고

    http://shakej.tistory.com/497
    와우 감사합니다 !! 동영상 서식을 전 이렇게 만들어봤는데
    적용이 안되서 스킨 html/ css에다가 아예 적어버렸어요 ㅋㅋ
    감사합니다!

    perm. |  mod/del. |  reply.
  16. 노펫 2010.12.26 17:01 신고

    응용까지 성공했네요...

    유용하게 쓸 수 있을 거 같습니다..

    저는 코드서식이 쓸일이 없으니...

    대신에 다른 것으로 한번 시도를 해봐야겠네요..

    벌써부터 동영상에 써먹고 싶어서 근질근질하네여..

    잘봤습니다.^^

    perm. |  mod/del. |  reply.
  17. 노펫 2010.12.28 01:36 신고

    어제는 되더니 오늘은 다시 다른 것으로 해보려고 하니까 안되네여..뭐가 문제지...

    아~~~인내심! ㅎㅎ

    동영상을 다시 봐야겠어요...

    글자는 나오는데 엔터를 치니까...

    그림전체가 안나오고 윗부분만 반복되는 형택로 출력되네여..

    perm. |  mod/del. |  reply.
  18. EpoNg 2011.04.17 15:33 신고

    완전 잘 배우고 갑니다~~ (__):)

    perm. |  mod/del. |  reply.
  19. 꽃물담은마음 2011.07.24 14:40 신고

    이런 아름다운 방법이 있군요!
    씨디맨님 멋지십니다! 감사합니다.
    r:r

    perm. |  mod/del. |  reply.
  20. DarkShadow 2011.12.30 17:58 신고

    이런 방법으로도 할 수 있군요. 그런데 전 귀찮아서 코드를 그대로 쓰게되네요 :D
    아무튼 좋은 정보 감사합니다 :)

    perm. |  mod/del. |  reply.
  21. quarker 2012.04.14 17:16 신고

    대단하시네요. 저는 블로그 시작시 엄청난 열정을 가지고 만들어댔지만, 후에는 귀찮아서 안쓰게 됬다는.... 다운로드가 맘에 안들어서 다운로드를 버튼으로만들고, 소제목밖에 쓰는게 없네요. 제가 깔끔하고 간편한걸 좋아해서그런지 서식이 너무많으면 그래서 2개외에는 그냥씁니다..ㅎㅎ;;

    perm. |  mod/del. |  reply.
    • 씨디맨 2012.04.14 18:08 신고

      저도 자주 쓰는것만 쓰게 되는듯해요. 문서링크랑 다운로드 , 유투브 서식 정도요 ㅋ 블로그 방금 들어가서 봤는데요. 깔끔하게 잘 정리하신거같아요. 저도 최근에 가능한 맨 아래로 내려버리고 깔끔하게 맞추려고 노력중이거든요.

      perm. |  mod/del. |