서브메뉴

스킨 제작 매뉴얼 - 4. 스타일 (style.css)

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;
    }
  2. 첫페이지 또는 마지막 페이지 선택시 이전페이지, 다음 페이지 스타일

    클래스명
    .no-more-prev { }
    .no-more-next { }
    이미지 보기
    더이상 페이지가 없음
    사용 예
    .no-more-prev,
    .no-more-next
    {
    color:#ccc;
    }

카테고리

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

    클래스 명
    .ib { }
    이미지 보기
    카테고리
    사용 예
    .ib
    {
    cursor:pointer;
    }
  2. 카테고리의 텍스트를 포함하고 있는 셀의 스타일 (td 영역)

    클래스 명
    .branch3 { }
    이미지 보기
    카테고리의 텍스트를 포함하고 있는 셀
    사용 예
    .branch3
    {
    cursor:pointer;
    }
  3. 카테고리옆 갯수를 나타내는 숫자의 스타일

    클래스 명
    .c_cnt { }
    이미지 보기
    카테고리에 포함된 글의 갯수
    사용 예
    .c_cnt
    {
    font:0.75em Tahoma; color:#f30;
    }

달력

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

    클래스 명
    .cal_month { }
    이미지 보기
    달력의 년월일
    사용 예
    .cal_month
    {
    font-size:0.85em;
    height:18px;
    font-weight:bold;
    }
  2. 달력의 요일명을 표시하는 스타일 (th 영역)

    클래스 명
    .cal_week1 { }
    이미지 보기
    달력의 요일명
    사용 예
    .cal_week1
    {
    font:0.95em dotum;
    height:18px;
    font-weight:normal;
    }
  3. 일요일이라는 요일명을 표시하는 스타일 (th 영역)

    클래스 명
    .cal_week2 { }
    이미지 보기
    달력의 일요일이라는 요일명
    사용 예
    .cal_week2
    {
    font:0.95em dotum;
    color:#f30;
    }
  4. 달력의 주(Week) 단위를 표시하는 스타일 (tr 영역)

    클래스 명
    .cal_week { }
    이미지 보기
    달력의 주단위
    사용 예
    a.cal_week
    {
    background-color:#fff;
    }
  5. 달력의 현재 주(Current Week)를 표시하는 스타일 (tr 영역)

    클래스 명
    .cal_current_week { }
    이미지 보기
    달력의 현재 주
    사용 예
    .cal_current_week
    {
    background-color:#eee;
    }
  6. 현재 달을 포함하는 전체 날짜(Day)의 스타일 전체 (td 영역)

    클래스 명
    .cal_day { }
    이미지 보기
    달력의 전체 날짜
    사용 예
    .cal_day
    {
    font-size:0.85em;
    color:#999;
    text-align:center;
    }
  7. 현재 달을 포함하는 전체 날짜의 일요일 스타일 (td 영역)

    클래스 명
    .cal_day_sunday { }
    이미지 보기
    달력의 일요일
    사용 예
    .cal_day_sunday { }
    {
    color:#f30 !important;
    }
    .cal_day_sunday a{ }
    {
    color:#f30 !important;
    }
  8. 해당 달력에서 이전달 날짜를 표시하는 스타일(td 영역) - 현재 이전달 날짜가 출력되고 있지 않습니다

    클래스 명
    .cal_day1 { }
    이미지 보기
    달력의 이전달 날짜
    사용 예
    .cal_day1
    {
    color:#ccc;
    }
  9. 해당 달력에서 다음달 날짜를 표시하는 스타일(td 영역) - 현재 다음달 날짜가 출력되고 있지 않습니다

    클래스 명
    .cal_day2 { }
    이미지 보기
    달력의 다음달 날짜
    사용 예
    .cal_day2
    {
    color:#ccc;
    }
  10. 현재 달력의 이번달 날짜를 표시하는 스타일 (td 영역)

    클래스 명
    .cal_day3 { }
    이미지 보기
    달력의 이번달 날짜
    사용 예
    .cal_day3
    {
    color:#666;
    }
  11. 오늘 날짜를 표시하는 스타일 (td 영역)

    클래스 명
    .cal_day4 { }
    이미지 보기
    오늘 날짜를 표시하는 스타일
    사용 예
    .cal_day4
    {
    color:#000;
    text-decoration:underline;
    }
  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;}

코멘트, 방명록

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

    클래스 명
    .rp_general {}
    이미지 보기
    일반댓글
    사용 예
    .rp_general
    {
    }
  2. 관리자가 올린 댓글 [##_rp_rep_class_##]

    클래스 명
    .rp_admin {}
    이미지 보기
    관리자의 댓글
    사용 예
    .rp_admin
    {
    background:url(images/iconAdmin.gif) no-repeat;
    padding-left:20px;
    }
  3. 비밀 댓글 [##_rp_rep_class_##]

    클래스 명
    .rp_secret {}
    이미지 보기
    비밀 댓글
    사용 예
    .rp_secret
    {
    color:#f30;
    font-weight:bold;
    }
  4. 비밀 댓글(로그인 하지 않았을 경우)

    클래스 명
    .hiddenComment { }
    이미지 보기
    로그아웃시 비밀댓글
    사용 예
    .hiddenComment
    {
    background:url(images/iconSecret.gif) no-repeat;
    padding-left:20px;
    font-weight:normal;
    }
  5. 일반 방명록 글 [##_guest_rep_class_##]

    클래스 명
    .guest_general {}
    이미지 보기
    일반 방명록 글
    사용 예
    .guest_general
    {
     
    }
  6. 관리자가 올린 댓글 [##_guest_rep_class_##]

    클래스 명
    .guest_admin {}
    이미지 보기
    관리자의 방명록 글
    사용 예
    .guest_admin
    {
    background:url(images/iconAdmin.gif) no-repeat;
    padding-left:20px;
    }

그림 표시

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

    클래스 명
    .cap1
    이미지 보기
    이미지 아래 캡션
    사용 예
    .cap1
    {
    color:#999;
    text-align:center;
    }
  2. 이미지 블럭

    클래스 명
    .imageblock {}
    이미지 보기
    이미지블럭
    사용 예
    .imageblock {}
    {
    border:1px solid #ddd;
    padding:5px;
    margin:5px 0;
    }
  3. 이미지 왼쪽 정렬

    클래스 명
    .left {}
    사용 예
    .left {}
    {
     
    }
  4. 이미지 가운데 정렬

    클래스 명
    .center {}
    사용 예
    .center {}
    {
     
    }
  5. 이미지 오른쪽 정렬

    클래스 명
    .right {}
    사용 예
    .right {}
    {
     
    }
  6. 그림 2개 배치

    클래스 명
    .dual {}
    이미지 보기
    이미지가 두개 일때 이미지블럭
    사용 예
    .dual {}
    {
    background-color:#eee;
    margin-bottom:5px;
    }
  7. 그림 3개 배치

    클래스 명
    .triple {}
    이미지 보기
    이미지가 세개일때 이미지블럭
    사용 예
    .triple {}
    {
    background-color:#eee;
    margin-bottom:5px;
    }

본문

  1. 더 보기 - more

    클래스 명
    .moreless_fold {}
    이미지 보기
    더보기
    사용 예
    .moreless_fold {}
    {
    background:url(images/iconMore.gif) top left no-repeat;
    padding-left:20px;
    color:#000;
    }
  2. 그만보기 - less

    클래스 명
    .moreless_top {}
    이미지 보기
    그만보기 - 상단
    사용 예
    .moreless_top {}
    {
    background:url(images/iconLess.gif) top left no-repeat;
    padding-left:20px;
    color:#000;
    }
  3. more/less 본문 내용

    클래스 명
    .moreless_body {}
    이미지 보기
    더보기의 내용
    사용 예
    .moreless_Body {}
    {
     
    }
  4. 그만보기 - less

    클래스 명
    .moreless_bottom {}
    이미지 보기
    그만보기 - 하단
    사용 예
    .moreless_bottom {}
    {
    background:url(images/iconLess.gif) top right no-repeat;
    padding-right:20px;
    color:#999;
    text-align:right;
    }
2008/04/03 18:56 2008/04/03 18:56
13개의 걸린 글 과    0개의 댓글이 있습니다.
이 글의 댓글/트랙백 RSS : http://www.textcube.org/manual/rss/response/77
이 글의 관련글(트랙백) 주소 : http://www.textcube.org/manual/trackback/77