티스토리 블로그 꾸미기(사이드바에 가로선 넣기)

 

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

 

이를 위해 [ 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;
}

 

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