티스토리 hELLO 스킨에 달력 추가하기

아무래도 폰트 크기가 제각각인게 거슬려서 오디세이를 포기하기로 했다.. 예쁜 hello 스킨도 발견했고! 그러나 오디세이 스킨에 있는 달력을 너무 쓰고 싶었기에 방법을 찾아보았다.

 

최종 결과물

 

🔍달력 구조 알아보기

우선 오디세이 스킨의 HTML에서 어떤 부분이 달력인지 찾기

이 부분이다. (2023.01.23 기준 티스토리에서 설정을 바꾸었는지 티스토리 치환자를 넣으면 달력이 본문에서도 그대로 출력되는 문제가 있어서 부득이하게 캡쳐로 대체하였다. 코드 안에서도 달력 자체로 출력되는 건 충격적이다ㅠㅠ)

아래의 블로그를 참고하면 달력 스킨의 구조와, css 정보를 알 수 있다

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

 

---

⚙️1차 시도 (221006)

1. 위 블로그와 스킨 코드를 참고하여 만들어진 HTML

버튼을 바꾸기 위한 script 부분은 아래 블로그에서 참고했다.

HTML을 뜯어보면 달력 윗부분은 이런 구조로 되어 있다.

Tistory - 티스토리에 깃허브처럼 잔디 깔기!

그리고 오디세이 스킨이라면 이 블로그를 참고하면 된다.

[CSS] 티스토리 오디세이 캘린더 <, > 달력 버튼 수정하기

 

2. 위 블로그들을 참고하여 만들어진 CSS

/* calendar 시작*/
.calendar {}
.calendar .tt-calendar {width:90% !important;border-collapse:collapse;}
.calendar .tt-calendar caption { margin-bottom: 10px; }
.calendar .tt-calendar caption a:first-child, .calendar .tt-calendar caption a:last-child 
{font-size:0.7em !important; }
.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.800em !important;font-weight:normal;color: var(--h-color) !important;}
.calendar .tt-calendar td {font-size:0.700em !important;color:var(--h-color) !important;}
.calendar .tt-calendar .cal_current_week {}
.calendar .tt-calendar .cal_week2, .calendar .tt-calendar .cal_day_sunday {color:red}
.calendar .tt-calendar td a {
  display:inline-block;background: #C5E1A5;color: #C5E1A5  !important;
  border-radius: 100%;width: 20px;height: 20px;line-height: 20px;}
.calendar .tt-calendar .cal_day4 {color: #C5E1A5;}
.calendar .tt-calendar .cal_day4 a {background: #C5E1A5;color:#C5E1A5 !important;}
/* calendar 끝*/

• width는 100으로 하면 너비가 초과되어서 90퍼로 맞추니 딱 예쁘게 나왔다.
• th의 폰트 값이 요일(한글)이다
• td의 폰트 값은 날짜(숫자)다
• cal_day4가 오늘 날짜다.

 

---

⚙️2차 수정 (230123 업데이트)

여기서부터는 순전히 디자인 취향의 영역이다.

1. 함수를 내 스타일로 바꿔보았다. 나는.. 쿼리 셀렉터를 좋아한다.
   1. classList에 각각에 해당하는 class를 추가하는 방법을 사용했다.
   2. textContent가 기본으로 지정되어 있기 때문에 해당 텍스트를 비워주었다.
   3. title 툴팁 내에 너무 긴 글이 들어가 있어서 짧은 단어로(ex.다음 달) 변경하기로 했다.
2. 버튼 모양을 아이콘으로 변경하였다. 안전하게 css를 이용하기로 했다.
   
   1. 굳이 마진을 3px 넣어준 이유는 클릭하는 범위를 조금 넓혀서 쉽게 클릭할 수 있도록 하기 위함이다.
   2. 기본적인 css 스타일은 hello 스킨 카테고리 스타일에서 가져왔다.

HTML script 부분 수정

                  <script>
                    const calMonthAll = document.querySelectorAll(".cal_month a");
                    calMonthAll[0].classList.add("PrevMonthBtn");
                    calMonthAll[0].textContent = "";
                    calMonthAll[0].title = "이전 달";
                    // 이전 달로 가는 버튼
                    calMonthAll[1].classList.add("Month");
                    calMonthAll[1].title = "";
                    // 현재 달
                    calMonthAll[2].classList.add("NextMonthBtn");
                    calMonthAll[2].textContent = "";
                    calMonthAll[2].title = "다음 달";
                    // 다음 달로 가는 버튼
                 </script>

CSS 추가

/* 커스텀 calendar 시작*/
.calendar {  width: 16rem !important;}
.calendar .tt-calendar {width:100% !important;border-collapse:collapse;margin: 0 auto;}
.calendar .tt-calendar caption { margin-bottom: 10px; }
.calendar .tt-calendar caption a:first-child, .calendar .tt-calendar caption a:last-child 
{font-size:0.7em !important; }
.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.9em !important;font-weight:600;}
.calendar .tt-calendar td {font-size:0.8em !important;}
.calendar .tt-calendar .cal_current_week {}
.calendar .tt-calendar .cal_week2, .calendar .tt-calendar .cal_day_sunday {}
.calendar .tt-calendar td a {
  display:inline-block;background: #C5E1A5;color: #C5E1A5  !important;
  border-radius: 100%;width: 20px;height: 20px;line-height: 20px; font-size:1em !important;}
.calendar .tt-calendar .cal_day4 {color: #85bdac;}
.calendar .tt-calendar .cal_day4 a {background: #85bdac;color:#85bdac !important; font-size:1em !important;}
.cal_month .PrevMonthBtn::before,
.cal_month .NextMonthBtn::before,
.cal_month .Month {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 3px;
}
.cal_month .PrevMonthBtn::before {
  content: '\f104';
  font-family: 'Font Awesome 5 Free';
}
.cal_month .NextMonthBtn::before {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
}
/*  끝*/

 

---

마지막으로 잊으면 안 되는 사이드바-모듈 설정

수정하고 나서 사이드바 설정을 잊지 말자 (자꾸 맨 아래 티스토리가 사라져서 뭔가 했다)

 

 

---

 

처음에 오디세이 스킨 뜯어보면서 고민했던 흔적

아무것도 모른 채 그냥 HTML과 css만 뜯어봤던 흔적이다. 조금 뜯어보다가 서치해서 구조를 알고 수정했다.

div 클래스인 box-calendar
h3 클래스인 title-sidebar는 아마 다른 스킨에도 있을 것이다
div 클래스 inner-calendar

span class blind는 뭘까?! 싶어서 찾아봄

.blind {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    width: 1px;
    height: 1px;
}

이제 css로 가서 각 속성의 옵션을 알아본다

box-calendar의 모든 부분을 찾아본다

1.

/* area-aside */
.area-aside {
    width: 300px;
    /* box-profile */
    /* box-category */
    /* box-tag */
    /* box-recent */
    /* box-plugin */
    /* plugin */
    /* box-calendars */
    /* box-visit */
    /* box-search */
}

2.

.area-aside .box-calendar .inner-calendar {
    padding: 23px 28px 24px 28px;
    border: 1px solid #e8e8e8;
    font-size: 13px;
}

.area-aside .box-calendar .inner-calendar table caption a {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.57;
    color: #333;
    text-decoration: none;
}

.area-aside .box-calendar .inner-calendar table th,
.area-aside .box-calendar .inner-calendar table td {
    font-weight: 400;
    line-height: 1.81;
    color: #999;
    text-align: center;
}

.area-aside .box-calendar .inner-calendar table th {
    margin-bottom: 10px;
}

3.

.box-calendar .cal_click {
    font-weight: 700;
    color: #333;
}

.area-aside .box-calendar .inner-calendar .cal_month {
    position: relative;
    margin-bottom: -6px;
}

.area-aside .box-calendar .inner-calendar .cal_month a {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.area-aside .box-calendar .inner-calendar .cal_month a:first-child:before {
    content: '〈';
    position: absolute;
    top: -3px;
    left: 60px;
    width: 30px;
    height: 24px;
    background-color: transparent;
    font-size: 12px;
    padding-top: 5px;
}

.area-aside .box-calendar .inner-calendar .cal_month a:last-child:before {
    content: '〉';
    position: absolute;
    top: -3px;
    right: 60px;
    width: 34px;
    height: 24px;
    background-color: transparent;
    font-size: 12px;
    padding-top: 5px;
}

.area-aside .box-calendar .inner-calendar thead tr th {
    padding-bottom: 8px;
}

검색해보니 .calendar 가 나오던데 css에 따로 등록되어 있진 않은지 나오지 않았다.