태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

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로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • 최근 댓글

    최근 트랙백

    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