티스토리 블로그 #6. 반응형 스킨 글자색/배경색 바꾸기
반응형 스킨(현재 내가 쓰고 있는 스킨은 whatever다)의 글자색과 배경색을 바꿔보겠다.
바꾸는 이유는
카테고리는 블랙 색상이 마음에 드는데 배경까지 블랙인 건 답답해서다.
만약 배경색이 깝깝해서 배경색만 흰색으로 바꾼다? 하면 위의 사진에서 "블로그"라고 쓰여진 부분이 보이지 않을 거다. 그렇기 때문에 스킨 색상과 함께 수정이 필요한 위치의 글씨 색상도 변경해보기로 한다.
깝깝한 블로그 홈 화면에서 F12를 눌러보자. 백그라운드 컬러 버전이 (첫 번째 붉은 글씨) 블랙으로 되어 있는 것이 보인다. 이 부분을 아무 색상으로나 바꿔 어떤 느낌일지 확인할 수 있다. 물론 홈화면에서의 편집은 새로고침을 하면 다시 원래대로 돌아오기 때문에 안심하고 아무 색상으로 실험할 수 있다.
뭘 바꿔야 할지, 어떤 색으로 바꿔야 할 지 먼저 정해보고,
css 상 어느 위치에 있는지도 확인해야 한다.
CSS 상의 위치를 확인해보자.
썸네일의 카테고리 부분을 예시로 들면
이 버튼을 누르고 화면 아무 곳에 갖다대면 설정값?이 나온다.
숫자는 CSS 상 몇 번째 줄에 있는지에 대한 설명이고, color는 현재 설정된 색상이다.
대충 예시로 F12 화면에서 배경과 글씨 컬러를 바꾸면 어떨지 실험해봤다.
깔끔한 게 마음에 든다.
그럼 이제 바꿀 내용들을(배경 포함) css위치를 다 체크하고 어디 메모장 같은 곳에 미리 써두자.
되도록 한 번에 바꾸는 게 편하니까.
까먹어도 위 순서를 계속 반복하면 그만.
뭐를 어떤 색으로 할지 정했으면 티스토리 스킨 편집의 html 편집-css 창으로 가자.
css에서는 재료를 만들고, html에서는 그 만든 재료를 사용하거나 사용하지 않거나 해서 집을 만든다고 생각하면 쉽겠다.
나 빼고 다 알고 있는 내용이니까 각설하고 들어가자.
메모장에 적어둔 1813번째 줄은 블랙타입의 컬러를 설정하는 곳이다. 여기서 어두운 색상(000이나 낮은 숫자가 쓰여 있는 곳은 대부분 어두운 색상이다. 참고로 화이트는 #fff 혹은 #ffffff)을 이것저것 변경해본다.
여기서 중요한 것은 바꿀 때마다 적용 버튼을 남용하지 않는 것.
새로고침 버튼을 눌러서 바뀐 컬러를 확인해보자.
그렇게 해서 바뀐 현 화면.
원래 고치려던 것보다 더 많이 고쳐서 어찌어찌 이것저것 색을 많이 시도해보다가 투명 메뉴도 만들어보았다.
4자리 숫자에 마지막 숫자를 조절하면 투명도가 조절된다 오!
열심히 블로그를 뚜까뿌셔봤습니다!