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

 

이를 위해 [ 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만 느껴지는데요.

 

 

 

 

 

오늘은 파이썬의 기초를 공부했습니다.

 

1. 슬라이싱 : 문자열의 일부를 가져오는 것

juminNum = "830276-1234569"
print(juminNum[:][2:6][-2])

=> 7

위 코드의 결과는 7입니다. 

juminNum[:]은 830276-1234569, 즉 문자열 전체를 가져오고

juminNum[:][2:6]는 juminNum[:]의 [2:6]에 해당하는 0276을 가져옵니다.

juminNum[:][2:6]는 0276의 인덱스 -2 값은 7입니다.

 


 

2. 대소문자

Word = "PYthon3"
WORD = Word.upper()
word = Word.lower()
print(Word, WORD, word)

=> PYthon3 PYTHON3 python3

여기서 두가지 사실을 알 수 있습니다.

1. upper와 lower 명령어를 통해 문자열을 대문자와 소문자로 변경할 수 있다.

2. 파이썬의 변수는 대소문자를 구분한다.

 


 

3. 문자열 변경 : 대부분의 문서 편집 툴에 있는  "찾기 및 대치"에 해당

word = "apple"
word = word.replace("p", "q")
print(word)

=> aqqle

 


4. 파이썬에서의 메모리 관리 방식

더보기
더보기

파이썬의 데이터 저장과 변수 바인딩

핵심 개념

1. 변수는 상자가 아니라 '라벨(이름표)'이다

파이썬에서 변수는 데이터를 직접 담는 상자가 아니에요. 메모리 어딘가에 있는 데이터 객체에 붙이는 이름표 같은 거죠.

word = 'apple'  
# 'apple'이라는 문자열 객체가 메모리 어딘가(주소: 4373983536)에 생성됨
# word는 그 객체를 가리키는 이름표

코드 분석

# 1단계
word = 'apple'
print(id(word))  # 4373983536
# 메모리에 'apple' 객체 생성, word가 이를 가리킴

# 2단계
word = word.replace("p", "q")
print(id(word))  # 4378922672 (주소 변경!)
# 'apple'은 불변 객체라서 수정 불가
# 'aqqle'이라는 새로운 객체 생성
# word가 새 객체를 가리키도록 재바인딩

# 3단계
word = 'apple'
print(id(word))  # 4373983536 (원래 주소로 복귀!)
# 파이썬이 이미 메모리에 있는 'apple' 객체를 재사용
# 이것이 "문자열 인터닝(String Interning)"

# 4단계
word = 'banana'
print(id(word))  # 4378922288 (다른 주소)
# 'banana'는 새로운 객체이므로 다른 주소

# 5단계
word = 'apple'
print(id(word))  # 4373983536 (다시 같은 주소!)
# 또다시 기존 'apple' 객체 재사용

중요한 특징들

1. 문자열은 불변(Immutable)이다

word = 'apple'
# word[0] = 'A'  # 에러 발생! 문자열은 수정 불가
word = 'Apple'   # 새로운 객체 생성 후 재바인딩만 가능

2. 문자열 인터닝 (String Interning) 파이썬은 같은 문자열을 여러 번 만들지 않고 재사용해요. 메모리 절약을 위해서죠.

a = 'apple'
b = 'apple'
print(id(a))  # 4373983536
print(id(b))  # 4373983536 (같은 주소!)
print(a is b)  # True (같은 객체를 가리킴)

3. 재바인딩(Rebinding) 변수에 새 값을 할당하면 다른 객체를 가리키게 돼요.

word = 'apple'   # word → 'apple' 객체
word = 'banana'  # word → 'banana' 객체 (다른 객체!)

시각적 이해

메모리 상황:

[주소: 4373983536]  'apple' ◄── word (1단계, 3단계, 5단계)
[주소: 4378922672]  'aqqle' ◄── word (2단계)
[주소: 4378922288]  'banana' ◄── word (4단계)

실습으로 확인하기

# 여러 변수가 같은 객체를 가리킬 수 있음
a = 'hello'
b = 'hello'
c = 'hello'
print(id(a), id(b), id(c))  # 모두 같은 주소!

# 리스트는 가변(mutable)이라서 다르게 동작
list1 = [1, 2, 3]
list2 = [1, 2, 3]
print(id(list1), id(list2))  # 다른 주소!

핵심 정리

  1. 변수 = 이름표: 변수는 객체를 가리키는 참조일 뿐
  2. 문자열 = 불변: 수정하면 새 객체 생성
  3. 인터닝: 같은 문자열은 재사용됨
  4. id(): 객체의 메모리 주소(정체성)를 반환

 

+ Recent posts