[티스토리 블로그 꾸미기] 카테고리 글자색 및 테두리 색상 변경하기

이전 글인 카테고리 추가하기에 이어, 이번에는 메인 카테고리와 서브 카테고리의 글자색 변경 및 서브 카테고리 테두리 색상 변경 방법을 소개해드리겠습니다.

티스토리 '북클럽' 스킨을 기준으로 진행합니다.

 

스킨 편집 들어가기

관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. ;새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

꾸미기 탭 안에 스킨 편집을 누른 후 새로운 창이 열리면 오른쪽 상단에 html 편집을 클릭합니다.

 

CSS 코드 바꾸기

우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.

html 편집 창에서 우측 상단에 HTML ❘ CSS ❘ 파일업로드 중에 CSS를 클릭합니다.

 

메인 카테고리 글자색 변경하기

 

사이드바에 추가한 카테고리의 기본 설정인 연한 검은색과 연한 회색으로 되어 있는 것을 확인할 수 있습니다.

기본 설정인 연한 검은색으로 되어 있는 것을 확인합니다.

CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 '.sidebar .category ul li a'를 입력합니다. 보통 2167번째 줄에 있습니다.

.sidebar .category ul li a

CSS 파일에서 검색창에 '.sidebar .category ul li a'를 검색하세요.

아래 코드를 복사하여 '.sidebar .category ul li a'에 붙여 넣거나, 검은색 코드인 #333으로 변경합니다.

.sidebar .category ul li a {
  color: #333;
}

코드를 복사해서 붙여넣거나, 검은색 코드인 #333으로만 변경합니다.

변경 후 미리보기로 확인한 다음에 저장합니다. (연한 검은색에서 검은색으로 변경된 것을 확인합니다.)

메인 카테고리 글자색이 적용되었는지를 확인합니다.

 

서브 카테고리 글자색 변경하기

 

CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 '.sidebar .category ul li ul li ul li a'를 입력합니다. 보통 2214번째 줄에 있습니다.

.sidebar .category ul li ul li ul li a

CSS 파일에서 검색창에 '.sidebar .category ul li ul li ul li a'를 검색하세요.

아래 코드를 복사하여 '.sidebar .category ul li ul li ul li a'에 붙여 넣거나, 연한 검은색 코드인 #555으로 변경합니다. 메인 카테고리와 구분을 주기 위해 연한 검은색으로 진행하니, 통일감을 주고 싶다면 같은 색상 코드인 #333으로 해도 됩니다.

.sidebar .category ul li ul li ul li a {
  color: #555;
}

코드를 복사해서 붙여넣거나, 검은색 코드인 #555으로만 변경합니다.

변경 후 미리보기로 확인한 다음에 저장합니다.

서브 카테고리 글자색이 적용되었는지를 확인합니다.

 

서브 카테고리 실선 색상 변경하기

 

서브 카테고리 실선 색상이 기본 설정인 연한 회색으로 되어 있는 것을 확인할 수 있습니다.

기본 설정이 연한 회색으로 되어 있는 것을 확인할 수 있습니다.

CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 '.sidebar .category ul li ul li ul li:before'를 입력합니다. 보통 2199번째 줄에 있습니다.

.sidebar .category ul li ul li ul li:before

CSS 파일에서 검색창에 '.sidebar .category ul li ul li ul li:before'를 검색하세요.

아래 코드를 복사해서 '.sidebar .category ul li ul li ul li:before'에 붙여넣거나, 색상 코드만 변경합니다. 원하는 색이 있다면 여기에서 색상을 찾아보세요.

.sidebar .category ul li ul li ul li:before {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: rgb(4, 190, 184);
}

코드를 복사해서 붙여넣거나, 색상 코드만 변경합니다.

변경 후 미리보기로 확인한 다음에 저장합니다.

서브 카테고리 실선이 적용되었는지를 확인합니다.

 

다음 글 예고

다음 글에서는 커버 이미지를 고정하는 방법에 대해서 소개해드리겠습니다. 커버 이미지를 고정 방법에는 여러가지가 있지만, 그 중 두가지 방법을 소개해드리겠습니다.