티스토리 카테고리 마우스 오버 효과 주기, 티스토리 메뉴 마우스 올리면 색 바뀌게 하는 방법

안녕하세요. 오늘은 티스토리 메뉴 또는 카테고리의 마우스 커서를 대면, 색이 변하는 효과를 주는 마우스 오버 효과에 대해 알아보겠습니다. 다른 분들 블로그를 돌아다니다보면, 다양하고 멋진 스킨을 가지고 계신 분들이 많습니다.

 

제 블로그의 기본 whatever 스킨에도 마우스 오버 효과가 기본적으로 설치되어 있습니다. 그러나, Whatever 스킨의 메인 컬러가 브라운이다보니, 중요한 부분이 다 브라운으로 강조됩니다. 그래서 이번에는 티스토리 메뉴나 카테고리 위에 마우스를 올리면 색이 바뀌는 것을 유지하되, 색상을 변경해보겠습니다.

 

1. 먼저, 완성품을 보여드립니다.

마우스 커서를 대면, 시간의 갤러리라는 메뉴가 보라색으로 바뀝니다. 그리고 그 아래에 그 메뉴를 강조하는 긴 막대 모양이 모입니다. 그 부분도 색을 바꿔주어야 하니 잘 따라오시기 바랍니다. 저는 전체적인 컬러를 보라색으로 주었는데, 원하시는 컬러가 있다면 다른 색으로 변경해보시기 바랍니다.

 

 

2. 관리자모드에서 html편집, css에 들어간다.

관리자 모드에서 html까지 가시는 것은 이제 다 아실 것이라고 생각됩니다. 이번에도 css로 들어갑니다. 그리고, 아래와 같은 부분을 찾아봅니다.

 

찾기 메뉴에서 hover를 검색해서 보시거나, 아니면 175행쯤에 보시면 비슷한 코드를 보실 수 있을 겁니다. 지난 번에도 이야기했듯이 html 색상코드는 #000000 이렇게 표기됩니다. 

 

위 그림에서 네모를 한 곳에 #000000 부분을 자신이 원하는 색상으로 변경하여 넣어주면 됩니다. 

 

html 색상 코드표를 모르시겠다고요? 걱정 마세요.

▼▼▼ 아래의 제가 쓴 글이 있으니, 들어가서 보다보시면 html 색상 코드로 가는 링크가 있습니다. 한번 살펴보시고, 원하는 색을 선택하여 복사해서 사용하세요.

 

- HTML 색상 코드표, 티스토리 블로그 이름 색상 및 크기 변경하는 방법, css 주석 다는 방법

티스토리 블로그 이름 색상 및 크기 변경하는 방법, css 주석 다는 방법

 

3. HTML 색상 코드를 변경한 다음 눌러주시면, 아래와 같은 변화가 생깁니다. 

 

마우스 커서를 올려놓으면 글자가 바뀌는 마우스 오버 효과는 생겼지만, 그 아래에 브라운 색의 바가 여전히 보입니다. 그래서 CSS를 살펴보았더니, 저 부분도 색상 코드만 바꾸어주면 우리가 원하는 색으로 변경을 할 수 있다는 것을 알게 되었습니다.

 

 

4. 다시 관리자모드에서 html편집, css에 들어간다.

아래 그림에 네모로 표시되어 있는 부분을 검색하여, 색상 코드를 변경해주고 적용을 누르면 됩니다.

 

 

위에 hover color는 제 스킨에서 사용하고 있는 보라색입니다. 그리고 아래에 background-color의 코드는 브라운입니다. 이 부분을 저는 똑같이 보라색 html 색상 코드로 맞추어주었습니다. 모두 바꾸신 후에는 적용을 꼭 눌러주시고, 자신의 홈페이지에서 잘 적용되었는지 확인해보시기 바랍니다.

 

 

5. 완성

마우스 오버와 hover효과를 주니, 조금 더 통일감이 있는 블로그 레이아웃이 되었습니다. 앞으로도 더 손 볼 것이 많지만, 차근차근 해나가도록 해야겠습니다.

 

 

읽어주셔서 고맙습니다. ^^