사이드바에 위 사진과 같이 가로로 구분선을 넣고 싶었습니다.

 

이를 위해 [ HI! / 태그 / © 2025 Ashosho ] 가 모여있는 '메뉴' 라는 위젯의 CSS를 수정해야 합니다.

 

 

 

 

 

 

메뉴 위젯은 "widget"라는, 다른 위젯과 동일한 스타일이 적용되므로

메뉴 위젯에만 적용할 새 스타일을 만들어야 합니다.

 

HTML에서 메뉴 위젯이 위치한 곳을 찾아서,

적용할 클래스의 이름을 widget -> widget blog-menu으로 변경합니다.

그리고 CSS에서 이 widget blog-menu의 스타일을 정의하면 됩니다.

 

HTML에서 아래 부분을 찾아서

<s_sidebar_element>
	<div class="widget"><!-- Blog Menu -->
		[##_blog_menu_##(복사해서 사용하는경우 괄호를 포함한 이 문장을 지울것)]
	</div>
</s_sidebar_element>

 

다음과 같이 변경해줍니다.

<s_sidebar_element>
	<div class="widget blog-menu"> <!-- Blog Menu -->
		[##_blog_menu_##(복사해서 사용하는경우 괄호를 포함한 이 문장을 지울것)]
	</div>
</s_sidebar_element>

 

그리고 CSS에 다음을 추가합니다.

#sidebar .widget.blog-menu {
  padding-top: 10px;
  position: relative;
}

#sidebar .widget.blog-menu::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 30px;  /* 왼쪽 여백 */
  right: 30px; /* 오른쪽 여백 */
  border-top: 1px solid #ddd;
}

 

좌우 여백, 선의 색과 두께, 간격 등은 원하는 디자인에 맞게 수정하였습니다.

 

 

오늘은 블로그에 달력을 달아봤습니다. 

<설정-꾸미기-사이드바> 혹은 <플러그인>에 있을 줄 알았는데 없네요...

 

구글에서 "티스토리 블로그 달력" 을 검색하니

많은 분들께서 친절하게 방법을 알려주신 글이 나옵니다.

 

달력 달기 성공한 모습


1. HTML에서 코드 넣기

<스킨편집 - html편집>에서 <s_sidebar> </s_sidebar> 사이에 다음을 넣습니다.

<s_sidebar_element>
  <!-- 달력 -->
  <div class="calendar">
    [##_calendar_##(복사해서 사용하는경우 괄호를 포함한 이 문장을 지울것)] 
  </div>
</s_sidebar_element>

 

 

 

2. <꾸미기 - 사이드바 - 달력> 추가하기

 

 

3. CSS 추가

보기 좋게 하기 위해 아래를 <스킨편집 - html편집 - CSS>의 하단에 붙여넣어 원하는 색상이나 크기 등을 설정합니다.

/* calendar */
/* 달력 전체 박스의 여백 설정 (위 25px, 좌우 25px, 아래 3rem) */
.calendar {margin: 25px 25px 3rem 25px;}

/* 달력 테이블 전체 (현재 스타일 없음) */
.calendar .tt-calendar {}

/* 달력 상단의 년월 표시 부분 (폰트 크기, 아래 여백) */
.calendar .tt-calendar caption {font-size: 0.855em;margin-bottom: 0.7em;}

/* 달력 상단의 이전/다음 달 이동 화살표 (색상, 크기) */
.calendar .tt-calendar caption a:first-child, .calendar .tt-calendar caption a:last-child {color:#999; font-size:1.2em}

/* 달력 상단의 모든 링크 (화살표) 정렬 */
.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.700em;font-weight:normal;color: #555;}

/* 날짜 숫자의 기본 스타일 (폰트 크기, 색상) */
.calendar .tt-calendar td {font-size:0.75em;color: #7e8ba3;}

/* 현재 주를 표시하는 스타일 (현재 스타일 없음) */
.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: #bad3f5;color: #4c7dff;border-radius: 20%;width: 22px;height: 22px;line-height: 20px;}

/* 오늘 날짜의 글자 색상 */
.calendar .tt-calendar .cal_day4 {color: #00aecd;}

/* 오늘 날짜에 글이 있을 때의 스타일 (진한 파란 배경, 흰 글자) */
.calendar .tt-calendar .cal_day4 a {background: #2868f7;color: #fff;}

 

 

달력을 다니 글 쓴 날을 직관적으로 확인할 수 있어 좋고,

꾸준히 포스팅하는데 도움이 될 것 같습니다.

 


 

내친김에 아이콘과 파비콘도 만들어서 등록했습니다.


아이콘은 64x64 사이즈의 png 파일로 만들었고

파비콘은 확장자가 ico인데 픽셀메이터 프로에서는 지원하지 않는 것 같아서

구글에서 favicon이라고 검색 후 나온 아무 사이트에서 만들었습니다.

이미 만든 아이콘 파일을 넣으니까 1초도 안 돼서 만들어줍니다.

 

 

파비콘이 잘 등록된 모습

 

 

 

정보 열람의 비용은 이미 0에 수렴했고

이제 AI라는 막강한 툴까지 개인의 손에 쥐어지면서

앞으로 무능과 무식은 순전히 게으름의 결과로 받아들여지지 않을까 싶습니다.

 

과학자나 엔지니어들은 기술이 인간의 삶을 풍요롭게 만들어준다는 믿음을 갖고 있을까요.

전 요즘 신기술을 접할 때마다 빨리 익혀서 활용하지 않으면 도태될 것 같은 FOMO만 느껴지는데요.

 

 

 

 

 

오늘은 이곳 티스토리 블로그를 카페24에서 구매한 도메인과 연결해보았습니다.

후이즈, 가비아 등 다른 도메인 제공업체의 메뉴에도 'DNS관리 - CNAME 설정' 하는 항목이 있을 것입니다.

 

 

 

카페24는 이렇게 입력

 

 

 

티스토리 설정화면에서 '관리-블로그-개인 도메인 설정'에서 'www.구매한도메인' 를 입력

 

 

www.ashosho.com 으로 접속해보니 문제가 있네요.

 

 

카페24로 다시 들어가보니

30분에서 1시간 정도 걸린다길래 다른걸 하면서 시간을 보냈습니다.

 

 

 

 

하지만 30분 기다릴 한국인은 없겠죠?

2분 뒤에 다시 접속해보니 이렇게 나오네요.

그리고 주소창을 보니,

 

https에 취소선이 그어져있길래 s를 빼고 http://www.ashosho.com을 입력하니 잘 접속됩니다.

http와 https의 차이는 무엇일까요.

http는 웹사이트와 사용자간에 데이터를 주고받는 프로토콜이고 https는 여기에 암호화 기능을 더해 보안을 강화한 것입니다.

라고 하는데 기술적인건 솔직히 잘 모르겠고,

 

중요한 것은

1. 보안을 위해 https로도 접속이 가능해야 한다는 점.

2. 그러기 위해선 인증을 받아야 한다는 점.

입니다.

 

 

다시 티스토리 블로그 설정화면으로 들어가봅니다.

 

보안 접속 인증서가 발급 대기 중인에 발급을 받으면 https로도 접속이 가능할 것 같습니다.

보안 접속 인증서를 

그런데 몇 시간에서 7일 가량 소요가 된다니...사람이 직접 하는 것일까요??

 

 

 

넷플릭스에서 피지컬 아시아를 한 편 보고 나니 발급이 완료되었습니다.

참고로 인증서 발급의 주체는 티스토리(카카오)입니다.

 

발급 완료 메세지를 확인하고 https://www.ashosho.com으로 접속하니 잘 되네요. 

그런데 문제가 있습니다.

주소창에 그냥 ashosho.com이라고 치면 접속이 안됩니다.

원인을 찾아보니 위사진(티스토리 블로그 설정)에서 개인 도메인이라고 되어 있는 부분에 www.를 붙이면 안되는거였네요.

www를 적지 말았어야 합니다.

 

그래서 수정을 하려고 했더니 등록이 하루에 한번만 가능하다고 하네요.

이 글은 일단 임시저장 해놓고 내일 수정 후 다시 써야겠네요.


 

다음 날은 아니고 밤12시가 지나서 바로 수정을 했습니다.

드라마 한편 보고 나니 발급이 완료되어 있네요. 

드라마를 보면서 틈틈이 확인를 했는데 대략 1시간 정도 걸린 것 같습니다.

 

 

이제 주소창에 ashosho.com이라고 입력하면 바로 이곳 블로그로 연결이 됩니다.

정리하면

1. 도메인 업체에서 마음에 드는 도메인을 구매한다.
2. 도메인 업체에서 CNAME을 설정한다.
3. 티스토리 설정 화면에서 개인 도메인을 등록한다.
4. 보안 접속 인증서가 발급될 때까지 잠시 기다린다.
5. 주소창에 구매한도메인명을 입력하여 테스트 해본다.

 

 

 

+ Recent posts