티스토리(Tistory) Whatever 스킨 / 홈, 로고, 햄버거 메뉴,타이틀 글씨 컬러 변경 방법 - CSS 기초

티스토리를 본격 사용하게되면서, 나의 브랜딩 컬러인 보라색으로 로고나 햄버거 메뉴, 타이틀 등을 바꾸고 싶었다. 네이버 블로그에서는 '세부디자인'을 이용해서 그런 부분을 자유롭게 바꿀 수 있는 자율성이 있지만, 티스토리는 Html과 CSS를 사용해서 바꿔야 한다. 초보자들은 어렵다는 점에서 단점이지만, 그만큼 내가 원하는 대로 코드 사용이 자유롭다는 점에서는 장점이다.

 

디자이너 포트폴리오 웹사이트 만들기 (4) / Html, CSS 완전 기본 기초 배우기 / 추천 유튜브와 블로그

^ 기초 배우는 방법 포스팅

나는 Html과 CSS를 거의 몰랐기에 티스토리의 그런 부분이 단점일 수 있었지만, 내가 나의 웹사이트를 워드프레스로 만들게되면서 어차피 이 부분을 공부했어야만 했다. 공부라고 하기에도 거창하지만... 유튜브 보고 정말 기본 구조만 이해한 정도? 그래도 기초, 기본 구조를 이해하면 이후부터는 대충 감으로, 구글링으로 헤쳐나갈 수 있는 것 같다. 역시 부딪히며 배워야 느는 스타일...

 

사실 이부분에서 구글 블로그와 장단점이 갈리긴 한다. 구글블로그는 위와 같이 타이틀 같은 세부 컬러를 바꿀 수 있는 기능이 있다ㅠㅠ

 

---

1. 네비게이션 바 안의 헤더와 햄버거 메뉴 (태블릿과 모바일)

맨 윗 부분이 네비게이션 바이다. 그 안에 저 헤더와 햄버거 메뉴 컬러를 바꾸고 싶었다. Whatever스킨의 메인컬러는 #7a583a이고, 난 이 컬러를 보라색인 #6A19FF 컬러로 바꾸고 싶었다.

 

티스토리는 이렇게 HTML, CSS편집기와 사이트가 나란히 놓여있어서 편집하기 매우 편하다. 나는 저 Vivi Shin이 어떤 이름으로 CSS에 존재하는지 몰라서, 일일이 만지고 새로고침해보면서 알아낼 수 있었다. Ctrl+F로 텍스트를 찾아가면서 하면된다.

 

헤더 타이틀(좌) 과 햄버거 메뉴(우)

우선 Vivi Shin 부분은 #header h1 부분이다. 저 부분의 컬러를 #7a583a에서 원하는 컬러(6A19FF)코드로 넣으면 된다! 그리고 햄버거 메뉴 찾는게 정말 오래걸렸다... 저걸 어떻게 부르는지 모르니까 HTML도 뒤지고 영상도 보면서 겨우 찾았는데, #header. mobile-menu로 명명되어 있었다... 그래서 저 부분의 컬러를 #6A19FF로 바꿔주었다.

 

햄버거 메뉴 찾을 때 이 영상을 보고 바로 찾을 수 있었다. 기본적으로 어떻게 만들어지는지 이해를 하니까 바로 찾기가 쉽더라. 처음엔 햄버거 메뉴가 어떤 이미지로 구성되어있나 싶어서 이미지 링크 부분을 뒤졌는데, 그게아니고 다 일일이 CSS로 만든거여서 컬러만 바꾸면 되는 것이었다.

 

 

그러면 이렇게 완성! 진짜 햄버거 메뉴 바꾸고 너무 좋아서 소리나옴... 이런 간단한거도 초보자에겐 뿌듯한 상황이다. 티스토리는 반응형이기 때문에, 햄버거메뉴는 태블릿이나 모바일에서 보여지는 것이다.

 

2. 메뉴 텍스트 Hover 컬러와 밑줄 컬러 바꾸기 (웹)

 

웹에서 보았을 때는 이렇게 카테고리별로 메뉴에 등장한다. Hover란, 텍스트 등에 마우스 커서를 올리면 바뀌는 효과나 컬러를 의미한다. Whatever스킨의 기본 설정은 텍스트 호버 컬러도 갈색이고 밑줄 컬러도 갈색이라 이 부분도 바꿨다.

 

저 부분은 gnb 부분에서 컬러 코드를 수정하면된다. gnb가 무엇인지 검색해보니 Global Navigation Bar로, 사이트 전반에서 보이는 네비게이션을 칭한다. (참고 : http://blog.daum.net/angelinus/7087359)

#gnd ul li a:hover 부분이 호버 텍스트 부분이고, #gnd ul li a:hover:after 부분이 밑줄이니 둘다 컬러 부분을 바꿔주면된다.

 

 

3. 섹션 별 타이틀 컬러 바꾸기

 

- 스페셜 컨텐츠

 

스페셜 컨텐츠 전과 후

이 부분은 스페셜 컨텐츠라는 섹션이다. 여기도 동일하게 컬러만 바꿔주면되고, 나는 Special로 검색해서 찾았다.

 

 

- 와이드 판넬

와이드판넬 전과 후

다음도 동일하다. wide-panel로 찾아서 컬러를 바꿔주면 된다.

 

 

- 더보기 버튼

버튼 전과 후1, 2(호버)

더보기 버튼도 컬러를 바꿔주기로. 테두리를 바꿨고 호버 시 컬러도 바꿨다. 아 근데... 저 화살표 컬러만 못바꿨다. 진짜 별에별 방법을 다 써봐도 해결이 안됐다. 이미지로 돼있는 것 같아서 이미지에서 컬러도 다 수정해보고 했는데도 안된다. 진짜 답답. 혹시 누가 아시면 방법을 좀 공유해주세요...

버튼은 btn을 검색하면 되고, 마찬가지로 컬러 해당 부분을 수정해준다. (연보라 박스 표시)

아 저기 .btn : after가 분명히 화살표 부분인데... url부분의 이미지를 수정했는데도 바뀌지가 않는다. 왜그럴까.

 

4. 포스팅 타이틀 컬러 바꾸기

 

포스팅 타이틀 전과 후

마지막으로 포스팅 내부의 타이틀 컬러. hgroup을 검색하면된다. border-bottom 부분이 밑줄이다.

 

 

---

 

아직 전체 다 세세하게 컬러 톤을 바꾸려면 시간이 더 걸릴 것 같다. 그리고 아이콘이 바뀌지 않아서 이 부분도 계속해서 해결해봐야한다. 우선은 눈에 가장 띄는 네비게이션과 타이틀 등의 컬러를 바꿔놓으니 속이 시원하긴하다. 이 정보는 검색하니 너무 안나와서 일일이 내가 찾아보는 방법 뿐이었다. 나와같은 고민을 하는 누군가에게 도움이 됐으면 좋겠다.