티스토리 꾸미기! 스킨 사이드바에 달력(캘린더)을 삽입

티스토리 꾸미기! 달력 넣기

  티스토리 블로그 꾸미기 초보자인 제가 1일 2포스팅을 결심하기에 앞서 뭔가 '표시'를 원했어요! 그러던 중 '캘린더(달력)'이라는 것을 알게 되었는데요! 와 정말 유용합니다. 포스팅 한날에는 배경이 채워지고 포스팅 안 한 날은 그냥 하얗게.. 오 뭔가 운동 한 날 안 한 날 체크 하는 느낌이 들었습니다. 때문에 이걸 제 티스토리 스킨 꾸미기에 사용하고 싶었습니다.

달력(캘린더) HTML 및 CSS 출처 :  https://tistory.noo9ya.com/67

우선 제 포스팅에는 HTML과 CSS를 적지 않겠습니다! 제가 만든게 아니기 때문에 위 블로그에서 태그를 복사하시면 됩니다!

사이드바 적용 모습

  제가 한 건 캘린더 제목 변경, 글씨 크기 조절, 각 색상 변경 등을 하였습니다. 제가 알려드릴거는 어떤걸 어떻게 바꿨는지 입니다! 물론 저도 한 지 몇 시간 지나서 조금 까먹긴 했습니다. 초보자가 티스토리 꾸미기하려고 참 애썼습니다. 그래도 이게 있으니 앞으로 검은색으로 채우려고 1일 2포스팅에 대한 노력을 할 것 같네요. 총 방문자가 벌써 97명이에요! 곧 100명!!! 뭔가 뿌듯하네요 ㅋㅋ 우선 적용법을 알아볼까요?

html에 붙여넣기

HTML 태그 붙여넣기

  아까 링크 걸었던 사이트에서 'skin.html 사이드바 달력 코드'를 복사 하신 뒤 '스킨 편집'에 들어가셔서 HTML 편집에 들어오신 뒤 Ctrl+F(찾기)로 'sidebar'를 검색하시면 하단에 달력, 소셜 채널, 방문자 등등 메뉴가 있습니다. 그 중 메뉴별 사이에 </s_sidebar 어쩌고저쩌고> 아래에 붙여넣기 하시면 됩니다. <s_sidebar 어쩌고>는 시작이며, </s_sidebar 저쩌고>는 끝입니다. 그러니까 '/'이걸 잘 보시고 붙여넣기 하시면 됩니다.

사이드바 메뉴

사이드바 메뉴 등록

  HTML 붙여넣기를 하셨다면 사이드바 메뉴로 이동하셔서 '달력'을 추가하시면 됩니다! 캘린더라고 되어있을 수도 있대요! 이걸 원하는 위치에 배치해보세요.

html 붙여넣기 이후 모습

달력의 쌩얼

  이렇게 나옵니다. 자 우리는 이제 '꾸미기'에 돌입합니다. CSS로 스타일을 바꾼다는게 매력이 있습니다. 블로그 꾸미기는 파도파도 끝이 없는데 굉장히 재밌네요 ㅎㅎ 집 인테리어 하는 느낌이 듭니다. 그것도 무료로!! 자 우리는 이제 CSS를 고치러 가봅시다!

CSS 붙여넣기

CSS 모듈 붙여넣기

  아까 링크로 이동하셔서 'style.css 사이드바 달력 모듈 스타일 추가'를 복사 하신 뒤에 CSS로 이동해줍니다. 그리고 아까처럼 'sidebar'를 찾아줍니다. 그러면 영어가 또 엄청 나오죠. 아까 저는 HTML에서 '전체 방문자'와 '소셜 채널'사이에 태그를 넣었기 때문에 CSS에서도 편하게 '.count(방문자 수)', '.social-channel(소셜채널)' 사이에 붙여넣기 했습니다. 이로서 여러분이 원하시는 티스토리 블로그 스킨 꾸미기가 완성 되었습니다. 달력(캘린더)를 잘 삽입하셨나요?

CSS 붙여넣기 후 달력 모습

캘린더 메이크업 해주기

  오 이뻐졌어요! CSS의 유무가 이렇게 크다니.. 이제 나머지는 여러분의 몫입니다. 하지만 이렇게 포스팅을 끝내면 아쉽겠죠? 조금 더 알기 쉽도록 CSS 바꾸는 법을 알려드리겠습니다! 저도 여기서 좀 헤맸습니다.

CSS 설명

CSS 초보자의 설명 

  적는다고 적었는데 틀린게 있을 수도 있습니다. 대부분 숫자만 바꾸시는걸 추천드립니다. 참고로 색상들은 대부분 #fff 이런식으로 되어있는데 인터넷에서 HTML 색상표 검색해보시면 #414141 이런 식으로 6자리 숫자가 나옵니다. 6자리도 됩니다. 그리고 혹시 빨강, 파랑 등 쉬운 색상이라면 '#'을 지우시고 'red', 'blue' 등으로 입력하셔도 됩니다. 하나하나 배워가니까 재밌네요 ㅎㅎ 학교 다닐 때도 이렇게 공부했더라면.. 아 이렇게 공부했었네요. 벼락치기로 ㅎㅎ 이렇게 정리를 하니 저도 뭔가 공부가 되고 뿌듯합니다. 특히 border-radius 이건 처음 보는데 종종 써먹어야겠어요

CSS 수정 후 달력

달력 제목 바꾸기

  이렇게도 이쁘지만 저 '캘린더' 크기와 왼쪽 정렬은 바꾸고 싶더라구요. 근데 CSS에 아무리 찾아봐도 없었습니다. 이제 HTML로 다시 넘어갑니다. 하 꿀잼

HTML 수정할 곳

    딱 보시면 아시겠죠?! 저는 잘 몰랐습니다. font-size 뭐 이런 것도 없으니 헷갈릴만하죠. h1은 '제목1'인 셈입니다.

HTML 변경

  1>2>3 순으로 크기가 결정됩니다. 고로 크기를 줄이려고 h2로 바꿨습니다. 물론 뒤에도 </h2>로 변경했습니다. 그리고 CALENDAR라는 영어를 제가 원하는 문구로 바꿨습니다. 그리고 앞 뒤로 <center>(중앙정렬) </center>를 넣었습니다. 물론 저 위치에 넣는게 정석이 아닐 수 있지만 일단 되니까 이렇게 두고 있습니다. 히히

완성본

완성본

  짜잔~ 이렇게 완성된 제 첫 달력입니다. 정말 html, css 원본 태그 만들어 주신 '누구야'님께 다시 한 번 감사드립니다. 만드는 법은 너무 어려우니 수정하는 걸 배워서 이렇게 조금 씩 바꿀 수 있어서 너무 좋습니다. 29일에 흑색으로 표시된 이유는 '예약글'이 있어서 그럽니다. 다른 사람한테는 표시 안되니 걱정 뚝! 

아 티스토리 꾸미기 너무 재밌다