태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

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

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

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

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로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • .:★:. 댓글은 이웃과 소통하는 마음의 창입니다. .:★:.   

    1. 이전 댓글 더보기
    2. Favicon of http://pangsan.tistory.com BlogIcon 야이노마 2009.05.17 10:17 수 정 댓 글

      배경화면이 지겨워지면 꼭 한번 해야겠네요 ^^

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

        배우기카테고리는 바로바로업데이트가 안되지만,
        앞으로 포토샵과 일러스트,플래시,스킨등
        웹 전반에 관한 포스팅을 준비 중입니다.
        6월중순부터나 본격적으로 포스팅이 될듯해요.
        머리속에 든것들을 글자화 해서 정리해야되고, 독자에게 정확히 정보전달을 해야되는 부분이라서요.
        차근차근 하나씩 올릴려고요.
        카테고리정리는 이후 어느정도 강좌가 본격화되면 정리할 생각입니다.
        아직은 뒤죽박죽 이지요? ㅋㅋ

      • Favicon of http://pangsan.tistory.com BlogIcon 야이노마 2009.05.17 13:12 수 정

        포토샵 포스팅은 기대가 되네요 ^^
        저도 포토샾은 사용하지만 배운기억이 없어서 간단한 편집용으로밖에 사용을 하지않고있네요

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

        포토샵이 워래 편집용 프로그램입니다.
        편집을 하실줄 알면 다 하시는 겁니다~ㅋㅋ

      • Favicon of http://pangsan.tistory.com BlogIcon 야이노마 2009.05.18 11:14 수 정

        거창한 편집이 아닌 글자,그림 삽입 정도입니다;;
        전혀 편집할 줄 모릅니다 ㅜㅜ

    3. Favicon of http://2proo.net BlogIcon 2Proo 2009.05.17 10:25 수 정 댓 글

      새벽형 사람이군요.
      여자사람 이라고도 부르는...ㅋ

      홍길동.gif 복사는 ctrl+v 가 아니고 ctrl+c 가 맞죠~ ㅋ
      비가 그쳤습니다요. 즐거운 일요일 보내세요

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

        헐~정보전달에 관한 것은 잘못 전달하면 안되는데...
        얼릉 고쳐야 겠습니다ㅠ
        왠 오타가~ㅋㅋ
        3번이나 확인했는데;;

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

        흑흑ㅠ
        밥하고 아버지 아침드리고, 설거지하고 온사이 많이도 읽으셨네ㅠ
        혹시 보신분들중에 제 글 보면서 스킨 고치시는 분 없겠지요?
        제발~없기를...에휴~또 걱정이네;;

    4. Favicon of http://2proo.net BlogIcon 2Proo 2009.05.17 11:08 수 정 댓 글

      있을꺼에요.. ㅎㅎ
      저도 처음에 스킨 고치려고 참 많이도 돌아다녔어요.
      조그만 팁이라도 있으면 그거 가지고 씨름하고.. 안돼면 다른데 또 가서 기웃거리고..
      그땐 한참 정신없었는데 나중에 보면 현재의 이웃분들이 미리 닦아놓은 길을
      편하게 따라간거였죠.. ㅎㅎ
      이런 팁 조차도 시작하는 이들에겐 아주 좋은 정보랍니다~!!

      식사는 맛있게 하셧는지요? ㅎㅎ

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.17 11:27 수 정

        지금 불난집에 부채질해요? 걱정하고 있는데ㅠ
        왜 안되냐고 욕하고 있을것 아녀요ㅠ
        뒷북치고있는건 아닌가 싶어요~ㅋㅋㅋ
        하긴,제가 아는 언니가 집안일만 하다가 뒤늦게 취직을 하려고, 사무보조에 관해 직업학교를 다녔어요.
        엑셀,한글,오피스 이런것들 배우는 강좌요~
        그런데, 컴퓨터 키는 법을 몰라 헤멨다고 하더군요~
        애들이 하는걸 봐도 집안일에 애들 뒷바라지에
        관심있게 보질 않아서,
        막상 자기가 하려고 보니 엄청 당황스럽더래요.
        아직도 그런 분들이 계실까요? ㅋㅋ
        만약 계시다면 제가 조금이라도 도움이 되었으면 하네요.

    5. Favicon of http://2proo.net BlogIcon 2Proo 2009.05.17 11:35 수 정 댓 글

      요즘 시대에 컴퓨터 잘 모르는 사람 없을거 같죠? 아뇨~ 정말 많아요.

      얼마전엔 하루 종일 바빳는데
      한 녀석이 컴터 할줄 몰라서 부품 사다가 조립해주고, 윈도우즈 깔아주고.. 이게 몇시간 걸리고..

      친구녀석 한놈이 LCD 모니터 아답터가 나갔다고 사다 달래요..
      일반적인 전원은 구멍 안에 핀 하나 들어가는데 그녀석꺼는 4개의 핀이 들어있더군요.
      결국 헛수고하고 온라인으로 주문했지요..

      그다음 집에 왔더니 동네 아주머님이 이제 컴퓨터 처음 배운다고 절 부르시더군요.
      가서 한시간동안 바탕화면에 아이콘 만드는법, 휴지통 사용하는법, 타자 치는법 등등을
      가르쳐드리고 왔답니다. 흑...

      이런 팁 글은 지금 당장은 아니더라도 꾸준히 찾는 분들 있어요.
      누군가에겐 정말 필요한 팁이 되겠지요. ㅎㅎ

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

        응원해 주셔서 감사합니다.
        이프로님 말씀대로 기초부터 하나씩 시작하겠습니다.
        만약 아니면 이프로님 가만 안둘거에요~

    6. Favicon of http://usedbooks.tistory.com BlogIcon 헌책방IC 2009.05.17 12:59 수 정 댓 글

      어려워요...ㅜㅜ... 저 같은 컴맹은 단계별로 그림이 없으면 당췌 못알아 먹는다는... 그래도 6월 중순부터 본격적인 포스팅을 한다니, 기대하겠습니다.^^

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

        아주 쉽게 설명한다고 했는데;;그래도 부족한가 보네요ㅠ 앞으로 더 세세하게 설명하도록 하겠습니다.
        특히 이런 시스템이 관련된것은 일종의 기계나 마찬가지거든요.
        감만 찾으면 그 다음 부터는 금방하세요. 위의 소스를 그대로 안보고 쳐라 하면 저도 못칩니다.
        전문가 과정을 가실것이 아니면 간단하게 수정정도 하실수 있는 실력만 있으시면 됩니다.
        필요한 부분만 고쳐쓰는 정도? 원리와 흐름만 이해 하시면되요.
        저도 그렇게 공부했거든요. 대학에서 전공한것도 아니고,
        독학으로 인터넷 뒤져 가면서 했어요. 부족한것은 책을 사서보고요.
        최대한 풀어서 좀더 쉽게 이해력을 구하도록 하겠습니다.
        해보시고 안되시면 안되는 부분을 말씀해 주십시요.

      • Favicon of http://usedbooks.tistory.com BlogIcon 헌책방IC 2009.05.18 11:42 수 정

        아아... 부족하다는 의미는 아니었습니다. 제가 워낙 아는게 없다보니 그런거죠. 그래도 예스비님을 비롯한 여러 블로거님들 덕분에 하나하나 재미있게 익히고 있습니다. 그래서 앞으로를 더욱 기대하는거고요^^

    7. Favicon of http://www.jaea.net BlogIcon 재아 2009.05.17 14:02 수 정 댓 글

      굿 팁~~

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

        Goog Morning~!!
        기왕이면 영어로 써주시죠~ㅋㅋ
        좋은 아침입니다.
        오늘은 늦장을 부려 이제 컴터를 켰네요.
        댓글달고 시장갑니다~바이~

    8. Favicon of http://youarethat.tistory.com BlogIcon 이리니 2009.05.17 18:20 수 정 댓 글

      2Proo 저 양반이 아무래도 예스님께 흑심이 있는게 아닐까요? 뻔질나게 드나들었군요...^^

      하기사 너무 외로워 소시 사진을 포스팅할 정도니... 어쩌겠어요? 예스비님이 너그럽게 이해하시길... ㅋㅋ


      그리고 좋은 정보 잘 읽었구요, 방명록 자취 감사드려요.
      휴일 잘 보내시고, 새로운 한 주 멋지게 맞으시길... ^^

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

        음...그래요? 설마요~
        그럼 어떻게 할까요?저보다 이쁜 여자 블로거님들 많습니다. 낼모레 40인 여자가 뭐가 좋겠어요? ㅋㅋㅋㅋㅋㅋ
        음...그럼 이리니님도 그러신거죠? 한분만 보내면...안되니 공평하게...
        두분다~제 블로그에서 강퇴시킬까요? 아니면 두분다 결혼하고 오세요~!!이래야 되나요? ㅋㅋㅋ

    9. Favicon of http://jsapark.tistory.com BlogIcon 탐진강 2009.05.17 22:58 수 정 댓 글

      좋은 정보 감사합니다.
      저는 이런 스킬 내공을 가지신 분들이 부럽습니다.
      새로운 한주 잘 보내세요.^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.18 11:14 수 정

        스킬내공이라뇨~ㅋㅋ
        스킬내공은 온라인게임안에 가면 많죠~!!ㅋ
        제일 반가운 손님이십니다.
        탐진강님은 언제든지 환영이예욧~ㅋ
        아 아버지(김명곤님)도 대환영이죠~ㅋㅋ
        제가 아버지로 모시기로 했어요~^^&

    10. Favicon of http://lalawin.tistory.com BlogIcon 라라 윈 2009.05.18 04:31 수 정 댓 글

      이렇게 바꾸는 거였군요~ +_+
      저는 그냥 티스토리에서 제공되는 것에서 버튼만 눌렀었는데..
      소스 가르쳐 주셔서 감사합니다~~ ^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.18 11:14 수 정

        에잇~라라님 아시면서 일부러 칭찬해주신다~ㅋ
        암튼 감사해요.
        한주 또 활기차게~멋진 글 부탁해요^^

    11. Favicon of http://blog.naver.com/farandole00 BlogIcon 파랑돌 2009.05.18 10:03 수 정 댓 글

      ㅎㅎ..스킨 공사 하실려나 보네요..
      지금 것도 예쁜데요 ㅎㅎㅎ

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.18 11:19 수 정

        엊그제 글때문에 왠 XX가 저를 약올렸네요.
        남의 약점이 뭔지 정확히 아는 사람이더군요!
        저보고 못생겼다,머 이런식의 인신공격은 안통하죠~ㅋ
        단, 제가 자부하고 있는 저의 자존심을 건들더군요.
        이 스킨도,테마일주일,레이아웃3일,배경3일, 코드넣고 구동시키는데 2일 걸린 건데...
        아직 스킨작업은 하지 않고 준비했던 글 마무리해서 올린거에요.
        스킨은 다음달부터나 시작할까해요.
        아직 주제를 딱히 정한게 없어서, 머리에 띵~하고 떠오를때 바꿀듯해요~ㅋㅋ

    12. Favicon of http://dreamnet21.tistory.com BlogIcon 김명곤 2009.05.18 11:03 수 정 댓 글

      와, 저같은 컴맹은 하나도 모르겠네요.
      스킨의 세계...하나하나 배워 나갈께요.
      고마워요^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.18 11:23 수 정

        오홋~아버지ㅠ
        제가 먼저 찾아가야 되는데... 죄송해요;;
        바쁘다는 핑계로 게으름만 피네요;;
        모르시는 것 있으면 물어보세요.
        저도 고급자는 아니라 다 알 수는 없지만,
        고급자는 웹디경력이 5년이상은 되야지요~ㅋ
        대충적인 것은 아니~자세히 알려드릴께요.
        궁금한것 말씀해 주세요.바로 포스팅 해 드리겠습니다.

    13. Favicon of http://sangogi.com BlogIcon 상오기™ 2009.05.18 14:22 수 정 댓 글

      티스토리 스킨위자드에서 바꾸는거랑 어떤 차이가 있는 건가요?
      CSS만 보면 왠지 복잡해 보인다는...^^;;

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.18 14:27 수 정

        지금 설명하는것은 스킨위자드가 제공이 안되는 스킨을 말하는 거예요.
        스킨을 가져다 쓰긴 하는데, 몇가지 고쳐서 쓰고 싶은데 스킨위자드가 제공이 안되서 못고치는 분들을위해 이 코너를 만들었어요.
        또는,텍스트큐브스킨을가져다 쓰는경우는 스킨위자드가 없으니까요.
        이럴때,스킨배경을 고치거나, 본문크기를 바꾸거나 폰트를 고치거나 이런것들을 앞으로 다룰려고해요.

      • Favicon of http://sangogi.com BlogIcon 상오기™ 2009.05.18 15:02 수 정

        아~ 그런 경우가 있군요 ^^
        (스킨위저드로 배경 바꾸는것도 얼마전에 처음으로 해봄 ㅎㅎ)
        답변 감사 합니다 ^___^

    14. Favicon of http://funnycandies.com BlogIcon 소심한우주인 2009.05.21 10:33 수 정 댓 글

      스킨 바꾸는것은 맘은 있지만
      쉽게 엄두가 나질 않는...
      제겐 너무 먼~ 일이지요...^^

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.05.21 14:55 수 정

        엄두가 나지 않아도 차근차근 하나씩 해보세요.
        처음엔 실수도 하고, 도통 이해도 안되고...
        무슨 말인지 알 수가 없고....
        저도 그랬습니다^^
        헤메고 헤메다 보면, 길이 보입니다.

    15. Favicon of http://heajung.tistory.com BlogIcon rosiea 2009.07.18 20:14 수 정 댓 글

      스킨을 한번 바꿔보고 싶지만~ 너무 어려워요 ㅠㅠ
      그래도 차근차근 하나씩 해보려구요 ^^
      좋은 글 감사합니다 ! 잘보고가요 ~~

    16. Favicon of http://mtreet.tistory.com BlogIcon Min-2 2009.08.01 23:45 수 정 댓 글

      안녕하세요 예스비님..
      블로그에 입문한지 4일째되는 초보입니다.
      다름이아니라 스킨을 제작을햇는데 스킨 이미지 첨부해서 보니까는
      기존에 사용하고있떤..티스토리 스튜디오 이미지가 안없지네요..

      ㅠ_ㅠ..초보라서 설명을 제대로 못해드린거같ㄴ은데
      제 블로그한번와주시면은 감사하겠습니다. 티스토리 스튜디오 상단왼쪽에있습니다. ㅠ_ㅠ꾸벅.

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

        스튜디오란게 음...
        일단 제가 가서 블로그를 살펴보겠습니다.
        답변이 늦어서 죄송합니다.
        블로그를 주로 오전에하고, 오후 시간이후는 제 일을 해서 ㄷㄷㄷ;;

    17. Favicon of http://mtreet.tistory.com BlogIcon Min-2 2009.08.02 12:20 수 정 댓 글

      답변감사합니다.....진짜 열심히 붙잡고 해보려해도...
      진짜 안되게서요ㅠ_ㅠ...염치없지만...부탁좀 드릴게요 ㅎㅎㅎ
      html, css는 메일로 해서 보내드렸습니다.ㅠ_ㅠ....

      감사합니다 꾸벅.

    18. 이름은비밀! 2009.08.02 20:13 수 정 댓 글

      어려워보여요 티스토리 초대장 기브미!

    19. Secret ID 2009.08.04 13:30 수 정 댓 글

      에고 디자인쪽으론 절대 못갈거같은 느낌이군

    20. Favicon of http://cdmanii.com BlogIcon cdmanii 2009.09.01 12:54 수 정 댓 글

      잘 설명되어있어서 좋네요. 어느분은 스킨에 안올리고 절대경로로 쓰시는분들도 계시던데. 뭐 뜨는건 상관없겠지만, 속도에서는 조금 불이익을 볼 테니까요. 좋은팁 잘 봤습니다 ^^

    21. 변칙녀 2011.02.18 01:01 수 정 댓 글

      저는 이렇게 나오는데, 이때는 어떻게 입력해야하죠?

      background-image:/*@background-image*/ /*@*/;

    최근 댓글

    최근 트랙백

    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