Section 23 - 티스토리 반응형 스킨 만들기 - [사이드바] 달력

이번 시간에는 "사이드바 달력" 모듈입니다.

제 경험상 티스토리 블로그에 달력을 노출하는 사람은 많이 못 봤지만 그래도 없는것보단 있는게 낫지 않을까 싶어서 달력도 만들어 보도록하겠습니다.

달력은 그냥 우리가 일반적으로 날짜를 확인하는 용도로만 알고 있지만 티스토리 달력은 해당 날짜에 포스팅을 했다면 그 날짜에 글을 썼다는 마킹이 되어 있으므로 달력만 봐도 얼마나 블로그 주인이 글을 주기적으로 글을 잘 쓰고 있는지 한눈에 파악이 가능하겠금 도움을 주는 모듈이기도 합니다.(이번 달 제 달력은 많이 비어 보이겠네요 ㅋㅋㅋ)

그럼 바로 코드를 확인해보겠습니다.

STEP 1. skin.html 사이드바 달력 코드 추가

• «   2024/11   »

  일	월	화	수	목	금	토
  					1	2
  3	4	5	6	7	8	9
  10	11	12	13	14	15	16
  17	18	19	20	21	22	23
  24	25	26	27	28	29	30

  : 달력 출력합니다.(티스토리 <s_t3>태그 안에 어느곳에 써도 출력됩니다.)

STEP 2. 사이드바에 달력 모듈 추가

달력 모듈 사이드바 설정

1. 사이드바 달력 모듈 코드를 추가하면 기본 모듈에 "달력"이 표시됩니다. 그 "달력" 모듈을 사이드바에 추가합니다.
2. 사이드바 영역에 추가한 후 "변경사항 저장" 버튼을 클릭하여 저장합니다.

STEP 3. skin.html 사이드바 달력 모듈 코드 구조

달력 모듈 코드 구조

• 달력 모듈은

  «   2024/11   »

  일	월	화	수	목	금	토
  					1	2
  3	4	5	6	7	8	9
  10	11	12	13	14	15	16
  17	18	19	20	21	22	23
  24	25	26	27	28	29	30

  치환자만 넣으면 위 그림처럼 table 태그의 달력이 출력됩니다.
  
• 출력 된 달력은 오직 CSS style 만으로 표현해야하기 때문에 치환된 HTML과 class명 파악이 제일 중요합니다.
• <caption></caption> : 현재 년/월, 이전 월, 다음 월 네비게이션 출력
• <thead></thead> : 일, 월, 화, 수, 목, 금, 토
• <tbody></tbody> : 해당 월의 날짜 출력

달력 클래스

1. .cal_week2 : <thead>의 "일요일"
2. .cal_current_week : 현재 일이 포함된 주
3. .cal_day_sunday : 일요일인 날짜
4. <a class="cal_click" href="/archive/해당년월일/">날짜</a> : 포스트가 존재하는 날짜(일명 글쓴날?)
5. .cal_day4 : 현재 날짜
   • .cal_day1 : 1보다 앞에 있는 날짜가 없는 td class
   • .cal_day2 : 월 말일보다 뒤에 있는 날짜가 없는 td class
   • .cal_day3 : 날짜(오늘이 아닌 날짜)가 존재하는 td class
   • .cal_day4 : 현재 날짜(오늘)

※ 위의 클래스를 참고하여 스타일을 작성하면 됩니다.

STEP 4. style.css 사이드바 달력 모듈 스타일 추가

/* calendar */
.calendar {}
.calendar .tt-calendar {}
.calendar .tt-calendar caption {font-size:1em}
.calendar .tt-calendar caption a:first-child, .calendar .tt-calendar caption a:last-child {color:#999; font-size:0.375em}
.calendar .tt-calendar caption a {vertical-align:middle}
.calendar .tt-calendar th, .calendar .tt-calendar td {padding:5px 0; text-align:center}
.calendar .tt-calendar th {font-size:0.875em; font-weight:normal}
.calendar .tt-calendar td {font-size:0.75em; color:#bbb}
.calendar .tt-calendar .cal_current_week {background:#f5f5f5}
.calendar .tt-calendar .cal_week2, .calendar .tt-calendar .cal_day_sunday {color:red}
.calendar .tt-calendar td a {display:inline-block; padding:2px 8px; background:#ff8149; color:#fff; border-radius:30px;}
.calendar .tt-calendar .cal_day4 {background:#333; color:#fff}
.calendar .tt-calendar .cal_day4 a {background:#333}

• 사이드바 글 보관함 스타일 아래에 "달력 모듈" 스타일을 추가합니다.(HTML과 순서를 맞춰주면 소스 찾기가 쉽습니다.)
• <caption>에 있는 월 이동 네비게이션은 특정 클래스가 존재하지 않아 구형 브라우저에서 지원하지 않는 가상 클래스(first-child, last-child)를 사용하였습니다. (IE 8이하는 제대로 표현되지 않습니다. 참고하셔서 반영하세요.)

STEP 5. 사이드바 달력 모듈 결과 확인

달력 모듈 결과 확인

위와 그림과 비슷하게 나왔다면 달력도 완료 ㅡ/,.ㅡ;;

다음 섹션은 "사이드바 태그 클라우드" 모듈입니다.

고생하셨습니다~