태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

css/html을 다루는 것이기 때문에 어렵다고 느끼실 수 있습니다. css/html을 뭐냐고 물으신다면 웹에서 구현되는 언어라고 말씀 드리고 싶습니다. 쉽게 말해 한국어, 영어, 일어 등 각 나라 말이 있듯이 컴퓨터에도 자기만의 언어가 있지요. 정확히 언어라고 단정 지을 수는 없지만 그렇게 이해하시면 편합니다.

css/html을 체계적으로 다루고 배우려면 태그란 것부터 시작해서 함수, 자바스크립트등 많은 것들을 먼저 숙지 하셔야 하기 때문에 무척 광범위하고 어렵습니다. 이 코너에서는 그런것들은 몰라도 됩니다. 그냥 제가 알려드리는 대로 그대로 따라만 하시기만 하면 됩니다.

배경이나 타이틀 부분을 수정을 하고 싶지만 소스를 볼 줄 모르고 이런 부분에 전혀 감을 잡지 못하시는 분들을 위한 글입니다.( 다 알고 있는 거자나? 하시는 분들을 위해 말씀드리는 거예욧~!)

저번 시간에는 배경에 대해서 알아 봤었죠? 이번에는 타이틀 부분을 수정하는 방법에 대해서 알아 보겠습니다.
타이틀의 크기 조절하기, 원하는 이미지 넣기, 블로그 제목 고치기등에 대해 알아 보겠습니다. 준비물도 있어야 겠죠? 타이틀에 넣을 이미지, 메모장, 그림판(포토샵)도 열어 두시고(색상지정) 이 정도면 되겠군요.

참고:
티스토리의 경우 1개의 계정으로 블로그를 5개까지 생성할 수 있습니다.
스킨을 고치실때 블로그에서 직접 하지 마시고, 스킨테스트용 블로그를 비공개로 하나 만들어 두시면 좋습니다.
그곳에 스킨 관련 이미지등도 올려 놓으시고(url이 필요할 경우가 있으니까요), 고친 스킨이 잘 적용이 되는지 바로 동작 시켜볼 수 있으니 편리합니다.
테스트용 블로그를 하나 만드시고, 글 하나를 복사해서 비공개로 올려 놓으세요.

타이틀에 원하는 이미지 넣기

1. 처음시간에 했던 배경이미지 넣는 방법과 동일 합니다. 
   사용할 이미지를 업로드 하시고 나서, 코드를 찾아 이미지주소만 바꿔 주면 되겠지요?
파일 업로드 하는 법과 스킨 배경에 관해 자세히 보시려면 관련글을 읽어주세요.
스킨 수정과 파일 업로드는 어떻게 하나요? ▶ http://www.yesbedesign.com/62
티스토리 스킨 배경을 내맘대로 바꾸어 보자 ▶ http://www.yesbedesign.com/56

2. 이미지를 업로드 하고 업로드한 이미지 이름을 꼭 외워 두셔야 겠지요? 업로드한 이미지를 찾아 
    ctrl+c를 눌러 이미지 주소를 복사해 둡니다.(메모장등에 복사한 이미지 주소를 적어 놓는 방법도 좋습니다.)

3. HTML/CSS를 선택하시고 ctrl+F를 누르시면 작은창 하나가 뜹니다.(원하는 단어를 찾는 방법입니다.)
   이 곳에 header를 쓰고 검색하기(다음)를 눌러 style.css로 넘어와서 아래 코드가 나오는 곳을 찾습니다.

                  위에 보시면 header를 입력하고 아래 "다음"을 눌러 위와 같은 코드들이 있는 곳을 찾습니다.

4. 이전 시간에 했던 글을 숙지 하셨다면 위에서 찾은 코드를 보시면 무엇을 고쳐야 될지 아실 겁니다.
   코드를 살펴 보겠습니다.
   padding-top:53px;
   background-color:/*@title-background-color=*/ transparent /*@*/;
   background-image:/*@title-background-image=*/ url("images/sk6.gif") /*@*/;
   background-repeat:/*@title-background-image-repeat=*/ repeat-x /*@*/;
   background-position:/*@title-background-image-position=*/ left top /*@*/;

   위의 블록에 복사한 주소로 바꾸어 준 후 아래 title-height=의 부분에서 74px의 숫자를 
   타이틀 이미지 높이와 같게 맞추어 줍니다. 이미지의 높이 100인데, 위 처럼 74이면 이미지가 잘리겠지요?

5. 타이틀 배경 이미지를 없애고 싶을 경우엔 주소 넣는 부분에 background-image: none;으로 표기 하시면 됩니다.
   background-image:/*@title-background-image=*/ url("images/sk6.gif") /*@*/; 를
   background-image:/*@title-background-image=*/ background-image: none;/*@*/; 로 바꾸어 주기

타이틀의 블로그 제목 고치기

▶ 먼저 이미지 수정한 곳 아래로 보시면 아래와 같은 코드가 있는 곳을 찾을 수있습니다.


1. transparent를 색상 코드로 바꾸어 주면 블로그 제목부분의 배경색을 지정 할 수 있습니다.
   투명하게 하시려면 그대로 놔두시면 됩니다.

2. #2A2A2A의 코드를 바꾸면 블로그 제목의 색상을 바꾸실 수 있습니다.

3. 24px는 블로그 제목의 크기입니다. px로 지정하셔도 되고, pt로 지정하셔도 됩니다. 지정하지 않을 경우 위에 보시면
    h1(헤드라인)의 크기대로 적용됩니다.

4. 블로그 제목의 글꼴을 지정 합니다. 위에는 돋움체와 산-세리프체를 썻군요.
    한글로 써 넣으셔도 됩니다. 윈도우 기본 글꼴과 무료 글꼴은 적용 가능합니다.
단, 윈도우 기본 글꼴이 아닌 다른 글꼴을 쓸 경우, 방문자가 해당 글꼴이 없을 시에는 
윈도우 기본 글꼴중 자동으로 대체 됩니다. 윈도우 기본 글꼴외의 것은 되도록 피하는 것이 좋습니다.


오늘은 스킨 타이틀 부분에 대해 배워 봤습니다. 이해가 되셨는지요? 태그를 같이 공부하시면 이해하기가 빠를 겁니다.
어려우시더라도 포기 하지 마시고 예스비™와 함께 하나씩 배워 보아요.
잊으신거 있으시죠? 추천과 믹시는 공짜이니 맘놓고 눌러 주시기 바랍니다. 제 강의료이니 넉넉하게 넣어 주세요^^&


덧) 현재 웹디자인 전반에 대해 자료를 정리 중입니다.
     자료정리-> 필요한 이미지 생성-> 문서화-> 포스팅->등 준비 과정이 많고 시간이 오래 걸립니다.
     현재는 틈틈히 준비 하다 보니 진행 상황이 많이 늦네요. 조금 힘드시더라도, 기다려 주시길 바라며,
     현재 올리는 글들은 기초부분을 제외한 응용부분의 포스팅임을 알아 주시기 바랍니다.


출처 : 본인작성 (
http://www.yesbedesign.com )
위 내용은 무단복사및 불펌을 불허합니다.





posted by 예스비™

이글에 관한 저작권은 예스비™에게 있으며, 무단 전제및 스크렙(퍼가기), 인용, 수정등을 불허 합니다. 이 글의 사용은 공지의 "저작권안내"에 따라 사용 하시기 바랍니다. 불편하시더라도 가급적 rss로 구독하거나 제 블로그에 직접 방문하셔서 읽으시길 바랍니다. _by 예스비™
제 글이 맘에 드셨나요? RSS구독을 하시면 무료로 배달해 드립니다.
  • 한rss로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • .:★:. 댓글은 이웃과 소통하는 마음의 창입니다. .:★:.   

    1. Favicon of http://sangogi.com BlogIcon 상오기™ 2009.05.21 22:17 수 정 댓 글

      이런 강좌 하나 포스팅하려면 오랜 시간이 걸리죠~^^
      초보 분들에게 많은 도움이 되겠네요~~~
      수고 하세요~! ^___^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.22 06:57 수 정

        도움이 되었으면 좋겠는데 어쩔지 모르겠네요ㅎㅎ
        처음 시작 할때부터 컨텐츠 하나를 해야지 하면서 어떤 컨텐츠로 할지 많이 고민을 했었어요.
        아는게 도둑질이라고, 제가 아는것이 이분야이니...
        식상해도 밀고 나가려고 결심했어요.

    2. Favicon of http://0168265.tistory.com BlogIcon 미자라지 2009.05.22 01:43 수 정 댓 글

      시간날때 이미지 좀 넣어보고싶네요...
      아...요즘은 왜케 정신이 없는지..;;

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.22 07:00 수 정

        바쁜건 좋은 것이죠.
        오늘도 힘차게 화이팅~
        즐거운 하루 되세요^^&

    3. Favicon of http://thinknow.tistory.com BlogIcon Channy™ 2009.05.22 09:01 수 정 댓 글

      아.... ㅎㅎ 추천하고 갑니다.
      기본스킨만 쭉 써오고 있었는데 이번 기회에 꼭 바꿔봐야 겠군요...
      그런데 포샵을 잘 못해서 괜찮은 타이틀 이미지를 만들 수 있을지 걱정이네요 ㅠㅠ

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.22 10:38 수 정

        처음부터 하나씩 해나가면 될거에요^^
        저도 처음엔 무척 헤메고 그랬어요~ㅋㅋ
        화이팅~~이쁜 스킨 기대할께요^^&

    4. 2009.05.22 09:55 수 정 댓 글

      비밀댓글입니다

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.22 10:39 수 정

        저도 잡탕이 되어 가고 있어요~흑흑ㅠ
        예약발행을 해놨는데, 오늘부로 쫑 입니다!!
        반성문 썻어요~ㅋㅋ

    5. Favicon of http://tirun.tistory.com BlogIcon 티런 2009.05.22 10:30 수 정 댓 글

      정성이 가득 담긴 내용 잘봤습니다.^^
      좋은 정보도 나눠주시고...역쉬...예스비님 멋쟁이.ㅎㅎ

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.22 10:40 수 정

        멋쟁이?~음...
        이쁘다는 말을 더 좋아 하는데~ㅋ1ㅋ1
        역쉬 난 여잔 가봐~후훗...
        내일부터 포스팅이 뜸~해질지 몰라요ㅋㅋ
        반성문쓰고, 반성하고 있어요ㅋㅋ
        앞으로 더 열심히 해보겠습니다^^&
        감사합니다~

    6. Favicon of http://toyvillage.tistory.com BlogIcon 라이너스™ 2009.05.22 10:35 수 정 댓 글

      저도 들러주신 호의에 놀러왔습니다.ㅎㅎ
      좋은 정보네요^^
      오늘은 날이 좀 개었네요. 화창한 날씨만큼
      멋진 하루되시길^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.22 10:42 수 정

        홋~감사합니다.
        블로그가 많이 어설프죠?ㅋㅋ
        저의 프로포즈?가 딱지 맞지 않아서 기분이 좋은데요~!!
        이말 하면 또 몇분이 화들짝!!하겠당ㅋㅋ
        앞으로 좋은 이웃으로 지내보아요~
        찾아 주셔서 감사합니다.
        좋은 하루 되세요^^&

    7. Favicon of http://kousa.tistory.com BlogIcon 미국얄개 2009.05.22 10:40 수 정 댓 글

      HTML 태그와 관련된 내용의 포스팅을 하셨군요.
      잘 보고 갑니다. 그리고 트랙백 하나 걸어 놓겠습니다.

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.22 10:45 수 정

        감사해요.
        트랙백 많으면 좋아요!!
        간혹 상관 없는걸로 무례하게 떡허니 떡밥던져 주듯이 걸리는 트랙백빼고는ㅋㅋ
        오늘도 힘찬 하루 되세요^^&
        엄마는 내일쯤에 라스베가스에서 돌아온다고 하네요.
        엄청 재밌다네요.
        그래서인지 전화도 한통뿐이 안하시더라구요~ㅋㅋ
        연락 없으면 여기서는 걱정이 되서 턱받치고 있는데 말이죠...

    8. Favicon of http://logfile.tistory.com BlogIcon 와이엇 2009.05.22 12:18 수 정 댓 글

      좋은 팁 알려주셔서 감사합니다. 추천드리고 갑니다. ^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.22 13:17 수 정

        좋은 정보가 되셨다니 다행이에요.
        오늘은 날씨가 화창해서 좋네요.
        즐거운 시간 되세요.

    9. Favicon of http://pangsan.tistory.com BlogIcon 야이노마 2009.05.22 12:29 수 정 댓 글

      그러고 보니 타이틀이 바뀐것을 지금 알아봤네요 ;;
      저는 아무것도 모른채 예전에 타이틀을 이미지로 꾸몄던 기억이있네요 ^^;

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.22 13:20 수 정

        처음부터 다 알고 있는 사람은 없죠ㅋ
        하나씩 배우다보면...한참 뒤에는 아~그거!! 하게 되자나요~
        앞으로 열심히 포스팅 해야겠어요.
        내심 올리면서, 다 알고 있는거 재탕하는거 아냐? 하고 있었거든요.
        오늘도 힘찬 하루 되세요~

    10. Favicon of http://johnsmith.tistory.com BlogIcon 존스미스 2009.05.27 23:44 수 정 댓 글

      이야~ 팁을 보고 겨우겨우 수정을 했습니다.
      좋은 정보 감사합니다 (__)

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.08.02 12:01 수 정

        아뉘~ 존스미스님도 언제 댓글을 달아 놓으셨지?
        죄송합니다. 미처 댓글이 달린걸 확인 못했네요.
        즐거운 주말 되세요.

    11. Favicon of http://nejooso.com BlogIcon 텍사스양 2009.06.24 14:01 수 정 댓 글

      제가 원하는 부분을 알고 계실 거 같아서 문의 드립니다..
      블로그 타이틀의 텍스트 위치를 수정할 수도 있을까요?
      좌측 위, 아래 등으로 수정을 하고 싶어서요..

      여기에 텍스트를 아예 안보이게끔도 가능 한지..
      (환경설정에서 지우는거 말고)

      타이블 부분에 그냥 백그라운드 이미지만 보여지거나 텍스트 위치를 수정하고 싶은데 참~ 찾기 어렵네요..
      수고하세요~

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.24 22:41 수 정

        문의 주신 내용은 방명록에 남겨 드렸습니다.
        이해가 안되시면, 스킨 소스(html과 스타일시트)를 직접 메일로 보내 주시면 좋겠네요.

    12. Favicon of http://www.jaea.net BlogIcon 재아 2009.06.25 11:48 수 정 댓 글

      그럼 저기 타이틀에다가 링크를 걸수는 없나요??

      저도 타이틀은 넣었는데 css를 잘 모르다보니 타이틀에 링크를 걸고 싶은데요!!! 메인으로..

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.25 12:36 수 정

        본문에서 치환자를 삽입해줘야 됩니다.
        div class="container">
        <div class="header">
        <h2><a href=" "> </a></h2>
        <div class="rss"><a href="" onclick="window.open(this.href); return false">블로그 구독하기</a></div>
        에서 보시면 container부분에 header치환자를 삽입해주셔야 타이틀을 틀릭했을때 블로그 메인으로 다시 돌아오는 기능을 하게 됩니다.
        아마도 타이틀을 틀릭했을때 되지 않는것은 스킨에서 치환자 삽입이 되지 않은것 같아요.

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.25 12:40 수 정

        치환자가 댓글에 안보여 지네요.
        <h2><a herf="">링크 치환자">타이틀 치환자</a><h2>
        이렇게 넣으시면 되는데요...
        "/"빼고 따로 하나씩 적어 넣으셔요.
        링크 치환자는[/#/#/_/blog/_/link/_/#/#/]이구요
        타이틀 치환자는 [#/#/_/title/_/#/#/]입니다.
        /만 배고 적어 넣으세요.
        댓글에 치환자가 안보여지네요;;

    13. Favicon of http://aufakd.tistory.com/ BlogIcon hoppang 2009.07.18 23:53 수 정 댓 글

      감사합니다!

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.08.02 12:04 수 정

        댓글 달린것을 이제 보게 되었습니다.
        늦게 답글 올려서 죄송합니다.
        곧 답방하겠습니다.

    14. 제제노 2009.08.02 10:19 수 정 댓 글

      언제 한번 스킨을 만들어보고싶었는데..
      이런 과정을 거치네요. 배우고 가요.!

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.08.02 12:05 수 정

        도움이 되었다니 다행입니다.
        찾아 주셔서 감사합니다.

    15. Secret ID 2009.08.05 00:28 수 정 댓 글

      워매;; 디자인이라던가 이런게 나하곤 너무 멀게 느껴지는군요,.. ㅠㅜ

    16. Favicon of http://www.freedownloadz.net BlogIcon free download 2011.05.31 17:28 수 정 댓 글

      Tistory 확실히 옵션 중 하중과 뛰어난 플랫폼입니다

    최근 댓글

    최근 트랙백

    BLOG main image
    포토샵 강좌, html/css 강좌등 어렵게만 느껴졌던 웹디자인을 초보자도 쉽게 이해 할 수 있는 튜토리얼, IT 트랜드, 블로그팁과 운영법, 디자인 시각에서 풀어 헤치는 상품 리뷰등, 디자인에 대한 재밌고 유익한 정보를 제공하는 블로그입니다. by 예스비™
    rss

    위젯

    BLOG ★ NIGHT

    Blog♥Rings

    Blog♥Rings Family Blog & Sites T-Blog Web site meta hub site

    구독리스트

  • rss
  • Add to Google Reader or Homepage
  • 블로그코리아에 블UP하기
  • Powered by FeedBurner
  • BlogRankers.com
  • Page Ranking Tool