14. 티스토리 스킨 만들기 달력

오늘은 사이드바 부분의 마지막 모듈, 달력을 알아보겠습니다.

먼저 사이드바에 달력 모듈을 넣어줍니다.

달력을 넣게 되면 사이드바에 달력 하나가 나타납니다.

그냥 단순한 달력만 나오게 되죠.

이제 이 부분을 수정해보겠습니다.

      <s_sidebar_element>

      <!-- 달력 -->

      <div class="calender">

        <h3>달력</h3>

        [ ##_calendar_##]

      </div>

      </s_sidebar_element>

HTML 부분은 바꾼 부분이 없습니다.

CSS부분을 수정해볼까요?

.calender {margin-bottom:10px;}

.calender > h3 {

text-align:center;

margin-bottom:10px;

color:#fff;

text-shadow:3px 3px 5px #202d44;

}

.calender a {font-weight:bolder;}

.calender th,

.calender td {

border:1px solid white;

text-align:center;

}

.calender th:nth-child(7n-6),

.calender td:nth-child(7n-6) {background:red;}

.calender th:nth-child(7n),

.calender td:nth-child(7n) {background:blue;}

다른 부분에 비해 복잡한게 조금 있네요.

먼저 다음 모듈과의 거리를 위한 margin-bottom:10px을 줬고, 다른 부분의 h3과 같은 효과를 줬습니다.

그리고, 글을 쓴 날짜에는 그 날짜에 링크가 걸리게 되는데요.

a 선택자를 이용해서 글을 쓴 날짜만 굵게 표시하게 끔 설정했습니다.

.calender th와 td의 경우 border로 표처럼 만든 후, 가운데 정렬을 해줬고

마지막으로 th와 td의 :nth-child(7n-6)의 경우 일요일 부분을 나타냅니다.

7n이란건 7번째의 태그부터 선택하는 선택자인데, 일요일은 첫번째니까 각 줄에서 첫번째의 칸이 선택되어야겠죠?

그래서 1을 가리키는 7n-6을 해준겁니다.

토요일의 경우엔 7n만으로도 7을 가리킬 수 있으므로 7n만을 적었습니다. 

뭐 이 정도로 마무리 하면 되겠죠?

디자인은... 여러번 말하지만 신경쓰지 말아주세요... ㅠㅠ

이걸로 사이드바는 끝났네요.

따라하시다가 궁금한 점은 댓글에 남겨주세요!