프로그래밍/블로그
[빈스킨] 티스토리 빈스킨(깡통 스킨)용 스타일 시트(CSS)
당근천국
2012. 2. 13. 17:07
이전글에 변경사항이 좀 있으므로 다시 확인하시기 바랍니다.
(참고 : 티스토리 빈스킨(깡통 스킨))
이전글에서 사용한 html용 css입니다.
여전이 사이드바 수정은 직접해야합니다.
하지만 티에디션은 사용 가능합니다 ㅋ
가장 기본적인 스타일만 들어가있으므로 나머지는 직접 수정하셔야 합니다.
깔끔한 CSS를 보고 있노라면......마음이 다 후련하네요 ㅋㅋㅋ
적용 상태 확인하기
티스토리_CSS.txt
요청하시는 분이 있다면 이 스킨을 기본으로 하여 자주 쓰는 내용들을 간간이 추가해볼까 생각 중입니다.
수정이력
- 2012.02.13 : 1.0 확정
- 2013.04.16 : 태그 클라우드용 스타일 추가. (티스토리쪽에서 스타일의 이름이 정해저서 내려오기 때문에 임으로 이름을 지정할 수 없어 미리 정의 해둡니다.)
@charset "utf-8";
/* 0. 바디 */
/* 0-1. 배경 */
/* 0-1-1. 배경 이미지 */
body { background-image:url('./images/f_001.jpg'); }
/* 0-2. 블로그 레이아웃 */
/* 0-2-1. 컨테이너 전체 영역 : 바디 바로 다음 단계로 바디이외의 모든 블로그가 표시되는 영역 */
#container
{
width:960px; /* 블로그 가로 크기 */
background:url(images/bg_White.jpg) repeat;
height: 100%;
background-color:#fff;
margin: 0 auto; /* 좌우 마진이 0이면 바디의 중앙에 랩컨테이너가 위치한다. */
}
/* 0-2-2. 헤더 영역 */
#header { margin-bottom: 10px; }
/* 0-2-3. 컨탠츠 영역 */
#content
{ /* 컨탠츠 크기 = padding:right + padding:left + width */
float:left;
padding: 40px 10px 50px 10px;
width:750px; /* 포스트의 실제 크기가 된다. */
overflow:hidden;
}
/* 0-2-3-2-2. 14.태그 클라우드 */
.taglog ul { padding: 0; margin:0; text-align:justify;}
.taglog li { display:inline;}
.taglog li .cloud1 { color:#699; font-weight:bold; font-size:14px;}
.taglog li .cloud2 { color:#84bbdd; font-weight:bold; font-size:14px;}
.taglog li .cloud3 { color:#333; }
.taglog li .cloud4 { color:#999; }
.taglog li .cloud5 { color:#999; }
/* 0-2-4. 사이드바 영역 */
#sidebar
{ /* 사이드바 크기 = padding:right + padding:left + width */
float: right;
width: 170px; /* 사이드바의 실제 크기가 된다. */
padding: 10px;
}
/* 0-2-5. 푸터 영역 */
#footer
{
clear:both;
padding:20px 0 0 0;
}
/* 1. header */
/* 1-1. 블로그 제목 */
#header
{
height:300px; /* 높이*/
background-image:url('images/강아지배개.png'); /* 이미지 */
}
/* 2. content */
/* 2-9. 페이징 - 현재 페이지 */
.selected { font-weight:bold; color:#f30;}
.no-more-prev { padding-left:6px; color:#999;}
.no-more-next { padding-right:6px; color:#999;}
/* 3. sidebar */
/* 3-4. 검색 */
a:link2 { color:#666; text-decoration:none; }
a:visited2 { color:#666; text-decoration:none;}
a:hover2 { color:#666; text-decoration:underline;}
a:active2 { color:#666; text-decoration:none;}
/* 3-5. 카테고리 */
/* 카테고리 - 이미지 버튼 */
.ib { cursor:pointer;}
/* 카테고리 - 트리 셀 */
.branch3 { cursor:pointer;}
/* 카테고리 - 카테고리 옆 개수 스타일 */
.c_cnt { font:0.75em Tahoma, Helvetica, Arial, Gulim, sans-serif; color:#f30;}
/* 3-11. 달력 */
/* 달력 월 표시 */
.cal_month { font:0.95em Verdana, Helvetica, Arial, Gulim, sans-serif; height:18px; }
/* 달력 요일 표시(th 영역) */
.cal_week1 { font:0.95em Dotum, Arial, sans-serif; height:18px; font-weight:normal;}
/* 달력 일요일 표시(th 영역) */
.cal_week2 { font:0.95em Dotum, Arial, sans-serif; }
/* 달력 Week(tr 영역) */
.cal_week { }
.cal_current_week { }
/* 달력 Day(td 영역) */
.cal_day
{
font:0.95em Verdana, Helvetica, Arial, Gulim, sans-serif;
color:#666;
text-align:center;
}
/* 달력 Day, 일요일 (td 영역) */
.cal_day_sunday { }
.cal_day_sunday a { }
/* 달력 지난 달 날짜 표시(td) */
.cal_day1 { color:#ccc;}
/* 달력 다음 달 날짜 표시(td) */
.cal_day2 { color:#ccc;}
/* 달력 이번 달 날짜 표시(td) */
.cal_day3 { color:#666;}
/* 달력 오늘 날짜 표시(td) */
.cal_day4 { color:#666; text-decoration:underline; font-weight: bold; }
/* 달력 글쓴 날 링크 스타일 */
a.cal_click:link { color:#333; font-weight:bold;}
a.cal_click:visited { color:#333; font-weight:bold;}
a.cal_click:hover { color:#f30; font-weight:bold;}
/* 4. footer */
/* 5. Appendix */