태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

블로그의 콘텐츠는 주제에 따라 텍스트, 이미지, 멀티미디어 중심의 다양한 형태로 작성된다. 보편적으로 텍스트 형태가 주류를 이루고 있지만, 텍스트 중심의 콘텐츠도 보다 돋보이고, 독자에게 내용의 이해와 시각적인 즐거움을 제공하기 위해 관련 이미지를 첨부하는 성향이 두드러지고 있다.

텍스트만 있는 콘텐츠라고 해서 가치가 절하되거나 블로그 디자인에 영향을 주는 것은 결코 아니다. 하지만 이왕이면 다홍치마라고 보기좋은 떡이 먹기도 좋은 까닭이다. 관련 이미지가 첨부되면 일단 독자에게 시각적으로 볼거리가 제공하고, 콘텐츠 집중도를 높이며 한걸음 나아가 블로그 디자인에도 좀 더 생기를 띄게 만드는 시너지 효과를 발휘하게 된다.

블로그 디자인

이미지 캡션 폰트, 컬러 변경이 적용된 블로그 디자인

가급적이면 가로.세로 500~600픽셀(Pixel)을 넘지 않는 다수의 이미지 첨부가 검색엔진 최적화(S.E.O)에도 좋은 효과를 기대할 수 있다는 비공식 보고도 있지만, 실제로 블로그 운영에 접목시켜 보면 상당히 좋은 결과를 나타내 보이기도 했다. 그냥 관련 이미지만 첨부해선 좋은 효과를 기대하긴 힘들다. 이미지를 읽지 못했을 때 보일 대체 텍스트와 해당 이미지를 설명하는 자막, 즉 캡션을 적절히 활용해야 한다.

티스토리 글 작성 창

티스토리 편집모드, 대체 텍스트, 이미지 캡션 입력

티스토리의 경우, 글에 이미지를 첨부하고 해당 이미지를 클릭하면 우측 패널에 이미지 크기를조정하는 너비, 대체 텍스트, 이미지 하단 설명을 적는 자막 입력 패널이 보이게 된다. 너비는 이미지의 가로 기준 크기를 지정하게 되고, 대체 텍스트는 해당이미지에 문제가 있을 때, 이미지를 대체해서 보여주는 텍스트로 검색엔진에 반영된다. 자막은 해당 이미지의 부연 설명을 담당하는 기능을 하게 된다.

본론으로 들어가서, 블로그 콘텐츠 작성에 있어 이미지 첨부도 중요하지만 대체 텍스트와 자막(Caption)을 잘 활용하면 콘텐츠가 깔끔하게 정리되어 독자들이 보기 좋은 콘텐츠로 한결 돋보이게 만들 수 있다. 일반적으로 대체 텍스트와 자막(Caption)을 입력하면 style.css에서 본문과 Caption 항목에 정의된 폰트와 컬러로 표현되어 잘 구분되지 않거나 본문에 묻혀 지나가는 경우가 많다. 하지만 이것을 좀 더 돋보이는 자신만의 폰트와 컬러로 변경해 해당 콘텐츠 관련 이미지에 집중도를 높이고, 전체적인 블로그 디자인을 돋보이는 효과를 얻을 수 있는 방법을 알아 보려는 것이다.

먼저 첨부 이미지 자막(Caption)의 폰트와 컬러를 변경하기 위해서 블로그 관리자 모드로 접속해 [스킨 > HTML/CSS 편집]을 선택한 다음 skin.html 아래 style.css 창으로 이동을 한다. 그리고 아래로 스크롤 해 /* 이미지 아래 캡션 스타일 */이란 주석문을 찾고 그 아래 스타일 정의를 변경하면 된다.

style.css

style.css의 이미지 캡션 스타일 위치

HTML이나 CSS에 관한 지식이 있는 블로거라면 어렵지 않게 변화를 줄 수 있지만, 일반 블로거라면 쉽지 않는 부분이고, 잘못하면 블로그 전체가 엉망이 되기도 하므로 조심스러울 수밖에 없어 아예 변화를 줄 생각을 가지지 않기도 한다. 이제부터 간단한 아래 설명을 참고해 자신의 블로그 콘텐츠를 한결 돋보이게 만들어 보길 바란다.

이미지 자막 CSS

이미지 캡션 기본 CSS 정의

일반적인 티스토리의 경우, 위의 그림과 같이 이미지 자막(caption)의 컬러와 정렬에 대해서만 정의가 되어 있다. 이것을 자신이 원하는 스타일로 변경하면 되는데, CSS에 대해 익숙하지 않은 사용자를 위해 폰트와 컬러, 다른 브라우저를 감안한 대체 폰트 등을 어떻게 정의를 해야 하는지 아래의 샘플 이미지를 통해서 설명한다.

이미지 자막 CSS

이미지 자막(caption) CSS 정의 예제

먼저  '.cap1'은 이미지 자막을 지정하는 것이므로 그대로 두고 컬러로 마킹한 부분만 참고하여 수정하면 된다. 보라색 부분은 폰트의 크기를 지정한 것이고, 핑크색은 자막의 폰트를 지정한 부분인데 여기서 우리새봄은 폰트를 사용하지 않으면 '돔움'이나, '맑은 고딕'으로 변경하면 무난하다. 그리고 이어지는 영문폰트는 사파리 브라우저와 파이어폭스 유저를 감안한 대체폰트의 나열이다. 블루부분은 자막의 색상을 정의한 것이며, 연두색 컬러부분은 자막의 위치정렬을 정의한 것이다.

앞서 설명한 이미지 캡션 CSS스타일을 적용했을 때, 위의 이미지 하단의 자막(Caption) 처럼 지정한 폰트와 폰트 크기, 컬러가 적용된 결과로 나타난다.

참고로 표준폰트 기준 이미지 자막 css 정의 코드를 아래에 작성해 놓아 티스토리 사용자를 위한 복사 후 기존의 캡션 스타일에 붙여넣기하여 쓸 수 있도록 했다.
(폰트크기-12픽셀, 폰트-맑은 고딕, 돋움, 애플고딕 외, 컬러-블루, 자막정렬- 중앙)

 /* 이미지 아래 캡션 스타일 */
    .cap1   { font:12px/1.7 Malgun Gothic, Dotum, AppleGothic, Arial, Verdana, Sans-serif; color:#00F; text-align:center;}

위의 내용을 참고해 이미지 자막의 폰트와 컬러를 변경한 다음 저장하게 되면 자신이 지정한 폰트, 폰트 크기 그리고 컬러로 모든 콘텐츠 첨부 이미지의 자막(caption)변경된 것을 확인할 수 있게 된다. 단순한 작업이기도 하지만 몰랐을 때는 아쉬운 부분이고, 그렇게 비중있는 과정은 아니지만 최소한 블로그를 운영하면서 자신의 글을 시각적으로 편하고 보다 돋보이는 콘텐츠를 제공하려는 노력은 독자들을 위한 성의있는 배려이자 팬 서비스 차원으로 생각하면 좋지 않을까 싶다. 이로써 블로그 디자인에 관심있는 블로거에게 조금이나마 도움이 되었으면 하는 바람이다.

저작자 표시 비영리 변경 금지
신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. Favicon of http://nashimaryo.pe.kr BlogIcon nashimaryo 2009.01.03 09:57 신고  댓글주소  수정/삭제  댓글 남기기

    아무래도 블로그 포스트에 텍스트로만 나열하는 것이 아니라 이미지와 같은 콘텐츠도 함께 들어가는 것이 더 보기가 좋은 것 같아요~
    의외로 더 집중성을 높이는 것 같고요^^

  2. Favicon of http://www.kimchi39.com BlogIcon 김치군 2009.01.03 10:15 신고  댓글주소  수정/삭제  댓글 남기기

    아하하하.. 텍스트보다 700 이상 사이즈 사진이 훨씬 많은 저같은 블로그도 있어요 ㅠㅠ...

    • Favicon of http://rusk.kr BlogIcon 재밍 2009.01.03 15:13 신고  댓글주소  수정/삭제

      김치군님껀 여행지 검색만 하면 다나옵니다.
      걱정마세요 ㅋㅋㅋㅋ

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.01.03 16:40 신고  댓글주소  수정/삭제

      ^^주제와 블로그 스타일에 따라 다르게 적용하는게 맞습니다. 특히 이미지의 비중이 큰 경우는 큰 이미지를 잘 정리해서 독자들이 관심부분을 쉽게 이해하도록 하는 것도 센스있는 운영 노하우가 될 겁니다.

  3. Favicon of http://www.jaea.net BlogIcon 재아 2009.01.03 11:16 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 정보입니다.^^^; 굿잡~

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.01.03 16:41 신고  댓글주소  수정/삭제

      감사합니다. 재아님 새해 인사가 늦었네요.
      올해는 건강하시고 행복한 나날이 계속되길 기원합니다.
      자주 찾도록 노력하겠습니다.

  4. Favicon of http://poem23.com BlogIcon 학주니 2009.01.03 11:36 신고  댓글주소  수정/삭제  댓글 남기기

    610px로 맞춰놓고 사용중 ^^;
    그림은 플리커로 ^^

  5. Favicon of http://hwagoon.co.cc/ BlogIcon 화군 2009.01.03 11:37 신고  댓글주소  수정/삭제  댓글 남기기

    요거 궁금했었는데 감사합니다 ^^

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.01.03 16:44 신고  댓글주소  수정/삭제

      좀 더 활용하면 비주얼한 캡션을 구현할 수도 있지만, 블로그 특성상 페이지 로딩 속도를 감안해서 이 정도가 가장 적당할 것 같습니다.
      도움이 되셨다니 기쁩니다. 새해 인사를 못 드렸네요.
      화군님, 올해는 부자되시고 멋진 일들만 계속되길 빌겠습니다. 화이팅!!!

  6. Favicon of http://rusk.kr BlogIcon 재밍 2009.01.03 15:13 신고  댓글주소  수정/삭제  댓글 남기기

    캡션기능이 따로 있었군요. 감사합니다.
    그동안은 그냥 글로 밑에다 적고 중간정렬 하느라 불편했어요 ^^;

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.01.03 16:46 신고  댓글주소  수정/삭제

      안녕하세요? 재밍님.
      좀 더 빨리 알려 드릴 껄 그랬습니다.ㅎㅎㅎ
      이제는 좀 더 편하게 블로깅을 즐기시길 바랍니다.
      최근 재밍님의 글 잘 보고 있습니다.
      새해에는 왕성한 활동으로 이웃블로그의 사랑을 독차지하시길 기원합니다.

  7. Favicon of http://http://jsapark.tistory.com BlogIcon 탐진강 2009.01.03 20:46 신고  댓글주소  수정/삭제  댓글 남기기

    마루님/ 제가 처음 블로그를 시작했는데 격려해주셔 감사드립니다.
    블로그를 하는데 앞으로 많은 도움 부탁드립니다.
    새해 복많이 받으세요,

  8. Favicon of http://www.hansfamily.kr BlogIcon 마래바 2009.01.03 23:08 신고  댓글주소  수정/삭제  댓글 남기기

    아~~ 좋습니다. ^^
    HTML 잘 모른 저같은 경우엔 대단히 유용한 팁입니다...

  9. Favicon of http://blog.naver.com/hestia432 BlogIcon 슈냥 2009.01.04 12:24 신고  댓글주소  수정/삭제  댓글 남기기

    와... 옛날에 html 배웠는데 조금씩 생각나네요 ㅋㅋ 감사합니다

  10. Favicon of http://rusk.kr BlogIcon 재밍 2009.01.04 14:05 신고  댓글주소  수정/삭제  댓글 남기기

    고대로 복사해서 적용을 했는데 바뀌질 않네요 ㅠㅠ
    깨알만한 원래 글씨체 그대로...흑흑
    IE6이라 안보이는 건가요 흠;;

  11. Favicon of http://rusk.kr BlogIcon 재밍 2009.01.11 22:51 신고  댓글주소  수정/삭제  댓글 남기기

    드디어 바꿨습니다.
    .cap1 요부분도 있었는데
    .article 안에 들어있는 cap을 바꿔야 적용이 되더군요.
    감사합니다~! ^^

  12. Favicon of http://www.webplantip.com BlogIcon 현웅재 2009.01.14 13:26 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 정보 감사합니다. ^^ 그래서 기쁜 마음에 적용시켜 보려 했는데 /* 이미지 아래 캡션 스타일 */ 주석이 제 스타일시트에는 없네요 이럴땐 어떻게 하면 좋을까요?

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.01.14 13:38 신고  댓글주소  수정/삭제

      그러셨어요? 그럼 style.css 내용을 복사하셔서 메모장으로 스타일.txt로 저장하신 다음 maruzzang@gmail.com으로 보내주시면 확인 후 수정해서 보내드리도록 하겠습니다.

  13. Favicon of http://brainer1.tistory.com BlogIcon Brainer 2009.02.02 19:12 신고  댓글주소  수정/삭제  댓글 남기기

    오늘 바로 적용했어요^^
    근대 현웅재님께는 저도 주석 없어서 그대로 타이핑해서 넣으시면 된다고 전해주세요.
    그런데 굵게는 어떻게 하죠???

  14. Favicon of http://brainer1.tistory.com BlogIcon Brainer 2009.02.02 19:39 신고  댓글주소  수정/삭제  댓글 남기기

    그런데요...
    제 블로그는 너무 사진이랑 캡션이 딱 달라붙어 있네요;;
    엔터를 한번 친다고 해야하나???
    어쨋든 블로그에 한번 오셔서 확인을 해주실 수 있을까요???

    결론 : 너무 사진과 캡션이 딱 붙어있어 보기에 별로이다.
    해법은???

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.02.02 20:21 신고  댓글주소  수정/삭제

      너무 바짝 붙긴 하네요.^^
      CSS로 정의하는 거라 외부에 보이는 것으로는 원인을 찾기 힘든 사항입니다.
      제가 직접 살펴보고 수정할 수 있도록 관리자 모드 접속후 팀블로그탭에 제 메일 maruzzang@gmail.com을 관리자로 초대해 주시면 접속 후 원인을 살펴보고 개선해 드리도록 하겠습니다.^^

  15. Favicon of http://270mm.tistory.com/ BlogIcon B-bob 2009.03.04 03:54 신고  댓글주소  수정/삭제  댓글 남기기

    혹시 작은 사진을 올렸을때 캡션의 글이 이미지 크기에 맞게 줄 바꿈 할 수 있는지 아시나요? ㅠㅠ

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2009.03.04 09:49 신고  댓글주소  수정/삭제

      CSS를 조정해서 컨트롤 하기는 힘들 것으로 생각되는데, 티스토리가 나머지 영역은 사용자에게 권한을 부여하지 않는지라 좀 더 연구해 보고 답을 찾으면 알려 드리도록 하겠습니다.

  16. Favicon of http://270mm.tistory.com/ BlogIcon B-bob 2009.03.04 11:14 신고  댓글주소  수정/삭제  댓글 남기기

    역시 그렇군요 ㅠㅠ 혹시나 했는데

  17. Favicon of http://wolf.tistory.com BlogIcon 늑대 2009.04.02 00:53 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 정보 감사합니다. ^^ 앞으로 많은 도움 받을 것 같아요~ 몇가지 질문이 있는데 괜찮을 까요? 첫번째는 현재 블로그 기본 색이 보라색인데, -디자인로그님의 블로그처럼-바깥쪽은 연한 보라색으로 안쪽은 흰색으로 바꾸고 싶습니다. 아무래도 현재는 가독성이 떨어지는 것 같습니다^^; 둘째는 본문들어가는 부분이 가로로 너무 긴 것 같아서요. 이 부분을 조정하고 싶은데 어떻게 하면 좋을 까요 ?^^;

  18. Favicon of http://www.designpot.co.kr BlogIcon 아이레스 2009.08.11 13:31 신고  댓글주소  수정/삭제  댓글 남기기

    즐겨찾기 해놓았습니다. 좋은 정보가 많이 있네요..
    앞으로 자주 찾아뵐께요

  19. Favicon of http://appleii.tistory.com BlogIcon appleii 2010.01.26 11:59 신고  댓글주소  수정/삭제  댓글 남기기

    덕분에 캡션을 수정했습니다. 그런데 스킨에 따라서는 .cap1 이 없는 경우도 있더군요.

  20. 니부 2010.10.03 11:39 신고  댓글주소  수정/삭제  댓글 남기기

    유용한 정보 감사합니다. 도움을 얻고 갑니다.


우드스