티스토리 블로그 스킨 분석해보자 - 처음편

* 개요

티스토리 스킨에 대해서 분석해보면서 자신의 블로그도 스킨을 수정할 수 있는 기술을 배워보도록 하겠습니다.
그 첫번째 시간으로 스킨을 수정할때 주의해야할 점과, 관리 , 수정하는 방법들을 설명합니다.

[잘못 쓰여진 글이 있거나 기술적으로 문제가 있는부분은 테클을 걸어주시면 감사하겠습니다. 수정을 받아들여 수정하겠습니다]


* 파일설명

티스토리 스킨은 테터툴즈에서 따온것이기 때문에 일정한 규격에 맞추어서 만들어져 있습니다.

skin.html - 뼈 골조가 되는 스킨파일
style.css - 살을 붙여주는 부분



* 스킨수정시 주의할 사항

티스토리 스킨 관리를 보면 Skin.html 과 Sytle.css 를 수정할 수 있습니다.
(티스토리 > 관리자 > 스킨 > HTML/CSS 편집)



보통의 경우 이 편집창을 뛰어놓고 여기에서 직접 내용을 추가하거나 빼거나 할겁니다. 하지만 그 방법보다는
전문 편집툴을 사용하는게 좋습니다.

# 전문편집툴을 이용할때의 장점

1. 코드를 정갈하게 잘 관리할 수 있다.
2. 따로 문서화해 둘 수 있다.
3. 추가 및 삭제를 했을때 정리가 되기때문에 다음에 다시 보더라도 쉽게 내용을 찾을 수 있다.


# 전문 편집툴을  이용한 수정 방법

1. skin.html 또는 style.css 내용을 모두 복사한다.




2. editplus 등의 전문 편집툴에 붙여넣기 후 편집을 한다.





3. 편집을 한뒤 수정된 내용을 복사를 한다.





4. 수정된 내용을 HTML/CSS 편집의 해당파일에 기존의 내용을 지우고 붙여넣기 한 뒤 저장한다.




* 스킨 수정시 지켜주어야 할 사항 (권장)
1. 그림을 뛰우는 부분은 style.css 에서 지정한다.
2. 태그입력시 대문자를 쓰지 않는다.
3. skin.html 에 따로 style 를 지정하지 않는다.
4. 치환자를 활용하자.
5. IE(Internet Explorer) 이외에 FF, Crom , Opera 등 에서도 작동을 하도록 가능한 javascript 는 피하자.
6. 주석을 잘 활용하자. 형식: <!-- 주석으로 쓰일 글 --> (뛰어쓰기 유의)
7. 들여쓰기를 꼭 하자.
8. XHTML 형식을 지켜서 태그를 열면 꼭 닫는다. 예: <strong></strong>, <img src="./image/test.png" border="0" alt="그림" />


#
티스토리 블로그 스킨 분석해보자 - 스킨수정 편에서는 실제 1개의 스킨을 설정하여 내용을 살펴보면서
설명드리도록 하겠습니다. (글작성중)

이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

s;s s;s

     이미지 업로드

  1. 이전 댓글 더보기
  2. 2009.04.23 00:14

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.04.23 09:40 신고

      애드스마트는 .. 음.. 저는 조회수가 아주 많은편은 아니여서 하루에 100원정도 나오더라구요.. 조회수가 많이 나오기 전에는 내려버릴까 생각도 하는중이예요 이참에 잠깐 내려놔야겠다는 .

      perm. |  mod/del. | 
  3. 2009.04.23 10:01

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  4. Bong G. 2009.04.24 17:57 신고

    많이 배우고 갑니다~~~^^*

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.04.26 23:19 신고

      앞으로 글을 더 연재해서 쓸 계획입니다 지금 열심히 적는중이긴 한데 .. 좀 시간이 걸리네요 ;

      perm. |  mod/del. | 
  5. 데니즈T 2009.04.24 20:28 신고

    오홋.. 스킨에 관련된 연재 글인가요?
    저는 연재글 작성해야할 주제가 3가지 인데 소재가 다 떨어졌죠. 쿠긍...
    기대됩니다~~

    perm. |  mod/del. |  reply.
  6. 라라윈 2009.04.25 02:44 신고

    잘 몰라서 조심조심 미리보기 해가면서 간신히 하나씩 수정하고 있는데...
    저렇게 전문 편집툴도 있군요~ +_+
    항상 cdmanii님께 많이 배우고 갑니다~ ^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.04.26 23:20 신고

      꼭 저런방법으로 수정하는게 좋아요. 저렇게 해야 스킨내에 들여쓰기등이 정리가 되어서 다음에 열어보아도 더 쉽게 수정이 가능하거든요

      perm. |  mod/del. | 
  7. 2009.04.25 21:28

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.04.26 23:22 신고

      설정은 크게 어렵진 않아요. 사실 광고설정중에 제일 잘 되어있는것중 하나인듯해요 광고설정에서 1단계부터 차례대로 정리한뒤 컨텐츠링크랑 에디터링크를 복사해서
      각각 뛰워주고 싶은부분에 넣어주면 되거든요.

      코드 넣으실때 위에 글 보셨죠? editplus 등의 편집툴에 복사한뒤 코드 수정하고 다시 skin.html 에 넣는 방식으로 수정하시는게 좋아요.

      perm. |  mod/del. | 
  8. Joa. 2009.04.26 00:53 신고

    블로그 스킨 바뀌면서 전에 cdmanii님 블로그에서 본 더블클릭 방법 적용하려고 다시 들렀어요
    블로그 스킨 한 번 바꾸려면 이것저것 좀 고민해얄 게 많은데-
    좋은 글을 마침 써주시는군요! +_+
    기대되요~ ㅎㅎ
    참, 제 블로그 링크에 cdmanii님 블로그주소도 포함시켜도 되겠죠?
    이번에 블로그 다시 찾으려고 댓글알리미를 다 뒤졌다는 ㅋㅋ

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.04.26 23:22 신고

      링크추가해주시면 저는 너무 감사하죠 ^^ 더블클릭 참 편하죠 ㅋ

      perm. |  mod/del. | 
  9. 2009.04.27 09:08

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.04.27 09:41 신고

      조회수가 많은것에 유리한 광고이고 그래서 내린것도 있지만 본문의 상단에 뜨기때문에요. 이부분도 조금은 맘에 안들어서 내렸네요. 다음ad 라고 뜨는 작은 플래쉬창 광고는 신청한 사람에 한해서 따로 또 선별해서만 광고 주는걸로 알고있구요 지금은 신청기간이 아닌걸로 알고있어요. 그것도 마찬가지로 조회수가 엄청 많아야 유리하구요. 광고를 달더라도 기여도(조회수) 가 적으면.. 수익은 작은걸로 알고있어요.

      perm. |  mod/del. | 
  10. 2009.04.27 11:22

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  11. 예또보 2009.04.29 18:00 신고

    스킨 한번 잘못 수정했다가 고생했습니다
    물어볼때도 없구 해서 지식검색했는데 몇군데 없구 내용도 별로 여서 겨우 수정했던기억이 나네요
    유용한 포스팅 앞으로도 많이 부탁드립니다 ^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.04.30 20:00 신고

      지금 글쓰는중인데요 이상하게 다른일하고 겹쳐서 빨리 못하고 있네요 얼른 쓰겠습니다 ㅋ

      perm. |  mod/del. | 
  12. kimatg 2009.05.01 19:44

    스킨작업할때 파이어버그는 필수!!
    아흑 이런 좋은 플러그인이 있다는걸 왜 이렇게 늦게 알았는지... 너무 편한.. :)

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.05.01 23:28 신고

      kimatg님이 스킨너무 멋져요. 좀 배워야하는데 ㅋ
      파이어버그 저도 최고인것같아요. 파폭을 자꾸 쓰게 되니 파폭관련된 부가기능 좋은거 발견하면 "아싸" 소리가 절로 나오더군요.

      perm. |  mod/del. | 
  13. Yasu 2009.05.06 23:15 신고

    전 스킨 변경하면서 많은걸 배웠어요..ㅎㅎ
    멋진 스킨강좌 부탁드려요~

    perm. |  mod/del. |  reply.
  14. 나무닭 2009.07.26 11:38

    안녕하세요...
    티스토리스킨에 대해서 알아보려고 글을 읽어보고 있었습니다.
    알기쉽게 설명해주셔서 좋았습니다.

    아...그리고 본문중에.."띄워쓰기" 라고 하신 부분이 있는데요..."띄어쓰기" 가 올바른 맞춤법입니다.
    좋은 글을 써주셔서 저처럼 포스팅하시고 난 뒤에 한참 후에도 글을 읽는 경우가 있으니까요..
    이왕이면 맞춤법도 주의해서 쓰시면 좋을 것 같아서요..

    그럼 ... 좋은 글 계속 써주세요~~

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.07.26 11:48 신고

      아 그렇군요 바로 수정하겠습니다. 지적 감사합니다 ^^ 즐거운 휴일 되세요 !!!!~

      perm. |  mod/del. | 
  15. 현석 2009.07.29 06:01

    첫 말머리 부분에

    잘못 씌여진.. ->> 잘못 쓰여진 으로 맞춤법 수정해야합니다. ㅎㅎ

    좋네요 설명이 쉽게 되있어서 자주오겠습니다. ㅋ

    perm. |  mod/del. |  reply.
  16. 느시느시 2009.08.28 12:05 신고

    감사합니다'ㅅ'

    perm. |  mod/del. |  reply.
  17. 깊은호수 2009.09.07 12:03

    저는 컴 초보 압니다. 님의 글을 자주 보는데 정말 유용하게 보고 있습니다 많은 도움이 됩니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.09.08 14:18 신고

      이제서야 댓글을 봤네요 죄송해요. 앞으로 자주 들러주시구요 ^^ 저도 자주 들리겠습니다. 앞으로도 도움될만한글 계속 적어보겠습니다

      perm. |  mod/del. | 
  18. 팝플 2009.09.08 20:55 신고

    감사합니다.
    다음호를 기대합니다.

    perm. |  mod/del. |  reply.
  19. 모노마토 2009.09.28 13:19

    저도 요즘 스킨 공부 하면서 수정하고 있는데 앞으로 많은 참고를 하겠습니다~~

    perm. |  mod/del. |  reply.
  20. 조우진 2010.06.12 23:54

    이제 막 블로그를 한번 도전해 보려고 시작했는데 너문 큰 도움이 될 것 같아요
    학생 이라 시험기간 끝나고 차분히 여기서 열공하겠습니다^^

    perm. |  mod/del. |  reply.
  21. manchunha 2011.12.13 00:42

    아무리봐도 모르곘어요 ㅠㅠ
    어떻에하는건가요?
    이걸로 스킨하는건가요?

    perm. |  mod/del. |  reply.