티스토리 초간단 상단 헤드 색상 폰트 변경 (bookclub)

초기 티스토리 스킨을 사용하시면 상단 헤드가 흰색바탕에 기본폰트로 지정이 되어 있을 겁니다.

필자도 직접 설정하며 익힌 것이라 아래에 잘 정리해두었으니 참고해주세요

 

티스토리 상단 헤드 색상 변경

 

 

 PC 변경 방법 

티스토리 '스킨편집'으로 들어가줍니다. 

이후 아래와 같이 HTML 옆의 CSS를 클릭해줍니다.

 

헤드 부분 색상 변경

border-bottom 줄 밑에 background-color: #000; 이라는 소스를 입력해주시고 컬러코드는 본인이 원하는 색상으로 정합니다. (자동 컬러코드 추천 사이트를 링크로 남겼으니 하단 참조 해주세요)

 

(티스토리 스킨편집에서 'CSS' 수정 후 옆에 고침 누르면 변경되었는지 확인이 가능합니다.)

 

헤드 우측 돋보기의 배경색 변경

158번줄의 색상코드를 위에서 지정한 색으로 변경해줍니다.

 

 

 모바일 변경

 

PC를 모두 설정 하고 모바일로 보기를 통해 확인해보시면 모바일 부분은 적용이 안된게 확인이 되실 겁니다.

아래를 참고하여 적용 해주세요

 

2402~2404번째 줄 혹은 CSS에서 ctrl+F를 누르고 header h1을 검색 후 해당 컬러를 앞에서 지정한 컬러코드로 변경해줍니다. 

 

ctrl+F를 하여 gnb를 검색한 뒤 2460~2462번째에 있는 gnb의 height 밑 부분에 위와 같이 'background-color: #000; 를 입력하여 컬러코드를 지정해줍니다.

 

그리고 ctrl+F로 2426~2430번째의 header .util .menu 를 찾은 뒤(못찾으시겠으면 header .util .menu 아래에 outline: none; 이라고 되어 있는 header .util .menu를 찾으면 됩니다.)

 

outline: none; 밑에 background-color: #fff; 를 입력 해준 뒤 적용을 눌러 줍니다.

모두 마치신 뒤 확인 해보시면 PC, 모바일 모두 잘 적용된 것이 확인 되실겁니다.