[티스토리 스킨] 티스토리 Portfolio 스킨 header 배경 색 변경

티스토리 Portfolio 스킨 편집하기

 

블로그 관리 - 꾸미기 - 스킨편집

html 편집 클릭

 

 

 

스킨 헤더 배경 색 바꾸기

 

글 페이지를 볼 때 제목이 나오는 헤더부분의 배경색을 바꾸고자 한다.

현재는 회색으로 되어있다.

 

 

여기서 css를 선택한 후 css파일 안에 커서를 두고 cmd + f ( ctrl + f ) 로 inner_header를 입력해 찾는다.

 

 

 

기본적으로 아래와 같이 되어있다.

 

 

 

여기서 .area_view .article_header .inner_header 에 background-color를 추가한다. 

css 색상표는 아래 사이트를 참고해 선택한다.

 

 

css 색상표 참고 :

https://www.rapidtables.com/web/color/RGB_Color.html

 

 

background-color를 #FFD500 으로 변경했다. 적용을 누르고 새로고침을 누르면 변경결과를 확인할 수 있다.

 

 

 

 

변경한 색상이 제대로 나오지 않았다.

background-color를 추가한 윗 블록의 background-color rgba값을 변경하여 적용한 후 다시 새로고침을 하면 변경 색상의 결과가 제대로 나온다.

 

 

제목부분의 배경색이 바뀐것을 확인할 수 있다.

 

 

배경색을 css 색상표 사이트의 rgb값을 통해 rgba로 입력해도 된다.

#FFD500에 해당하는 rgb값을 입력해도 같은 결과를 볼 수 있다. 

rgba 의 a (alpha)는 투명도를 조절 할 수 있다.  (0 ~ 1의 값) 

글자색 변경은 아래 참고.

 

 

 

같은 rgb 값에 alpha 0.5 적용 결과 

 

 

투명도를 조절하는 옵션이 rgba의 alpha 말고도 opacity옵션이 있다.

하지만 이는 배경색에만 투명도를 적용하는 것이 아닌 글자까지 전부 투명도가 적용된다.

티스토리 스킨 제목 배경색에 투명도를 적용하고 싶으면 rgba를 사용하는게 낫겠다.

 

같은 rgb값에 opacity: 0.5를 적용한 결과

 

 

 

 

 

스킨 헤더 글자 색 바꾸기

 

이제 제목 글씨의 색도 변경해보고자 한다.

css 파일에 커서를 두고 위에서와 마찬가지로 cmd + f ( ctrl + f ) 로 info_text를 검색한다.

 

 

color가 기존에는 #fff 흰색으로 되어있는데 이부분을 원하는 색으로 변경한다.

역시 색을 변경한 후 적용하고 새로고침하면 변경 결과를 확인할 수 있다.

color의 색 역시 위와 같은 css 색상표 링크를 참고한다.

 

css 색상표 참고 :

https://www.rapidtables.com/web/color/RGB_Color.html

 

 

 

 

 

참고 :

https://www.rapidtables.com/web/color/RGB_Color.html

https://blog.siyeol.com/30