왼쪽 사이드바에 보이는 캘린더에

1일 1포스팅 이라는 제목을 달고

포스팅 날자가 하이라이트 되게 해뒀다.

 

코드는

 

HTML

더보기

<s_sidebar_element>
    <!-- 달력 -->
    <div class="calendar">
        <h7 class="sr-only"><center>1일 1 포스팅 !</center></h7>
        

«   2024/05   »
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 31

    </div>
</s_sidebar_element>

 

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:#fff; font-size:1.2em}
.calendar .tt-calendar caption a {vertical-align:middle}
.calendar .tt-calendar th, .calendar .tt-calendar td {padding:1px 0; text-align:center}
.calendar .tt-calendar th {font-size:0.9em; font-weight:normal}
.calendar .tt-calendar td {font-size:0.9em; color:#8C8C8C}
.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:#4169E1; color:#FF0000; border-radius:10px;}
.calendar .tt-calendar .cal_day4 {background:#fff; color:#fff}
.calendar .tt-calendar .cal_day4 a {background:#7ED2FF}

 

참조

viprino.tistory.com/9

aboooks.tistory.com/70

 

 

-끝-


ps. 혹시 이 글이 유용하셨다면

아래 그림 클릭 > 쿠팡 접속하셔서

평소 필요하셨던 아무거나 구매하시면

블로그 운영에 작은 도움이 됩니다 :p 

(구매가격은 완전 동일해요!)

 

-진짜 끝-

 

 

+ Recent posts