New post
New Comment
Trackback
New Trackback
Link
Date2009/09/07 17:03
, , ,

티스토리 스킨 만들기 (초보) - 1강. 스킨의 기본, 스킨 구상

포기하지 마시고, 조급해 하지 마시고 천천히 따라오시면 스킨을 직접 만들 수 있어요. ^^


스킨 디자이너들이 만드신 티스토리 스킨을 다운로드 받아보셨다면
압축파일 속에 preview.gif, skin.html, style.css, index.xml 네 개의 파일과 images 폴더가 들어있는 것을 보셨을거예요.

티스토리를 처음 접하셨다면
관리자페이지 - 스킨 - Html/Css 편집에 들어가면 skin.html과 style.css의 내용을 볼 수 있고
아래 빨간 동그라미 친 '파일업로드' 탭에서 images폴더 안의 이미지파일들을 확인할 수 있어요.





2강 부터는 이미지 없이 텍스트로만 이루어진 스킨 위자드를 사용하는 스킨을 만들어 볼겁니다.
그러므로 우리에게 필요한 것은 images폴더를 뺀
skin.html과 style.css, index.xml, preview.gif  이군요.



preview.gif 는 스킨 미리보기의 역할을 하는 이미지파일이예요.

관리자페이지 - 스킨 - 스킨 선택에 들어갔을 때 아래처럼 미리볼 수 있게 하는 파일이지요.
그러므로 배포용 스킨이 아닐 경우에는 반드시 필요한 건 아니예요.
스킨 제작의 마지막 단계에서 만들면 됩니다.




index.xml 은 스킨의 정보와 화면 출력을 결정하는 파일이예요.

스킨 이름과 버전, 저작권, 제작자 등의 스킨 정보와
사이드바의 글자 수, 한 페이지에 나타낼 글 수 등의 화면 출력을 결정하게 됩니다.
이 파일 역시 스킨 제작의 마지막 단계에서 만들면 됩니다.



그럼 첫 번 째 단계에서는 어떤 파일을 제작해야할까요?
바로 skin.html과 style.css입니다.


skin.html 는 스킨의 내용을, style.css 는 스킨의 스타일을 담당합니다.

무슨 얘긴지 잘 모르시겠다구요?
가령 3px의 파란색 테두리가 있는(px=pixel : 크기의 단위입니다.) 네모난 상자 안에 최근 게시글을 표현하고자 할 경우,
skin.html 에는 '상자 안의 최근게시글' 을 입력하고
style.css 에서 '3px 의 파란색 네모난 테두리' 를 결정합니다.

그러니까 style.css에서 어떤 값을 설정해주느냐에 따라, 1px의 빨간 점선 테두리가 있는 상자, 테두리가 없는 노란 배경의 상자가 될 수 있는 거예요.



자. 스킨을 만드는 첫 번째 단계는 '구상하기' 입니다.

아래와 같이 가장 많이 쓰이는 2단 스킨을 구상했습니다.



이미지가 전혀 없고 깔끔하게 텍스트만 들어간 스킨을 만들어 보려 합니다.
스킨 위자드로도 블로거의 입맛에 맞는 수정이 상당부분 가능합니다.

스킨 위자드가 무엇인지 모르시는 분은
관리자화면 - 스킨 - 스킨 선택에서 티스토리 제공스킨 중 하나를 적용하신 다음
아래 빨간 동그라미 친 '스킨 위자드' 를 클릭하셔서 이것 저것 테스트해 보세요. ^^


제목 글씨체와 본문 글씨체, 전체 배경과 타이틀 배경, 타이틀 글씨체 등을 스킨위자드에서 설정할 수 있지요.
직접 찍은 사진이나 직접 그린 그림으로 전체 배경이나 타이틀 배경을 설정하시면 좋겠지요. ^^
그러나 아이디어가 없어도 좋습니다. 스킨을 만들다 보면 아이디어가 떠오르실거예요.

[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 2강. Html,CSS 란?
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 3강. Html,CSS의 실습
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 4강. skin.html의 구조
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 5강. 레이아웃
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 6강. 블로그타이틀,메뉴
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 7강. 사이드바 Ⅰ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 8강. 사이드바 Ⅱ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 9강. 사이드바 Ⅲ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 10강. 미디어로그, 지역로그, 태그로그
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 11강. 방명록
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 12강. 검색결과, 페이지 표시
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 13강. 포스트 내용
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 14강. 트랙백과 댓글

 중급자를 위한 티스토리 스킨 수정 팁 보러가기
TRACKBACK 2   COMMENT 65

  1. BlogIcon Grace* Edit/DelReply
    다음뷰 시범적으로 달아봤어요. 좋은 강의 할 수 있도록 추천 부탁해요. ^^
    2009/09/07 17:24
  2. BlogIcon 투척 Edit/DelReply
    흠 ㅋㅋ 기대되네요 ㅎㅎ 앞으로 좋은강의 기다리겠습니다 ㅎㅎ
    2009/09/07 17:57
  3. BlogIcon 몸부림 Edit/DelReply
    오 다음뷰 가입하셨네요^^
    어떻게 저렇게 작게 만들어놓으셨지? 그보다 스킨 강의 좋네요~~
    나모 독학할때가 생각나네요. 이것저것 막 정신없이 했는데 결과는 별루였던ㅎㅎ
    앞으로 강의 기대할게요^^
    2009/09/07 20:11
    • 2009/09/08 00:19
      넹 그런데
      시험삼아 버튼을 눌러봤는데 반응이 없어요.
      다른 분의 블로그에서 뷰 버튼을 눌러도 항상 그래요...
      저만 그런건가요?
    • 2009/09/08 00:54
      그럴리가요. 가입하시고, 티스토리 로그인뒤 뷰 누르면 올라가요. 뷰 자동로그인이 안되는건가?^^
      자기껏도 한번씩은 올릴수 있죠^^
  4. BlogIcon 지우개 Edit/DelReply
    드디어 강좌를 시작하셨군요^^
    2009/09/07 22:39
  5. BlogIcon 달고나 Edit/DelReply
    우와 바로 시작하셨네요^^

    기대해봅니다..ㅎㅎ 화이팅!!
    2009/09/08 00:08
  6. BlogIcon 전략가 Edit/DelReply
    와우~ 진쫘~ 멋지세요~! ^^
    2009/09/08 03:34
  7. BlogIcon 강짜 Edit/DelReply
    안녕하세요.
    강의하기로 결정하셨나봅니다~ 유용한 정보 감사히 보고갑니다.
    다음 강의도 기대할께요 ^^
    2009/09/08 04:03
    • 2009/09/08 15:30
      관심 가져주셔서 감사합니다. ^^
  8. BlogIcon cdmanii Edit/DelReply
    우왕 시작 되었군요. 아직까지는 아는내용이라 뒤에 이어질 강좌들이 기대되네요 으흣

    세세한 강좌 기대합니다 ! ^^
    2009/09/08 10:17
    • 2009/09/08 15:31
      네. 그렇지만 너무 기대하지는 마세여 ㅋㅋ
  9. BlogIcon JiNi Edit/DelReply
    이참에 미루어두었던 스타일시트를 함 배워볼까 합니다.
    열강해 주세요^^*
    2009/09/08 10:48
    • 2009/09/08 15:31
      스타일시트 재미있어요! ^^*
  10. BlogIcon j편지 Edit/DelReply
    오~ 필요했던게 바로 이런 강의^^ rss 갑니다
    2009/09/08 11:05
  11. BlogIcon 이름이동기 Edit/DelReply
    ^^ 오홍 ~ 뒤의 이야기가 저도 궁금해집니다 ~! ㅎㅎ
    아 ! 처음 뵙겠습니다 ^^ ㅎㅎㅎㅎㅎ
    2009/09/08 11:12
    • 2009/09/08 15:32
      옆에 아이콘이 흥미롭네요. 감사합니다.^^
  12. BlogIcon 하루’ Edit/DelReply
    Wow~~!
    너무 좋네요!
    다음,2강이 기다려집니다 ^^
    한Rss 등록하고 가요~3
    2009/09/08 13:09
    • 2009/09/08 15:32
      넹 2강은 오늘이나 내일 중으로 올리겠습니다 ^^
  13. BlogIcon 아리스ちゃん Edit/DelReply
    와 드디어 강의! 정말 기대됩니다 '-' 흐흣

    추천하고 갈려고 다음뷰 눌렀더니 카운팅이 안되네요ㄷㄷ
    다른 분 포스팅의 다음뷰를 눌러봐도 카운팅이 그대로 -_-
    제 쪽의 문제인지 다음쪽의 문제인지; 허허
    담번에 오면 추천하고 갈께요 '-' 호홋 강의 감사드려요~
    2009/09/08 17:36
    • 2009/09/08 17:41
      네. 저두 그렇더라구요. 다른 분의 다음뷰를 눌러도.. 가끔씩만 카운팅이 돼요.
  14. BlogIcon sla Edit/DelReply
    뭔가 처음부터 차근차근해서 부담이 안되고 기대됩니다~^^ 화이팅 감사드립니다.
    2009/09/08 23:57
  15. Pacer Edit/DelReply
    와...이런 성스러운 장소가 있을 줄이야.....;;
    항상 스킨같은게 입맛에 안맞아서 고민했는데...

    파이팅이에요!

    아, 안녕하세요;(뭔가 순서가;;)
    2009/09/09 08:46
    Pacer
    • 2009/09/09 12:20
      안녕하세요 ㅋㅋㅋㅋ
      감사합니당 ^^
  16. BlogIcon gk Edit/DelReply
    강좌 꼬박꼬박 챙겨보겠습니다.>< 꺅 기대..ㅎㅎ
    2009/09/09 13:05
  17. BlogIcon 죠스, 세상에 나오다 Edit/DelReply
    우와, 블로그 너무 이뻐요~ ^^; 자주 들러서 강좌 읽고 가겠습니다.
    좋은 강좌 많이많이 올려주세요~ ^^
    2009/09/16 17:35
    • 2009/09/17 10:12
      네, 감사합니다. ^^
      옆에 검은 두 줄 아이콘이 역동적인 것이, 신기해요 +_+
  18. 색깔채집가 Edit/DelReply
    우왕.. 답글 쓰는 것도 너무 이쁘네요 ^^
    2009/09/19 22:56
    색깔채집가
  19. 아시메니 Edit/DelReply
    블로그가 참 아기자기 하네요 !!
    블로그 만들려고 하다가 또 포기했더랍니다 -_ㅜ
    레이아웃 짜는게 은근히 힘들더군요 ;ㅁ;
    아직까진 아는 이야기라.. 다음 강의가 기대 됩니다 !! >_<// 여기 즐찾 해놔야겠어요 ㅎㅎ
    2009/09/24 09:54
    아시메니
    • 2009/09/24 10:49
      4강까지 나왔어요. ^^;
      자주 놀러오세요.
  20. BlogIcon A1++ Edit/DelReply
    안녕하세요.
    글 잘 읽고갑니다.
    다른이들의 스킨 받아서 수정해 쓰는것도 지겨워 지던 참이였는데
    혼자 스킨을 만들 수 있다는 자신감이 조금씩 보이네요.
    섣부른 자신감일까요? 아니길!
    좋은 글 기대합니다~
    2009/09/25 18:55
    • 2009/09/26 20:42
      화이팅 ^^
      꼭 성공하시길.
  21. Edit/DelReply
    비밀댓글 입니다
    2009/09/26 18:46
    • 2009/09/26 20:43
      잘 모르겠네요.
      티스토리 고객센터에 여쭤보심이..
  22. BlogIcon 백호 Edit/DelReply
    안녕하세요 블로그를 처음만들봐서 방법좀 배울려고 검색 사이트를 찾다가 이곳까지 오게됐네요^^;;
    설명을 너무 잘해놓으셔서요...스크랩해갑니다.
    원치 않으시면 삭제할께요...;;
    자주와서 많이 배워가겠습니다~^^
    2009/11/06 18:50
    • 2009/11/07 05:41
      네. 삭제해주세요.
      url만 링크하시는 건 괜찮습니다.
  23. Edit/DelReply
    비밀댓글 입니다
    2009/11/28 22:03
  24. BlogIcon 연습장 Edit/DelReply
    오늘부터 여기서 하나하나 공부하고자 합니다. ^^
    링크 추가시켜놓고 매일 매일 드릴께요...
    궁금한 점 있으면 여쭤봐도 되나요? ^^;;;;
    2009/12/16 14:17
    • 2009/12/16 20:35
      넹. 제가 만든 스킨이나 제가 올린 강의에 관한 내용이면 댓글에 질문 하시면 됩니당.
  25. BlogIcon 버블타운 Edit/DelReply
    안녕하세요
    이제 처음시작 하는데요
    너무 모르는게 많아서 어디서 부터 해야 할지?
    처음가입하면 티스토리 블로그를 여러개 만들수 있는거죠?
    전 모르고 가입당시 레이아웃이 마음에 안들어 고치는 방법을 몰라서 로그인하고 다시 다른 이름으로 블로그를 만들었어요
    필요없는 불로그를 지울려면 데이터관리에 이 블로그 폐쇄하면 선택한 블로그만 삭제 되는거죠?
    제가 등록한 모든 티스토리가 삭제되는건 아니죠?
    2010/01/14 15:23
  26. 민수 Edit/DelReply
    와우~여기가 정말 제가 찾던 곳이네요? 전문가를 만나서 기쁩니다~

    질문 하나 할게요~블로그화면에 님블로그처럼 분홍바탕과 흰색 바탕구분없이 뻥뚫린 옷입지않는 상태를 만들려면 어떻게 해야하나요? 가령 바탕을 몽땅 회색으로 바꾸고 싶은데....

    알려주시면 감사해요^^
    2010/01/15 10:17
    민수
    •  민수 Edit/Del
      2010/01/15 10:18
      그러니까 분홍바탕과 흰바탕으로 나눈것이 아닌 그냥 통째로 흰바탕으로 할려면 어찌해야하나요?;;;;
    • 2010/01/15 12:07
      body에 흰색으로 배경을 주고 나머지 레이어의 background 속성은 없애세요.
  27. 민수 Edit/DelReply
    아~그러니까 스킨 편집가서 스타일시트안에 바디를 찾아서 백그라운드 속성을 지우면 되는건가요?

    ㅎㅎ 1강부터 천천히 배우고는 있지만 지금 스킨배경함 없애보고싶어서 문의해요..
    2010/01/15 14:33
    민수
    • 2010/01/22 17:02
      네. 그렇게 하면 됩니다.
  28. 유럽남자 Edit/DelReply
    티스토리 시작해서 스킨 만드는 법 검색하다가 그레이스님 강좌를 만났네요.
    티스토리 스킨 만드는 법으로 책 쓰셔도 대박나실 것 같아요.
    2010/02/11 13:36
    유럽남자
    • 2010/03/12 00:30
      오오오 +_+ 감사합니다.
      하지만 그 정도는 안 돼요..ㅋㅋㅋ 그러려면 저도 공부를 더 해야 하겠죠? ㄷㄷㄷㄷㄷ
  29. 호라호라 Edit/DelReply
    직접스킨을 만들려고 검색해봤는데. 여기가 나왔내요 한번 도전해볼게요
    일단 즐겨찾기합니다
    2010/02/24 03:33
    호라호라
  30. BlogIcon Antz Edit/DelReply
    잘 보고 있습니다 . 좋은 정보 감사해요 ~ ^ ^
    2010/02/26 17:10
  31. BlogIcon WalCa Edit/DelReply
    잘보겠습니다. 도움되는 포스팅들입니다~ 힘내세요^^*
    2010/03/16 18:48
  32. BlogIcon Holmes Edit/DelReply
    오옥 스킨 대박이네요..
    이거보다 이쁜거 본적이 없는 듯.
    스킨 꾸미는건 천천히 읽어보면서 배우겠습니다
    2010/03/28 09:24
  33. BlogIcon JLIFE Edit/DelReply
    만들어진 스킨을 이용하다가 아무래도 저만의 스킨이 필요하는 생각이 들어 스킨 제작에 도전하려고 합니다! 많은 도움 되겠지요?
    2010/04/10 17:13
  34. BlogIcon 포푸리향 Edit/DelReply
    정말 감사합니다. 찾던 자료네요!! 짱입니다
    2010/04/16 15:58
1 ... 27 28 29 30 31 32 33 34 35 ... 113