티스토리 스킨 배우기 id, class 는 왜 있는가



티스토리 스킨 수정을 해보려면 몇가지 딱 알아야할게 있습니다. 이부분만 알면, 구조랑 스타일이 보이기 시작하죠. id, class 입니다. CSS 에서 지정할때는 # . 으로 사용합니다. id 는 주민등록번호와 같아서 한번만 사용이 가능합니다. class 는 여러번 반복해서 사용이 가능하죠.

스킨 열여 보시면 먼가 많이 복잡하죠? 하지만, 몇가지만 알고나면 보이기 시작합니다.




CSS 내용을 한번 살펴보죠. 뭔가 복잡하게 많지만 앞부분부터 보면 # 으로 시작하는게 있고 . (점) 으로 시작하는게 있고 합니다. # 은 id 를 지정한 부분이며, . (점) 은 class 를 지정한 부분이죠. 천천히 뜯어보면 쉽죠. 이 글에서는 id 와 class 의 개념을 잡는것부터 시작합니다. 자세한 설명 모두 하고 싶지만 그부분은 다음으로 미루겠습니다.




Pino 를 피하고 재생하시려면 여기를 눌러주세요 : http://cdmanii.tistory.com/1388

동영상으로 하고 싶은 이야기를 모두 정리해보았습니다. id , class 의 쓰임새 이유를 알게되면, 그다음부터는 설명이 간단해집니다. 다음시간에는 속성값을 지정하고 쓰는것과 실제 스킨을 수정해보는 부분에 대해서 설명해보겠습니다.

웹에 동영상을 올리니 아무래도 화질이 떨어지네요. 원본 영상으로 보고 싶은 분은 아래에 파일을 다운로드 후 압축을 해제하고 재생하시기 바랍니다. (곰플레이어나 KMP 등으로 재생하시기 바랍니다.)


원본 다운로드



스킨공부에 도움이 될 책들




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

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

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

댓글 입력 폼

:)   :(   --;   :D   :O   :x   r:r   g;g   i;t   s;s

     이미지 업로드  [무료이미지 업로드 방법 설명]

  1. 이전 댓글 더보기
  2. 만두의전설 2010.04.02 01:45 신고

    개발자에게 html코딩을 가능하게 해 준 일등공신이죠!
    이제와서 css 없이 만들라고 하면 한강 다리를 찾고 싶을 것 같네요.^^

    perm. |  mod/del. |  reply.
  3. 2proo 2010.04.02 01:49 신고

    러브드웹님과 씨디맨님의 스킨을 함 뜯어보고 싶은데.. 방법이 없군요 ㅎㅎ
    언젠간 스킨 보고 좋은건 저도 써보고 말꺼에요!!! ㅎㅎㅎ
    멋진 강의 감사합니다~~

    perm. |  mod/del. |  reply.
  4. 좋은사람들 2010.04.02 13:10 신고

    정말 꼼꼼하게 집어 주셨군요~~

    저도 티스토리 첫화면 리뷰하면서 동영상 찍었는데; 시디맨님처럼 디테일하게 못하겠더라구요;ㅋ

    perm. |  mod/del. |  reply.
  5. 젤리빈 2010.04.03 19:58 신고

    제게 필요한 영상이네요. 올려주신거 열심히 보고 제 스킨도 뜯어봐야겠어요 ㅠㅠ
    폭조절이랑 이것저것 좀 더 수정해보고싶은데 주먹구구식으로 찾아봐서인지 안되더라구요!
    어찌나 속상하던지 ㅠㅠㅠㅠ

    perm. |  mod/del. |  reply.
  6. 쿠쿠양 2010.04.05 16:53 신고

    그림이 암호같아서 한참 보고있었어요..ㅎㅎㅎ
    스킨수정할때 넘 복잡하긴 해요 ㅠ..ㅠ
    시간내서 공부해봐야겠어요

    perm. |  mod/del. |  reply.
  7. dorudoru 2010.04.16 19:49 신고

    좋은글 잘 보고 갑니다.
    행복한 주말 되세요

    perm. |  mod/del. |  reply.
  8. Mikuru 2010.08.26 07:49 신고

    할려고 해도 어려운게 이것이더군요.

    perm. |  mod/del. |  reply.
  9. DDing 2010.08.26 07:53 신고

    이번에 스킨 변경과 관련해서 너무 고생을 해서 바로 다운받고 있습니다. ^^
    잘 배우겠습니다~ ㅎㅎ

    perm. |  mod/del. |  reply.
  10. 티비의 세상구경 2010.08.26 08:13 신고

    다음번에 자세한 설명도 부탁드려요~!
    잘 배우고 갑니다. ^^

    perm. |  mod/del. |  reply.
  11. 모피우스 2010.08.26 08:19 신고

    좋은 정보 잘 보고 갑니다. 기분 좋은 하루되세요,

    perm. |  mod/del. |  reply.
  12. 돌이아빠 2010.08.26 08:55 신고

    아!!! 그런거군요!
    근데 이게 실전에서 써먹긴 쉽지 않더라구요 흐...

    perm. |  mod/del. |  reply.
  13. 저녁노을 2010.08.26 09:52 신고

    잘 보고 갑니다.
    즐거운 하루 되세요

    perm. |  mod/del. |  reply.
  14. 초록누리 2010.08.26 09:55 신고

    좋은 자료 감사하게 잘 읽었습니다.
    말도 안되는 댓글도 환영한다는 말씀에 댓글을 달지 않을 수 없네요^^ㅎㅎ

    perm. |  mod/del. |  reply.
  15. minilog 2010.08.26 12:13 신고

    안녕하세요 저는 블로그 초짜라
    씨디맨님의 글들을 보면서 이것 저것 따라하고 있어요^^
    좋은 글들을 올려주셔서 너무 감사드립니다.

    perm. |  mod/del. |  reply.
  16. 새라새 2010.08.26 13:36 신고

    오랜만에 와서 뭔가 하나 낼름 얻어가는 것 같아 죄송하네요 ㅋ

    perm. |  mod/del. |  reply.
  17. 세이지클라서 2010.08.26 19:03 신고

    CSS가 없다면 엄청 단순한 블로그가 될뻔했어요 ㅋㅋ CSS가 있으니 이렇게 화려한 블로그도 가능하고...

    perm. |  mod/del. |  reply.
  18. 닉쑤 2010.08.26 21:47 신고

    드디어 올 것이 왔군..(스타2버젼)

    맨날 코드를 이해할 생각은 안하고 요리조리 끼워 맞추던 제에게
    드디어 가르침을 주시는군요. 아...

    이제 별 수 없이 배워야겠습니다. 아... 배우기 싫지만.. 게을러서. ㅋ
    낚시하는법 알려주셔서 감사합니다. 다음편 기대할게요! ^^

    perm. |  mod/del. |  reply.
  19. 노펫 2010.12.26 21:16 신고

    참 명쾌합니다.

    가이드라인을 잡는데 많은 도움이 되는 강의입니다.

    잘 봤습니다. (_._)

    에디트 플러스로 간단하게 "수정값 찾기" 요런거는 어떨까요?

    사실 모르면 어디에 가서 어떤값을 바꿀지 상당히 헤메거든요..

    간단하게 컬러 폰트 마진 패딩 요것만 찾아서 바꾸는게 가능해도 많은 도움이 되거든요.

    자칫 이거 스킨에 빠지는거 아닌가 모르겠습니다.

    알수록 더 예쁘게 하고 더 가꾸고 싶고 그러네여~~

    perm. |  mod/del. |  reply.
  20. Generic Propecia 2011.06.01 14:02 신고

    やあ、素晴らしい仕事をしている。多くの人々が今の詳細についてのアドバイスをおconsejos.esperaのための十分な情報源を見つけるために行くことの検索ではありますか

    perm. |  mod/del. |  reply.
  21. Zenegra 2011.12.02 21:13 신고

    Great loved it, will be waiting for your future posts Thank you for sharing.
    r:rg;gi;t:(:)

    perm. |  mod/del. |  reply.