[빈스킨] 티스토리 빈스킨(깡통 스킨)용 스타일 시트(CSS)

[빈스킨] 티스토리 빈스킨(깡통 스킨)
[빈스킨] 티스토리 빈스킨(깡통 스킨)용 스타일 시트(CSS)

이전글에 변경사항이 좀 있으므로 다시 확인하시기 바랍니다.
(참고 : 티스토리 빈스킨(깡통 스킨))
이전글에서 사용한 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 */