Category
Date
2009/10/16 01:15
티스토리 스킨 만들기 (초보) - 8강. 사이드바 Ⅱ
이번 강에서는 지난 강에 이어서 상단 사이드바 그룹을 완성해 봅시다.
상단 사이드바 그룹에는 블로그이미지와 설명, RSS와 관리자화면 링크, 공지사항, 검색모듈, 카테고리, 태그모듈, 최근글, 최근댓글, 최근트랙백, 글 보관함, 링크, 달력모듈을 출력하고
하단 사이드바 그룹에는 카운터, 다음&티스토리 링크, 카피라이트를 출력하기로 했는데요,
지난 강에서 '블로그이미지와 설명' 모듈을 만들었습니다.
각각의 '더보기' 를 반드시 하나하나 차례대로 클릭해서 보세요.
지금껏 한 강의 중 이번 강이 가장 빡셌어요.
(대체할 수 있는 단어를 찾으려 했으나, '빡세다' 만큼 뜻이 정확히 들어맞는 표현은 없는 듯..ㅋㅋㅋ)
이번 강은 내용이 좀 기니까, 시간을 두고 여유롭게 연습하세요.
각각의 내용이 연계되어 있으니 원하는 부분만 골라보지 마시고,
최초 한 번은 꼭 차례대로 모두 따라하시길 권합니다.
마지막으로 오늘까지의 작업내역을 브라우저에서 확인한 모습입니다. (클릭해서 보세요)

다음 강에서는 하단 사이드바 그룹을 완성하고, 관리자모드에서 사이드바 설정하는 법을 알아보겠습니다.
중급자를 위한 티스토리 스킨 수정 팁 보러가기
상단 사이드바 그룹에는 블로그이미지와 설명, RSS와 관리자화면 링크, 공지사항, 검색모듈, 카테고리, 태그모듈, 최근글, 최근댓글, 최근트랙백, 글 보관함, 링크, 달력모듈을 출력하고
하단 사이드바 그룹에는 카운터, 다음&티스토리 링크, 카피라이트를 출력하기로 했는데요,
지난 강에서 '블로그이미지와 설명' 모듈을 만들었습니다.
각각의 '더보기' 를 반드시 하나하나 차례대로 클릭해서 보세요.
1. RSS와 관리자화면 링크, 공지사항 - 더보기
2. 검색 - 더보기
3. 카테고리, 태그 - 더보기
4. 최근 글, 최근 댓글, 최근 트랙백, 글 보관함, 링크 - 더보기
5. 달력 - 더보기
지금껏 한 강의 중 이번 강이 가장 빡셌어요.
(대체할 수 있는 단어를 찾으려 했으나, '빡세다' 만큼 뜻이 정확히 들어맞는 표현은 없는 듯..ㅋㅋㅋ)
이번 강은 내용이 좀 기니까, 시간을 두고 여유롭게 연습하세요.
각각의 내용이 연계되어 있으니 원하는 부분만 골라보지 마시고,
최초 한 번은 꼭 차례대로 모두 따라하시길 권합니다.
마지막으로 오늘까지의 작업내역을 브라우저에서 확인한 모습입니다. (클릭해서 보세요)
다음 강에서는 하단 사이드바 그룹을 완성하고, 관리자모드에서 사이드바 설정하는 법을 알아보겠습니다.
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 1강. 스킨의 기본, 스킨 구상
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 2강. Html,CSS 란?
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 3강. Html,CSS의 실습
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 4강. skin.html의 구조
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 5강. 레이아웃
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 6강. 블로그타이틀,메뉴
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 7강. 사이드바 Ⅰ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 9강. 사이드바 Ⅲ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 10강. 미디어로그, 지역로그, 태그로그
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 11강. 방명록
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 12강. 검색결과, 페이지 표시
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 13강. 포스트 내용
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 14강. 트랙백과 댓글
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 2강. Html,CSS 란?
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 3강. Html,CSS의 실습
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 4강. skin.html의 구조
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 5강. 레이아웃
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 6강. 블로그타이틀,메뉴
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 7강. 사이드바 Ⅰ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 9강. 사이드바 Ⅲ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 10강. 미디어로그, 지역로그, 태그로그
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 11강. 방명록
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 12강. 검색결과, 페이지 표시
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 13강. 포스트 내용
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 14강. 트랙백과 댓글
-
용의자
Edit/DelReply
웬일로 1등~~ㅋ2009/10/16 01:25
it주제글에 떴길래 보러 왔습니다. ^_^)/
굉장히 긴 연재글이 될 것만 같았는데
벌써 사이드바 까지 끝내셨네요 -
지우개
Edit/DelReply
드디어 꿈에 기다리던 8강이 올라왔네요~ ^^2009/10/16 01:25
소중한 강의 감사합니다.
저도 Grace*님 강좌를 보면서 만들고는 있는데... 영 소질이 없는가 봐요 ㅡㅜ -
-
늑ㄷㅐ
Edit/DelReply
이번 강의 가장 빡셌어요 (X)2009/10/16 09:32
이번 강의가 정말 어려웠어요 (O)
지나가다가 포스팅 보고 틀린 우리말이 있길래 알려 드렸습니다^^; -
-
수피아
Edit/DelReply
안녕하세요. 티스토리에 입주한지 얼마 안된 초보자 입니다.2009/10/16 21:38
그레이스님의 강의 잘 보고 있습니다.
강의를 보던중 무려하게도 오타를 발견한 것 같아서요.^^;;
6강의에서...
topmenu레이어의 여백을 설정하고, 오른쪽으로 정렬되게 합니다.
.topmenu {padding:45px 20px 0px 0px; text-align:right}
'text-align:left'는 오른쪽, 'text-align:center'은 가운데 정렬이예요.
이 부분에서요. 'text-align:left'는 오른쪽 <== 왼쪽으로 수정해야 하는거 맞죠.^^;
그냥 강의 보다 오타가 보여서 말이죠. ㅎ
암튼 강의 잘 보고 있어요. 알아듣기 쉽게 설명해주셔서 정말 감사합니다. -
MoreCreative
Edit/DelReply
사이드바가 올라왔네요! ㅎ2009/10/17 02:01
이제 스킨도 익숙해 졌고.... 하지만 만드는건 어렵고...ㅎㅎ
많은 연습이 필요하겠죠!
좋은 강의 감사합니다~ -
-
-
강짜
Edit/DelReply
오늘 6강부터 8강까지 벼락치기 했습니다.2009/10/17 10:12
8강이 제일 어렵네요. 몇번을 더 봐야 내 것이 될것같습니다.
정말 '마법'의 CSS이군요. ㅎㅎ
이거 만드는데 고생하셨을꺼 같아요. 감사합니다~
+ 다음 강의도 너무 기대됩니다. > _< -
행복박스
Edit/DelReply
어여 열심히 내공을 쌓아서 저만의 스킨을 만들어야될텐데..2009/10/17 17:19
저는 항상 하나 제대로 되면 다른데서 오류가 나서 문제예요..ㅎㅎ -
-
-
드자이너김군
Edit/DelReply
음... 요즘 스킨이 너무 맘에 안들어서 하나 새로 계획중인데.. 김군에게 너무 밝은 빛과 같은 포스트를 올려주셔서 너무 감사합니다..으흐흐2009/10/19 15:54
하나하나 차근히 완성해 가는중 이에요.ㅋㅋ -
-
-
-
치타
-
왕초보
-
유리
Edit/DelReply
저도 컴맹인데... 하나 건드렸다가 완전 난리 날까봐 못건드리고 있다지요 ㅠ.ㅠ2009/10/27 08:10
저런 태그 들만 봐도 머리가 아프고 멀미가 나는 이상한 증세가...ㅋㅋㅋ -
Vess
Edit/DelReply
강의 잘 보고있습니다.2009/10/27 22:45
한 가지 질문이 있어서 댓글 남깁니다. 답변 부탁드려요 ..
제가 크롬에서 코딩을 했는데, IE8에서 들어가보니 제대로 적용이 되어있지않더라구요.
그래서 호환성에 대해서 이곳저곳 뒤적거려봤지만, 제대로된 해결책은 찾지 못했습니다.ㅠㅠ
호환성을 간단하게 해결할 수 있는 방법 어디 없을까요? -
퐈비오
Edit/DelReply
삼일전부터 그레이스님 강의보고 머리 쥐어싸멘사람인데요2009/10/28 00:09
꿈속에서도 태그들이 날라다닌다능 덜덜덜
ㅎ 하지만 좋은 강의 감사해요
이거보고 블로그 공사하느라 정신이 없네요 ㅎ -
킴메리 Edit/DelReply그레이스님 강의 넘 잘 보고 있어요^^2009/11/01 00:48
매번 그냥 강의만 보고 가다가 강의 넘 잘 보고 있어서 이렇게 댓글을 다네요ㅎㅎ
빨리 예쁜 스킨을 만들고 싶은 욕심때문인지 맘처럼 잘 안되서 좀 속상하기도 하네요ㅠㅁㅠ;;;
다음강의 기달리고 있을께요` ㅎㅎㅎㅎ
킴메리
-
씩씩한강냉이
Edit/DelReply
와우, 알차고 참신한 강의2009/11/12 14:24
HTML에 대해 잘 모르는 1인이라....거의 붙여넣고 있지만;ㅋㅋㅋ
한번 해보고 싶어서요~
근데 저는 왜 아래쪽에
카테고리부터~~~ 달력까지..안나올까용?ㅠㅠ
뭘 잘못했지;ㅋㅋㅋ -
데니쓰C
Edit/DelReply
9강에 파일 올려 놓으셨는데 제가 한거랑 왜 다를까 찾다가 발견한거에요.2009/12/03 19:28
위에 쓰신 것 중에 아래 부분에 "콤마"가 이중으로 찍힌 데가 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님과 제가 같은 실수를 하고 있는건지... 쩝.
어쨌든 끝까지 고고씽~~ㅎ -
츠이사키 Edit/DelReplyIE8기반의 브라우저를 사용중인데, 콤마 두번 적었다가 출력이 제대로 안돼서 당황했었습니다.2010/01/03 21:55
아무래도 콤마 두번 적은거.. 이거 생각보다 큰 오류인것 같은데요..?
츠이사키
-
-
THK
Edit/DelReply
하루만에 엄청난양의 일을 머리에 집어 넣으려하니 엄청 머리가 아프네요....2010/02/09 22:17
또 다시 질문 하나하겠습니다..
블로그 스킨 만들때.. 이 작업 하나하나 모두를 자기가 적어나가야 하는겁니까? ㅠㅠ -


-
로킬 Edit/DelReply달력 때문에 물어물어 여기까지 왔네요... 티스토리에서 제공한 소스에서 오늘 날짜만 다른 색으로 지정해줬더니 글을 안쓰면 지정해준대로 보이는데 글을 쓰면 글쓴 링크 색깔이 덮어버리더라구요. 여기 나온대로 복사해서 바꿔도 안되고... ㅠㅠ 어휴.. 뭐가 문제일까요?2010/04/17 19:56
로킬









