New post
New Comment
Trackback
New Trackback
Link
Date2009/10/16 01:15

티스토리 스킨 만들기 (초보) - 8강. 사이드바 Ⅱ

이번 강에서는 지난 강에 이어서 상단 사이드바 그룹을 완성해 봅시다.

상단 사이드바 그룹에는 블로그이미지와 설명, RSS와 관리자화면 링크, 공지사항, 검색모듈, 카테고리, 태그모듈, 최근글, 최근댓글, 최근트랙백, 글 보관함, 링크, 달력모듈을 출력하고
하단 사이드바 그룹에는 카운터, 다음&티스토리 링크, 카피라이트를 출력하기로 했는데요,
지난 강에서 '블로그이미지와 설명' 모듈을 만들었습니다.

각각의 '더보기' 를 반드시 하나하나 차례대로 클릭해서 보세요.

1. RSS와 관리자화면 링크, 공지사항 - 더보기


2. 검색 - 더보기


3. 카테고리, 태그 - 더보기


4. 최근 글, 최근 댓글, 최근 트랙백, 글 보관함, 링크 - 더보기


5. 달력 - 더보기



지금껏 한 강의 중 이번 강이 가장 빡셌어요.
(대체할 수 있는 단어를 찾으려 했으나, '빡세다' 만큼 뜻이 정확히 들어맞는 표현은 없는 듯..ㅋㅋㅋ)

이번 강은 내용이 좀 기니까, 시간을 두고 여유롭게 연습하세요.
각각의 내용이 연계되어 있으니 원하는 부분만 골라보지 마시고,
최초 한 번은 꼭 차례대로 모두 따라하시길
권합니다.

마지막으로 오늘까지의 작업내역을 브라우저에서 확인한 모습입니다. (클릭해서 보세요)


다음 강에서는 하단 사이드바 그룹을 완성하고, 관리자모드에서 사이드바 설정하는 법을 알아보겠습니다.


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

  1. BlogIcon 용의자 Edit/DelReply
    웬일로 1등~~ㅋ
    it주제글에 떴길래 보러 왔습니다. ^_^)/
    굉장히 긴 연재글이 될 것만 같았는데
    벌써 사이드바 까지 끝내셨네요
    2009/10/16 01:25
    • 2009/10/16 16:51
      넵. 용의자님 보러 와주셔서 고마워요 ^^
  2. BlogIcon 지우개 Edit/DelReply
    드디어 꿈에 기다리던 8강이 올라왔네요~ ^^
    소중한 강의 감사합니다.

    저도 Grace*님 강좌를 보면서 만들고는 있는데... 영 소질이 없는가 봐요 ㅡㅜ
    2009/10/16 01:25
    • 2009/10/16 16:51
      무슨 말씀을..
      지우개님 멋진 스킨 만드시잖아요.
  3. BlogIcon yureka01 Edit/DelReply
    블로그 스킨 개념 익히기에는 이만한 강좌가 없을듯....나중에 책내셔도 되겟^^잘 보고 있습니다~
    2009/10/16 09:19
  4. BlogIcon 늑ㄷㅐ Edit/DelReply
    이번 강의 가장 빡셌어요 (X)

    이번 강의가 정말 어려웠어요 (O)


    지나가다가 포스팅 보고 틀린 우리말이 있길래 알려 드렸습니다^^;
    2009/10/16 09:32
    • 2009/10/16 16:53
      네..ㅋㅋㅋ 저도 맞춤법에 민감한데 부끄럽네요...ㅋㅋㅋㅋㅋ
      재미있게 써보려 한건데 다음부턴 조심하겠습니다.
  5. BlogIcon cdmanii Edit/DelReply
    빡세다는 군대에서 쓰던 단어인데 어찌 알고 계시네요 ? ㅋㅋ 정말 고생하셨어요. ^^
    2009/10/16 13:37
    • 2009/10/16 16:53
      아. 군대에서 써요?
      제 주변에서는 일상 용어로..ㅋㅋㅋ
  6. BlogIcon 수피아 Edit/DelReply
    안녕하세요. 티스토리에 입주한지 얼마 안된 초보자 입니다.

    그레이스님의 강의 잘 보고 있습니다.

    강의를 보던중 무려하게도 오타를 발견한 것 같아서요.^^;;

    6강의에서...

    topmenu레이어의 여백을 설정하고, 오른쪽으로 정렬되게 합니다.
    .topmenu {padding:45px 20px 0px 0px; text-align:right}
    'text-align:left'는 오른쪽, 'text-align:center'은 가운데 정렬이예요.

    이 부분에서요. 'text-align:left'는 오른쪽 <== 왼쪽으로 수정해야 하는거 맞죠.^^;

    그냥 강의 보다 오타가 보여서 말이죠. ㅎ

    암튼 강의 잘 보고 있어요. 알아듣기 쉽게 설명해주셔서 정말 감사합니다.
    2009/10/16 21:38
    • 2009/10/18 10:46
      감사합니다. 6강의 오타인데 8강의 코멘트에 남겨주셨네요. ㅎㅎ
      수정하겠습니다.
  7. BlogIcon MoreCreative Edit/DelReply
    사이드바가 올라왔네요! ㅎ
    이제 스킨도 익숙해 졌고.... 하지만 만드는건 어렵고...ㅎㅎ
    많은 연습이 필요하겠죠!

    좋은 강의 감사합니다~
    2009/10/17 02:01
  8. BlogIcon 흐르듯 Edit/DelReply
    어휴.. 정말 수고가 많으십니다,
    이건 나중에 다시 읽어봐야겠어요. 잘 보겠습니다:D
    2009/10/17 02:16
  9. BlogIcon popeye Edit/DelReply
    출췍^^ 오늘도 두 분의 강의실을 들락거리며 열쉼히 배우는 중입니다.
    학점 잘 부탁해요^^ ㅎㅎ
    2009/10/17 08:54
  10. BlogIcon 강짜 Edit/DelReply
    오늘 6강부터 8강까지 벼락치기 했습니다.
    8강이 제일 어렵네요. 몇번을 더 봐야 내 것이 될것같습니다.
    정말 '마법'의 CSS이군요. ㅎㅎ
    이거 만드는데 고생하셨을꺼 같아요. 감사합니다~
    + 다음 강의도 너무 기대됩니다. > _<
    2009/10/17 10:12
  11. BlogIcon 행복박스 Edit/DelReply
    어여 열심히 내공을 쌓아서 저만의 스킨을 만들어야될텐데..
    저는 항상 하나 제대로 되면 다른데서 오류가 나서 문제예요..ㅎㅎ
    2009/10/17 17:19
    • 2009/10/18 10:47
      그렇군요.. 성공하시길.. ^^
  12. BlogIcon popeye Edit/DelReply
    복습도 하러 왔어요^^ 일욜인데 Grace님은 뭘 하실까? ㅎㅎ 즐거운 시간 보내세요^^
    2009/10/18 11:18
  13. BlogIcon 함차가족 Edit/DelReply
    오랜만에 되돌아보게 되네요..첨 시작분들은 필독사항이네요
    2009/10/18 17:34
  14. BlogIcon 드자이너김군 Edit/DelReply
    음... 요즘 스킨이 너무 맘에 안들어서 하나 새로 계획중인데.. 김군에게 너무 밝은 빛과 같은 포스트를 올려주셔서 너무 감사합니다..으흐흐
    하나하나 차근히 완성해 가는중 이에요.ㅋㅋ
    2009/10/19 15:54
    • 2009/10/20 15:36
      와우~ 멋진 스킨 기대할게요.
  15. BlogIcon 종찬 Edit/DelReply
    에고, 계속 어디선가 모르게 오류가 나네요.;
    혹시 그 완성하신 파일 첨부해 주실 수 있나요????~
    2009/10/19 22:54
    • 2009/10/20 15:37
      오류가 나나요?
      이전 강의들부터 차근차근 모두 따라하신 것 맞나요?
  16. BlogIcon sla Edit/DelReply
    계속 좋은 강의 감사드립니다~ 중간에 빼먹어서...;;다시 복습해야겠네요^^
    2009/10/19 23:55
  17. BlogIcon 밤마루 Edit/DelReply
    티스토리 스킨 만들기 강의를 보면서 많은 배움을 얻었습니다.
    감사합니다ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
    2009/10/21 01:38
  18. 치타 Edit/DelReply
    스킨강좌 열심히 배우고있습니다 ㅎㅎ 9강은 언제나올까요~~
    2009/10/21 09:16
    치타
    • 2009/10/21 18:45
      글쎄요, 이번 주 안으로는 올릴 것 같습니다.
  19. 왕초보 Edit/DelReply
    완전컴맹인데 1강부터 따라하면 스킨만들수있을까요;;
    2009/10/21 12:01
    왕초보
    • 2009/10/21 18:45
      ㅎㅎ 한 번 도전해보세요.
  20. BlogIcon 유리 Edit/DelReply
    저도 컴맹인데... 하나 건드렸다가 완전 난리 날까봐 못건드리고 있다지요 ㅠ.ㅠ
    저런 태그 들만 봐도 머리가 아프고 멀미가 나는 이상한 증세가...ㅋㅋㅋ
    2009/10/27 08:10
    • 2009/10/27 12:59
      ㅎㅎ 기회 되면 한 번 도전해보세요.
  21. BlogIcon Vess Edit/DelReply
    강의 잘 보고있습니다.

    한 가지 질문이 있어서 댓글 남깁니다. 답변 부탁드려요 ..

    제가 크롬에서 코딩을 했는데, IE8에서 들어가보니 제대로 적용이 되어있지않더라구요.

    그래서 호환성에 대해서 이곳저곳 뒤적거려봤지만, 제대로된 해결책은 찾지 못했습니다.ㅠㅠ

    호환성을 간단하게 해결할 수 있는 방법 어디 없을까요?
    2009/10/27 22:45
    • 2009/10/28 18:36
      간단하게 해결할 수 있는 방법은 없습니다.
      모든 브라우저에서 완벽히 똑같이 보이게 하기는 어렵지만
      핵을 사용해서 거의 똑같이 보이게끔 할 수 있습니다.

      포털에서 'CSS 핵'이나 '크로스브라우징' 을 검색해보세요.
  22. BlogIcon 퐈비오 Edit/DelReply
    삼일전부터 그레이스님 강의보고 머리 쥐어싸멘사람인데요
    꿈속에서도 태그들이 날라다닌다능 덜덜덜
    ㅎ 하지만 좋은 강의 감사해요
    이거보고 블로그 공사하느라 정신이 없네요 ㅎ
    2009/10/28 00:09
  23. 킴메리 Edit/DelReply
    그레이스님 강의 넘 잘 보고 있어요^^
    매번 그냥 강의만 보고 가다가 강의 넘 잘 보고 있어서 이렇게 댓글을 다네요ㅎㅎ
    빨리 예쁜 스킨을 만들고 싶은 욕심때문인지 맘처럼 잘 안되서 좀 속상하기도 하네요ㅠㅁㅠ;;;
    다음강의 기달리고 있을께요` ㅎㅎㅎㅎ
    2009/11/01 00:48
    킴메리
  24. BlogIcon 씩씩한강냉이 Edit/DelReply
    와우, 알차고 참신한 강의
    HTML에 대해 잘 모르는 1인이라....거의 붙여넣고 있지만;ㅋㅋㅋ
    한번 해보고 싶어서요~
    근데 저는 왜 아래쪽에
    카테고리부터~~~ 달력까지..안나올까용?ㅠㅠ
    뭘 잘못했지;ㅋㅋㅋ
    2009/11/12 14:24
    • 2009/11/13 07:42
      9강에 첨부한 파일들 참고하세요. ^^
  25. BlogIcon 데니쓰C Edit/DelReply
    9강에 파일 올려 놓으셨는데 제가 한거랑 왜 다를까 찾다가 발견한거에요.
    위에 쓰신 것 중에 아래 부분에 "콤마"가 이중으로 찍힌 데가 3군데 있더라구요.


    #blogPost,#blogComment,#blogTrackback,,#blogArchive,#blogLink {padding:10px}
    #blogPost ul,#blogComment ul,#blogTrackback ul,,#blogArchive ul,#blogLink ul {padding:0px; margin:0px}
    #blogPost ul li,#blogComment ul li,#blogTrackback ul li,#blogArchive ul li,#blogLink ul li {list-style:none}
    #blogPost ul li a,#blogComment ul li a,#blogTrackback ul li a,,#blogArchive ul li a,#blogLink ul li a {font:8pt Gulim; color:#333333}
    #blogPost ul li span {font:7pt tahoma; color:#E1EBF9}
    #blogComment ul li span {font:8pt Dotum; color:#E1EBF9}
    #blogPost ul li a:hover,#blogComment ul li a:hover,#blogTrackback ul li a:hover,,#blogArchive ul li a:hover,#blogLink ul li a:hover {color:#E1EBF9}


    근데 이부분을 수정해도
    이부분의 색깔이 다른 건 못 찾겠어요.
    올려주신 파일도 마찬가지인데 그게 정상인건지.... 아님 Grace님과 제가 같은 실수를 하고 있는건지... 쩝.

    어쨌든 끝까지 고고씽~~ㅎ
    2009/12/03 19:28
    • 2009/12/03 21:24
      콤마를 두 번씩 적은 것은 실수이지만
      콤마 두 개씩 있다고 출력에 오류가 생기지는 않는 걸로 알고 있어요.

      이부분의 색깔이 다른 건 못 찾겠어요 << 라고 하셨는데
      이 부분이 어디며 색깔이 어떻게 다르다는 건지 모르겠어요.
      제가 올린 파일을 그대로 복사해서 테스트해보셨나요?

      혹시 익스6을 쓰시나요?
      익스6에서의 오류 수정은 나중 단계에서 할 예정입니다.
    • 2010/01/03 23:57
      다시 테스트해 보니 콤마를 두 번 적으면 스타일 적용이 안 되네요.
      글 수정했습니다.
      늦게나마 감사하고 죄송해요.
  26. 츠이사키 Edit/DelReply
    IE8기반의 브라우저를 사용중인데, 콤마 두번 적었다가 출력이 제대로 안돼서 당황했었습니다.
    아무래도 콤마 두번 적은거.. 이거 생각보다 큰 오류인것 같은데요..?
    2010/01/03 21:55
    츠이사키
    • 2010/01/03 23:56
      지금 콤마를 두 번 세 번 적으며 IE에서 테스트해보니
      정말 그렇네요. 제 불찰이었습니다.
  27. BlogIcon 희품 Edit/DelReply
    Search를 Serach로 써서 한참 헤맸네요. 오타가 났는데 왜 보이지가 않는지‥.
    2010/01/20 17:39
  28. BlogIcon THK Edit/DelReply
    하루만에 엄청난양의 일을 머리에 집어 넣으려하니 엄청 머리가 아프네요....
    또 다시 질문 하나하겠습니다..
    블로그 스킨 만들때.. 이 작업 하나하나 모두를 자기가 적어나가야 하는겁니까? ㅠㅠ
    2010/02/09 22:17
    • 2010/03/12 00:38
      문서 정의와 치환자는 복사해서 쓰고
      저 같은 경우엔 나머지는 직접 적어나가는 듯..
  29. Edit/DelReply
    비밀댓글 입니다
    2010/03/20 07:56
    • 2010/03/20 11:14
      티스토리에서 자동으로 생성된 댓글에 대한 책갈피 주소예요.
      addr을 클릭하면 그 주소가 복사되고
      그 주소를 어딘가에 링크시키거나 주소창에 직접 입력했을 때
      바로 댓글로 가게 되는거예요.

      책갈피가 뭔지는 포털에서 'html 책갈피' 라고 검색해보세요.
  30. BlogIcon JLIFE Edit/DelReply
    8강 처음엔 어려웠는데 레이아웃부터 다시 짜고 처음부터 다시 시작해보니 한번에 성공이네요.^^; 역시 연습만이 살길..
    2010/04/12 16:35
  31. 로킬 Edit/DelReply
    달력 때문에 물어물어 여기까지 왔네요... 티스토리에서 제공한 소스에서 오늘 날짜만 다른 색으로 지정해줬더니 글을 안쓰면 지정해준대로 보이는데 글을 쓰면 글쓴 링크 색깔이 덮어버리더라구요. 여기 나온대로 복사해서 바꿔도 안되고... ㅠㅠ 어휴.. 뭐가 문제일까요?
    2010/04/17 19:56
    로킬
  32. BlogIcon basketj Edit/DelReply
    많은 도움이 되네요
    만드니라 수고하셨네요 ㅎ

    보면 쉽고 금방만드는데
    실제 만들라고하면 이쁘지도 않고 떡칠이네요...
    디자인 잘 하는 사람 부럽워 ㅠㅠ
    2010/06/20 12:23
1 ... 16 17 18 19 20 21 22 23 24 ... 113