태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

스킨을 티스토리나 기타스킨을 가져다가 부분수정을 하거나, 직접 스킨을 만들어 쓰시는 분이 계시기도 하고,
그냥 쓰시는 분들도 계십니다. 이번 배우기에서 다룰 내용은 스킨을 가져다 쓰시는 분들 중에 티스토리의 경우
스킨 위자드가 없는 스킨을 쓰는 분들을 위해 간단하게 알려 드리려고 합니다.

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

배경을 내가 원하는 이미지로 바꾸기

1  관리자로 들어 가셔서 스킨에서 스킨>html/css편집>파일업로드를 선택합니다.
   아래 빨간 박스쳐진 부분을 눌러 내가 넣고 싶은 이미지를 찾아 업로드 합니다.
   여기서 내가 업로드한 이미지를 찾아 이미지 이름 전체를 복사 합니다.
   (예: 홍길동.gif라고 되어 있으면 홍길동.gif 전체를 ctrl+C로 복사합니다.)



2. 파일을 업로드 하셨으면 바로옆의 html/css편집으로 이동 합니다.
3. html/css편집에서 css에서 맨위의 body부분에서 아래 코드를 찾습니다.
   /*@background-image=url(./images/bg_top.jpg)*/ url("images/rhythm_bg.gif") /*@*/
   블록에 있는 이미지 주소부분을 아까 복사해둔 주소로 교체한 후 맨 아래 확인을 누르고 메인으로 넘어 오시면
   배경이미지가 교체되어 있을 겁니다.
  배경 이미지를 넣으실때 유의 해야 될 점
배경이미지는 포스트부분 아래에 위치하는 이미지이기 때문에
이미지 사이즈에 따라 보이는 것이 틀려 질 수있습니다.
보통 반복없이 전체 이미지로 넣을 경우 이미지가 작은 경우는 업로드 하기전에
이미지의 크기를 가로800px~1000px정도로 사이즈를 크게 바꾼 후 업로드 하셔야 됩니다.
요즘은 와이드모니터도 많이 보급되어 1280해상도에 맞춰 제작하기도 하나
본인이 보는 것이 아닌 타인이 보는 걸 고려해 가장 일반적인1024px에 맞춰
이미지를 삽입하시는 것이 가장 좋은 방법입니다.


배경이미지 패턴형태로 배열하기

▶ 통으로 된 전체이미지가 아닌 패턴 형태로 이미지를 바꾸고 싶을때 수정하는 방법입니다.
    바둑판모양이나, 좌우로 반복,위아래로 반복등으로 이미지를 바꾸는 방법입니다.
    수정하고자 하는 이미지를 업로드 하는 방법은 위와 같습니다.

1. 가로로 반복 배열하기
   /*@background-image-repeat=no-repeat*/ no-repeat /*@*/
* no-repeat의 부분을 repeat로 바꾸어 줍니다.
*바로 옆 no-repeat부분을 repeat: repeat-x;로 바꾸어 줍니다.

2. 세로로 반복 배열하기
   /*@background-image-repeat=no-repeat*/ no-repeat /*@*/
* 바꾸는 것도 위 가로로 바꾸는것과 동일합니다.
  단, 두번째 부분의 xy로 바꾸어 주면 됩니다.

3. 바둑판 배열하기
  /*@background-image-repeat=no-repeat*/ no-repeat /*@*/
* no-repeat의 부분을 repeat로 바꾸어 줍니다.
*바로 옆 no-repeat부분을 repeat: repeat;로 바꾸어 줍니다.

배경이미지를 없애고 색상으로만 지정하기

▶ 이미지 전체를 없애고 원하는 색상으로 바꾸거나, 이미지 크기를 바꾸지 않고 좌우의 여백이나 위아래 여백을
    색깔을 이용해 지정하고 싶을때 하는 방법입니다.
1. 배경이미지 전체를 업애기
   /*@background-image=url(./images/bg_top.jpg)*/ url("images/rhythm_bg.gif") /*@*/
  원래의 코드에서
   /*@background-image=background-image:;*/ background-image: none; /*@*/
  이 코드로  바꾸어 줍니다.

2. 배경 색상 바꾸기
   /*@background-color=background-color: #ffffff;*/ background-color: #ffffff; /*@*/
   이미지 바꾸는 코드위나 아래에 위와 같은 색상값이 들어간 코드가 있습니다.
   두 곳의 색상값을 원하는 색상값으로 교환 해주시면 됩니다.
위에 제시된 코드는 약간씩 틀릴수 있습니다.
제가 블록을 쳐준 부분만 찾아서 고치시면 무리없이 스킨 배경을 바꾸어 쓰실 수 있을겁니다.
앞으로 코드를 하나씩 배우시다 보면 직접 만들어 쓸수도 있을 거예요.
천리길도 한걸음 부터~~!

이상 예스비™와 간단히 스킨을 바꾸는 방법에 대해 배워 봤습니다.
설명이 잘 되었는지 모르겠군요.
더 설명이 필요하거나 이해가 안되시는 분은 소스를 복사해서 댓글에 첨부하여 문의해 주세요.
제 강좌가 도움이 되셨나요? 되셨으면 그냥 가시면 안되죠~잉!!
추천 퐉퐉~믹시 퐉퐉~ 날려 주시고 가세용~ *^^*
그럼 다음에 또 뵈어요~꾸벅(_._)

출처 : 본인작성 ( 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