티스토리 사이드바에 있는 글자의 색상을 변경하는 방법에 대해 알아봅시다. 이번 주제의 흐름은 다음과 같습니다.
- 우클릭 검사로 요소 클래스 확인하기
- :root 의사-클래스(pseudo-class)로 글자색 설정하기
- var 함수로 글자색 맞춤 속성 설정하기
우클릭 검사로 요소 클래스 확인하기
사이드바에서 글자색을 변경하려는 요소를 찾아서 우클릭을 한 다음에 [검사] 버튼을 누릅니다. 그렇게 하면 크롬 개발자 도구가 활성화 되어 나타날 것입니다. [Styles]에서 해당 요소에 어떠한 스타일이 설정되어 있는지 확인할 수 있습니다. 요소의 클래스 등 정보를 확인하였으면 이제 HTML을 편집할 차례입니다. [블로그 관리 홈], [꾸미기], [스킨 편집], [HTML 편집]으로 이동하여 CSS탭을 선택해 주세요.
:root 의사 클래스로 글자색 설정하기
해당 요소를 바로 찾아서 글자색을 변경해도 되지만, 이번 예제에서는 :root 의사 클래스(pseudo class)를 활용해 보도록 하겠습니다. 루트에서 색상을 설정한 다음에 해당 값을 여러 요소에 지정해두면, 나중에 색상을 새롭게 변경하고 싶을 때, 이전에 설정하였던 요소를 하나하나 찾아가는 수고를 덜 수 있습니다. 특히 다크모드와 같은 기능의 추가를 고려한다면 나쁘지 않은 선택일 것입니다. 변수는 원하는 대로 설정하면 되며, 색상값은 16진수 RGB 또는 RGBA와 같은 함수 등을 이용하면 됩니다. 예제는 color-link-header라는 변수에 #000 색상을 설정하겠습니다.
--color-link-header: #000;var 함수로 글자색 맞춤 속성 설정하기
제일 처음에 검사로 찾았던 요소를 찾아갑니다. 기존에는 color: #777 이었는데 이 값을 var 함수를 통해 루트에서 지정하였던 색상으로 변경하도록 하겠습니다. /* */ 이 부분은 주석처리를 한 것으로 HTML이나 CSS에 영향을 주지 않는 코멘트입니다.
color: #777;
=> 주석 처리 및 var 함수로 변경 처리
color: var(--color-link-header);
위와 같이 사이드바 글자색이 변경된 것을 확인할 수 있습니다.