TISTORY 메뉴

검색

가이드 본문

티스토리에 대해서 알려드립니다.

스킨 가이드

  1. 1. 준비단계
  2. 2. 디자인 구상
  3. 3. 스킨구조
  4. 4. 치환자
  5. 5. 스타일
  6. 6. 마무리
5. 스타일
A. 페이징
1. 페이징 - 현재선택된 페이지
클래스명
.selected { }
이미지 보기
선택
사용 예시
.selected {}
{
text-align:center;
border-right:1px solid #ccc;
padding-right:10px;
margin-right:10px;
font-weight:bold;
color:#f30;
}
2. 페이징 - 첫페이지 또는 마지막 페이지 선택시 이전페이지, 다음 페이지
클래스명
.no-more-prev { } .no-more-next { } .no-more-prev { } .no-more-next { }
이미지 보기
선택
사용 예시
.no-more-prev { }
.no-more-next { }
.no-more-prev, .no-more-next { }
{
color:#ccc
}
TOP
B. 본문
1. 더 보기 - more
클래스명
.moreless_fold {}
이미지 보기
더보기
사용 예시
.moreless_fold {}
{
background:url(images/iconMore.gif) top left no-repeat;
padding-left:20px;
color:#000;
}
TOP 2. 그만보기 - less
클래스명
.moreless_top {}
이미지 보기
그만보기 - 상단
사용 예시
.moreless_top {}
{
background:url(images/iconLess.gif) top left no-repeat;
padding-left:20px;
color:#000;
}
TOP 3. more/less 본문 내용
클래스명
.moreless_body {}
이미지 보기
더보기의 내용
사용 예시
.moreless_Body {}
{
 
}
TOP 4. 그만보기 - less
클래스명
.moreless_bottom {}
이미지 보기
그만보기 - 하단
사용 예시
.moreless_bottom {}
{
background:url(images/iconLess.gif) top right no-repeat;
padding-right:20px;
color:#999;
text-align:right;
}
TOP
C. 코멘트, 방명록
1. 일반 댓글 [##_rp_rep_class_##]
클래스명
.rp_general {}
이미지 보기
일반댓글
사용 예시
.rp_general
{
 
}
TOP 2. 관리자가 올린 댓글 [##_rp_rep_class_##]
클래스명
.rp_admin {}
이미지 보기
관리자의 댓글
사용 예시
.rp_admin
{
background:url(images/iconAdmin.gif) no-repeat;
padding-left:20px;
}
TOP 3. 비밀 댓글 [##_rp_rep_class_##]
클래스명
.rp_secret {}
이미지 보기
비밀 댓글
사용 예시
.rp_secret
{
color:#f30;
font-weight:bold;
}
TOP 4. 비밀 댓글(로그인 하지 않았을 경우)
클래스명
.hiddenComment { }
이미지 보기
로그아웃시 비밀댓글
사용 예시
.hiddenComment
{
background:url(images/iconSecret.gif) no-repeat;
padding-left:20px;
font-weight:normal;
}
TOP 5. 일반 방명록 글 [##_guest_rep_class_##]
클래스명
.guest_general {}
이미지 보기
일반 방명록 글
사용 예시
.guest_general
{
 
}
TOP 6. 관리자가 올린 댓글 [##_guest_rep_class_##]
클래스명
.guest_admin {}
이미지 보기
관리자의 방명록 글
사용 예시
.guest_admin
{
background:url(images/iconAdmin.gif) no-repeat;
padding-left:20px;
}
TOP
D. 카테고리
1. 카테고리의 폴더이미지를 포함하고 있는 셀의 스타일 (td 영역)
클래스명
.ib { }
이미지 보기
카테고리
사용 예시
.ib
{
cursor:pointer;
}
TOP 2. 카테고리의 텍스트를 포함하고 있는 셀의 스타일 (td 영역)
클래스명
.branch3 { }
이미지 보기
카테고리의 텍스트를 포함하고 있는 셀
사용 예시
.branch3
{
cursor:pointer;
}
TOP 3. 카테고리옆 갯수를 나타내는 숫자의 스타일
클래스명
.c_cnt { }
이미지 보기
카테고리에 포함된 글의 갯수
사용 예시
.c_cnt
{
font:0.75em Tahoma; color:#f30;
}
TOP
E. 달력
1. 달력의 년월일, 이전달, 다음달을 표시하는 스타일
클래스명
.cal_month { }
이미지 보기
달력의 년월일
사용 예시
.cal_month
{
font-size:0.85em;
height:18px;
font-weight:bold;
}
TOP 2. 달력의 요일명을 표시하는 스타일 (th 영역)
클래스명
.cal_week1 { }
이미지 보기
달력의 요일명
사용 예시
.cal_week1
{
font:0.95em dotum;
height:18px;
font-weight:normal;
}
TOP 3. 일요일이라는 요일명을 표시하는 스타일 (th 영역)
클래스명
.cal_week2 { }
이미지 보기
달력의 일요일이라는 요일명
사용 예시
.cal_week2
{
font:0.95em dotum;
color:#f30;
}
TOP 4. 달력의 주(Week) 단위를 표시하는 스타일 (tr 영역)
클래스명
.cal_week { }
이미지 보기
달력의 주단위
사용 예시
a.cal_week
{
background-color:#fff;
}
TOP 5. 달력의 현재 주(Current Week)를 표시하는 스타일 (tr 영역)
클래스명
.cal_current_week { }
이미지 보기
달력의 현재 주
사용 예시
.cal_current_week
{
background-color:#eee;
}
TOP 6. 현재 달을 포함하는 전체 날짜(Day)의 스타일 전체 (td 영역)
클래스명
.cal_day { }
이미지 보기
달력의 전체 날짜
사용 예시
.cal_day
{
font-size:0.85em;
color:#999;
text-align:center;
}
TOP 7. 현재 달을 포함하는 전체 날짜의 일요일 스타일 (td 영역)
클래스명
.cal_day_sunday { }
이미지 보기
달력의 일요일
사용 예시
.cal_day_sunday { }
{
color:#f30 !important;
}
.cal_day_sunday a{ }
{
color:#f30 !important;
}
TOP 8. 해당 달력에서 이전달 날짜를 표시하는 스타일(td 영역) - 현재 이전달 날짜가 출력되고 있지 않습니다
클래스명
.cal_day1 { }
이미지 보기
달력의 이전달 날짜
사용 예시
.cal_day1
{
color:#ccc;
}
TOP 9. 해당 달력에서 다음달 날짜를 표시하는 스타일(td 영역) - 현재 다음달 날짜가 출력되고 있지 않습니다
클래스명
.cal_day2 { }
이미지 보기
달력의 다음달 날짜
사용 예시
.cal_day2
{
color:#ccc;
}
TOP 10. 현재 달력의 이번달 날짜를 표시하는 스타일 (td 영역)
클래스명
.cal_day3 { }
이미지 보기
달력의 이번달 날짜
사용 예시
.cal_day3
{
color:#666;
}
TOP 11. 오늘 날짜를 표시하는 스타일 (td 영역)
클래스명
.cal_day4 { }
이미지 보기
오늘 날짜를 표시하는 스타일
사용 예시
.cal_day4
{
color:#000;
text-decoration:underline;
}
TOP 12. 글을 작성한 날의 링크 스타일
클래스명
a.cal_click { }
이미지 보기
작성한 날의 링크
사용 예시
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;}
TOP
F. 그림 표시
1. 이미지 아래 캡션 스타일
클래스명
.cap1
이미지 보기
이미지 아래 캡션
사용 예시
.cap1
{
color:#999;
text-align:center;
}
TOP 2. 이미지 블럭
클래스명
.imageblock {}
이미지 보기
이미지블럭
사용 예시
.imageblock {}
{
border:1px solid #ddd;
padding:5px;
margin:5px 0;
}
TOP 3. 이미지 왼쪽 정렬
클래스명
.left {}
사용 예시
.left {}
{
 
}
TOP 4. 이미지 가운데 정렬
클래스명
.center {}
사용 예시
.center {}
{
 
}
TOP 5. 이미지 오른쪽 정렬
클래스명
.right {}
사용 예시
.right {}
{
 
}
TOP 6. 그림 2개 배치
클래스명
.dual {}
이미지 보기
이미지가 두개 일때 이미지블럭
사용 예시
.dual {}
{
background-color:#eee;
margin-bottom:5px;
}
TOP 7. 그림 3개 배치
클래스명
.triple {}
이미지 보기
이미지가 세개일때 이미지블럭
사용 예시
.triple {}
{
background-color:#eee;
margin-bottom:5px;
}
TOP
G. 스킨위자드
1. 블로그 배경
이미지 보기
블로그 배경 샘플 이미지
① 배경 이미지
.body { background-image:/*@background-image*/url(./images/bg.gif)/*@*/; }
② 배경 이미지 반복
.body { background-repeat:/*@background-image-repeat*/no-repeat/*@*/; }
③ 배경 이미지 위치
.body { background-position:/*@background-image-position*/center/*@*/; }
④ 배경색
.body { background-color:/*@background-color*/#263335/*@*/; }
TOP
2. 블로그 제목
이미지 보기
블로그 제목 샘플 이미지
① 제목 높이
#header { height:/*@title-height*/50px/*@*/; }
② 제목색
#header { color:/*@title-color*/#0507EF/*@*/; }
③ 제목 폰트
#header { font-family:/*@title-font-family*/Dotum/*@*/; }
④ 제목 폰트 크기
#header { font-size:/*@title-font-size*/1.5em/*@*/; }
TOP
3. 블로그 제목배경
이미지 보기
블로그 제목배경 샘픔 이미지
① 배경 이미지
#header { background-image:/*@title-background-image*/url("images/bgTop.jpg")/*@*/; }
② 배경 이미지 반복
#header { background-repeat:/*@title-background-image-repeat*/repeat-x/*@*/; }
③ 배경 이미지 위치
#header { background-position:/*@title-background-image-position*/center/*@*/; }
④ 배경색
#header { background-color:/*@title-background-color*/#0507EF/*@*/; }
TOP
4. 본문 너비, 본문 제목, 본문 내용
이미지 보기
본문 샘플 이미지
① 본문 너비 설명
.article { width:/*@post-width*/550px/*@*/; }
댓글이나 방명록 입력 영역과 같이 본문 너비와 연관된 부분은 다음과 같이 표현합니다. - 값을 입력하면 post-width보다 해당 값만큼 적은 너비를 가지게 됩니다.
.guest textarea { width:/*@post-width:-50*/500px/*@*/; }
② 제목색
.entry h2 { color:/*@post-title-color*/#0507EF/*@*/; }
③ 제목 폰트
.entry h2 { font-family:/*@post-title-font-family*/Dotum/*@*/; }
④ 제목 크기
.entry h2 { font-size:/*@post-title-font-size*/1.2em/*@*/; }
⑤ 내용색
.entry .article { color:/*@post-body-color*/#0507EF/*@*/; }
⑥ 내용 폰트
.entry .article { font-family:/*@post-body-font-family*/Dotum/*@*/; }
⑦ 내용 크기
.entry .article { font-size:/*@post-body-font-size*/1em/*@*/; }
TOP
5. 스킨위자드 속성 목록
블로그 영역 스킨위자드 속성명 속성값 타입 CSS 속성
배경 이미지background-imageurlbackground-image
배경 이미지 반복background-image-repeatrepeatbackground-repeat
배경 이미지 위치background-image-positionpositionbackground-position
배경색background-colorcolorbackground-color
제목 높이title-heightpxheight
제목색title-colorcolorcolor
제목 폰트title-font-familyfontfont-family
제목 폰트 크기title-font-sizefont-sizefont-size
제목 배경 이미지title-background-imageurlbackground-image
제목 배경 이미지 위치title-background-image-positionpositionbackground-position
제목 배경 이미지 반복title-background-repeatrepeatbackground-repeat
제목 배경색title-background-colorcolorbackground-color
본문 너비post-widthpxwidth
본문 제목색post-title-colorcolorcolor
본문 제목 폰트post-title-font-familyfontfont-family
본문 제목 크기post-title-font-sizefont-sizefont-size
본문 내용색post-body-colorcolorcolor
본문 내용 폰트post-body-font-familyfontfont-family
본문 내용 크기post-body-font-sizefont-sizefont-size
TOP