텍스트큐브 스킨제작 레퍼런스

step04 : 스타일 (style.css)

페이징

1. 현재 선택된 있는 페이지 스타일

   클래스명

   .selected { }

   이미지 보기

   

   사용 예

   .selected
   {

   text-align:center;
   border-right:1px solid #ccc;
   padding-right:10px;
   margin-right:10px;
   font-weight:bold;
   color:#f30;

   }
   

   Move to top↑

2. 첫페이지 또는 마지막 페이지 선택시 이전페이지, 다음 페이지 스타일

   클래스명

   .no-more-prev { }
   .no-more-next { }

   이미지 보기

   

   사용 예

   .no-more-prev,
   .no-more-next
   {

   color:#ccc;

   }
   

   Move to top↑

카테고리

1. 카테고리의 폴더이미지를 포함하고 있는 셀의 스타일 (td 영역)

   클래스 명

   .ib { }

   이미지 보기

   

   사용 예

   .ib
   {

   cursor:pointer;

   }

   Move to top↑

2. 카테고리의 텍스트를 포함하고 있는 셀의 스타일 (td 영역)

   클래스 명

   .branch3 { }

   이미지 보기

   

   사용 예

   .branch3
   {

   cursor:pointer;

   }

   Move to top↑

3. 카테고리옆 갯수를 나타내는 숫자의 스타일

   클래스 명

   .c_cnt { }

   이미지 보기

   

   사용 예

   .c_cnt
   {

   font:0.75em Tahoma; color:#f30;

   }

   Move to top↑

달력

1. 달력의 년월일, 이전달, 다음달을 표시하는 스타일

   클래스 명

   .cal_month { }

   이미지 보기

   

   사용 예

   .cal_month
   {

   font-size:0.85em;
   height:18px;
   font-weight:bold;

   }

   Move to top↑

2. 달력의 요일명을 표시하는 스타일 (th 영역)

   클래스 명

   .cal_week1 { }

   이미지 보기

   

   사용 예

   .cal_week1
   {

   font:0.95em dotum;
   height:18px;
   font-weight:normal;

   }

   Move to top↑

3. 일요일이라는 요일명을 표시하는 스타일 (th 영역)

   클래스 명

   .cal_week2 { }

   이미지 보기

   

   사용 예

   .cal_week2
   {

   font:0.95em dotum;
   color:#f30;

   }

   Move to top↑

4. 달력의 주(Week) 단위를 표시하는 스타일 (tr 영역)

   클래스 명

   .cal_week { }

   이미지 보기

   

   사용 예

   a.cal_week
   {

   background-color:#fff;

   }

   Move to top↑

5. 달력의 현재 주(Current Week)를 표시하는 스타일 (tr 영역)

   클래스 명

   .cal_current_week { }

   이미지 보기

   

   사용 예

   .cal_current_week
   {

   background-color:#eee;

   }

   Move to top↑

6. 현재 달을 포함하는 전체 날짜(Day)의 스타일 전체 (td 영역)

   클래스 명

   .cal_day { }

   이미지 보기

   

   사용 예

   .cal_day
   {

   font-size:0.85em;
   color:#999;
   text-align:center;

   }

   Move to top↑

7. 현재 달을 포함하는 전체 날짜의 일요일 스타일 (td 영역)

   클래스 명

   .cal_day_sunday { }

   이미지 보기

   

   사용 예

   .cal_day_sunday { }
   {

   color:#f30 !important;

   }
   .cal_day_sunday a{ }
   {

   color:#f30 !important;

   }

   Move to top↑

8. 해당 달력에서 이전달 날짜를 표시하는 스타일(td 영역) - 현재 이전달 날짜가 출력되고 있지 않습니다

   클래스 명

   .cal_day1 { }

   이미지 보기

   

   사용 예

   .cal_day1
   {

   color:#ccc;

   }

   Move to top↑

9. 해당 달력에서 다음달 날짜를 표시하는 스타일(td 영역) - 현재 다음달 날짜가 출력되고 있지 않습니다

   클래스 명

   .cal_day2 { }

   이미지 보기

   

   사용 예

   .cal_day2
   {

   color:#ccc;

   }

   Move to top↑

10. 현재 달력의 이번달 날짜를 표시하는 스타일 (td 영역)

    클래스 명

    .cal_day3 { }

    이미지 보기

    

    사용 예

    .cal_day3
    {

    color:#666;

    }

    Move to top↑

11. 오늘 날짜를 표시하는 스타일 (td 영역)

    클래스 명

    .cal_day4 { }

    이미지 보기

    

    사용 예

    .cal_day4
    {

    color:#000;
    text-decoration:underline;

    }

    Move to 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;}

    Move to top↑

코멘트, 방명록

1. 일반 댓글 [##_rp_rep_class_##]

   클래스 명

   .rp_general {}

   이미지 보기

   

   사용 예

   .rp_general
   {

    

   }

   Move to top↑

2. 관리자가 올린 댓글 [##_rp_rep_class_##]

   클래스 명

   .rp_admin {}

   이미지 보기

   

   사용 예

   .rp_admin
   {

   background:url(images/iconAdmin.gif) no-repeat;
   padding-left:20px;

   }

   Move to top↑

3. 비밀 댓글 [##_rp_rep_class_##]

   클래스 명

   .rp_secret {}

   이미지 보기

   

   사용 예

   .rp_secret
   {

   color:#f30;
   font-weight:bold;

   }

   Move to top↑

4. 비밀 댓글(로그인 하지 않았을 경우)

   클래스 명

   .hiddenComment { }

   이미지 보기

   

   사용 예

   .hiddenComment
   {

   background:url(images/iconSecret.gif) no-repeat;
   padding-left:20px;
   font-weight:normal;

   }

   Move to top↑

5. 일반 방명록 글 [##_guest_rep_class_##]

   클래스 명

   .guest_general {}

   이미지 보기

   

   사용 예

   .guest_general
   {

    

   }

   Move to top↑

6. 관리자가 올린 댓글 [##_guest_rep_class_##]

   클래스 명

   .guest_admin {}

   이미지 보기

   

   사용 예

   .guest_admin
   {

   background:url(images/iconAdmin.gif) no-repeat;
   padding-left:20px;

   }

   Move to top↑

그림 표시

1. 이미지 아래 캡션 스타일

   클래스 명

   .cap1

   이미지 보기

   

   사용 예

   .cap1
   {

   color:#999;
   text-align:center;

   }

   Move to top↑

2. 이미지 블럭

   클래스 명

   .imageblock {}

   이미지 보기

   

   사용 예

   .imageblock {}
   {

   border:1px solid #ddd;
   padding:5px;
   margin:5px 0;

   }

   Move to top↑

3. 이미지 왼쪽 정렬

   클래스 명

   .left {}

   사용 예

   .left {}
   {

    

   }

   Move to top↑

4. 이미지 가운데 정렬

   클래스 명

   .center {}

   사용 예

   .center {}
   {

    

   }

   Move to top↑

5. 이미지 오른쪽 정렬

   클래스 명

   .right {}

   사용 예

   .right {}
   {

    

   }

   Move to top↑

6. 그림 2개 배치

   클래스 명

   .dual {}

   이미지 보기

   

   사용 예

   .dual {}
   {

   background-color:#eee;
   margin-bottom:5px;

   }

   Move to top↑

7. 그림 3개 배치

   클래스 명

   .triple {}

   이미지 보기

   

   사용 예

   .triple {}
   {

   background-color:#eee;
   margin-bottom:5px;

   }

   Move to top↑

본문

1. 더 보기 - more

   클래스 명

   .moreless_fold {}

   이미지 보기

   

   사용 예

   .moreless_fold {}
   {

   background:url(images/iconMore.gif) top left no-repeat;
   padding-left:20px;
   color:#000;

   }

   Move to top↑

2. 그만보기 - less

   클래스 명

   .moreless_top {}

   이미지 보기

   

   사용 예

   .moreless_top {}
   {

   background:url(images/iconLess.gif) top left no-repeat;
   padding-left:20px;
   color:#000;

   }

   Move to top↑

3. more/less 본문 내용

   클래스 명

   .moreless_body {}

   이미지 보기

   

   사용 예

   .moreless_Body {}
   {

    

   }

   Move to top↑

4. 그만보기 - less

   클래스 명

   .moreless_bottom {}

   이미지 보기

   

   사용 예

   .moreless_bottom {}
   {

   background:url(images/iconLess.gif) top right no-repeat;
   padding-right:20px;
   color:#999;
   text-align:right;

   }

   Move to top↑