[HTML] TISTORY 블로그에 달력 추가 (Github 잔디 디자인)

작성일자 : 2023-11-09

Ver 0.1.1

1. Intro

Tistory 블로그를 시작을 한 이후로, 꾸준히 글을 포스팅하기 위해 틈틈이 글을 작성하려고 노력 중이다.

그런 와중에 이왕이면 디자인도 예쁜 블로그를 만들고 싶었고, 블로그를 커스터마이징 하고 싶었다.

 

그래서 우선 블로그의 스킨은 개발자들 사이에서 정말 많이 사용되는 hELLO 스킨을 적용했다. 

처음에는 HTML과 CSS에 대해서 별다른 커스텀 없이 동일 적용을 했다.

 

구글링을 하면서 다른 블로거들의 디자인을 보면서 달력을 비롯한 다른 자신만의 스타일로 블로그 디자인을 바꾼 것들을 종종 보았다.

이에 나 역시 좀 더 나만의 스타일로 블로그 디자인을 바꾸고 싶은 욕심이 생겼고, 개발자들이라면 대부분 알만한 github의 잔디를 착안하여 달력을 만들어보고 싶었다.

 

github 잔디의 특징은 commit 한 횟수만큼 잔디의 색이 진해진다는 특징이 있는데, 좀 더 꾸준히 블로그에 포스팅을 하고 그에 대한 시각화가 되어 있다면 좋을 것 같다는 생각이 들었다. 게다가 나는 Tableau를 다루는 BI컨설턴트가 아닌가..ㅎ 시각화에 대한 효과와 이에 대한 나의 욕심은 나 스스로도 너무 잘 알고 있었다.

 

Tistory에 달력을 만들기 위해서는 우선 HTML와 CSS 수정이 필요하다. 나는 이들에 대해서 아주 아주 아주 조금 알고 있는 정도이기때문에 코드를 직접 짤 능력은 되지 않아 구글링을 통해 다른 사람들 글의 도움을 받아 적용을 하였다.

 

적용에 있어서 참고한 블로그는 아래 '염베리'님의 블로그이다.

[Tistory] 티스토리에 깃허브처럼 잔디 깔기! | 블로그에 잔디 까는 방법

---

2. How to

1. 블로그 관리 > 스킨 편집

2. html 편집 클릭 및 수정

<s_sidebar_element>
  <!-- 달력 -->
  <div class="calendar">
    <h1 class="sr-only"></h1>
    <!-- 티스토리 달력 모듈 -->
    
  «   2023/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
       
       
    
  

    <script>
      // 포스팅 올린 날짜에 색 주기
      passed = document.getElementsByClassName('cal_click');
      for(i=0;i<passed.length;i++){
      	day = parseInt(passed[i].href.split('/')[4].slice(6))
        // 연속으로 올렸는지 확인
        if(i>0 && day==temp+1){
          cnt += 1;
        } else {
          cnt = 0;
        }
        temp = day
        if(cnt<1){
          color = "#C5E1A5"
        } else if(cnt<2){
          color = "#AED581"
        } else if(cnt<3){
          color = "#9CCC65"
        } else if(cnt<4){
          color = "#8BC34A"
        } else if(cnt<5){
          color = "#7CB342"
        } else if(cnt<6){
          color = "#689F38"
        } else{
          color = "#558B2F"
        }
        document.getElementsByClassName('cal_click')[i].style.color = color;
        document.getElementsByClassName('cal_click')[i].style.background = color;
        // 날짜가 두자릿수인 경우 모양이 깨져서 1로 고정시킴
        passed[i].innerText=1;
      }
	// 아직 포스팅 하지 않은 날짜에도 모양을 주기 위해 <a> 삽입 후 1로 고정시킴
      notyet = document.getElementsByClassName('cal_day')
      for(i=0;i<notyet.length;i++){
        if(notyet[i].innerHTML.includes('</a>')){
          continue;
        } else {
          document.getElementsByClassName('cal_day')[i].innerHTML="<a>1</a>";
        }
      }
      // 이전 달로 가는 버튼
      document.getElementsByClassName('cal_month')[0].children[0].innerText="◀ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ";
      // 연월 확인
      mth = document.getElementsByClassName('cal_month')[0].children[1].innerText.split('/');
      if(mth[1][0]==0){
      	mth[1] = mth[1][1];
      }
      if(parseInt(mth[1])-1==0){
        premth = 12
        preyear = parseInt(mth[0])-1
      } else {
        premth = parseInt(mth[1])-1
        preyear = parseInt(mth[0])
      }
      if(parseInt(mth[1])+1==13){
        postmth = 1
        postyear = parseInt(mth[0])+1
      } else {
        postmth = parseInt(mth[1])+1
        postyear = parseInt(mth[0])
      }
      // 월 표기 방식
      switch(mth[1]){
        case '1':
          thismth = 'Jan'
          break
        case '2':
          thismth = 'Feb'
          break
        case '3':
          thismth = 'Mar'
          break
        case '4':
          thismth = 'Apr'
          break
        case '5':
          thismth = 'May'
          break
        case '6':
          thismth = 'Jun'
          break
        case '7':
          thismth = 'Jul'
          break
        case '8':
          thismth = 'Aug'
          break
        case '9':
          thismth = 'Sep'
          break
        case '10':
          thismth = 'Oct'
          break
        case '11':
          thismth = 'Nov'
          break
        case '12':
          thismth = 'Dec'
          break
      }
      document.getElementsByClassName('cal_month')[0].children[1].innerText = thismth;
      // 다음 달로 가는 버튼
      document.getElementsByClassName('cal_month')[0].children[2].innerText="ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ▶";
      // 버튼 및 월에 커서 올렸을 시 안내 문구 수정
      document.getElementsByClassName('cal_month')[0].children[0].setAttribute('title',preyear+'년 '+premth+'월의 잔디밭');
      document.getElementsByClassName('cal_month')[0].children[1].setAttribute('title',mth[0]+'년 '+mth[1]+'월의 잔디밭');
      document.getElementsByClassName('cal_month')[0].children[2].setAttribute('title',postyear+'년 '+postmth+'월의 잔디밭');
    </script>
  </div>
</s_sidebar_element>

 

위 코드를 복붙하고 나면 정렬이 잘 안되어있을 수도 있다.

코드가 좀 길어 귀찮을 수 있긴 하지만, 들여쓰기를 통해 정렬을 하고나면 기존에 있던 코드와 동일한 형식으로 갖춰질 것이다.

 

코드 복붙 및 정렬이 끝났다면 '적용'버튼을 꼭 눌러주자.

 

3. CSS 편집

HTML 수정 및 적용 버튼을 눌렀다면, HTML 옆에 있는 CSS 버튼 클릭을 통해 마찬가지로 아래 코드를  복사하여 코드 가장 아래에 붙여넣기 해준다.

/* calendar */
.calendar {-ms-user-select: none;-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;}
/* width = 달력의 너비를 결정하는 값*/
.calendar .tt-calendar {margin-top:8%;margin-bottom:10%;width:280px !important;border-collapse:collapse;}
.calendar .tt-calendar caption {font-size:1em;margin-bottom:10px;height:100%}
.calendar .tt-calendar caption a:first-child, .calendar .tt-calendar caption a:last-child {color:#DB8EB5; font-size:0.375em}
.calendar .tt-calendar caption a {vertical-align:middle;color:black;}
.calendar .tt-calendar th, .calendar .tt-calendar td {padding:5px 0; text-align:center;}
.calendar .tt-calendar th {display:none;}
/* font-size = 달력의 높이를 결정하는 값*/
.calendar .tt-calendar td {font-size:1.3em; color:#bbb;}
.calendar .tt-calendar .cal_click {display:inline-block; padding:2px 8px; border-radius:2px;}
.calendar .tt-calendar td a {display:inline-block; padding:2px 8px; background:#E0E0E0; color:#E0E0E0; border-radius:2px;}

 

위 코드 복붙 후에도 '적용'버튼을 눌러준다.

 

4. 블로그 새로고침

이제 블로그로 돌아와 새로고침 하면 잔디밭처럼 생긴 달력이 추가되었을 것이다.

하지만 모양이 다소 깨져 있을 수 있는데, 블로그 마다 스킨이 달라 사이즈가 깨져 있을 수 있다.

그런 경우는 다시 css 편집 페이지로 돌아와 위 코드에서 주석 처리해놓은 두줄에 대한 값 수정을 해주면 된다.

Q. 만약 HTML, CSS 적용 후 새로고침을 해도 잔디 밭이 보이지 않는다면?

A. 블로그 설정의 사이드 바에 들어가서 달력 모둘을 기본 설정에 추가해주도록 한다. 나 같은 경우는 새로 고침 후 자동으로 잔디밭이 생겼는데, 사이드 바의 순서가 리셋이 된 것인지 뒤죽박죽 되어 있었다.

 

이에 코드로 해결해야 하나? 생각이 들었으나, 그럴 필요 없이 사이드 바 수정 GUI에서 손 쉽게 사이드 바의 목록 순서를 변경할 수 있었다 ㅎㅎ