블로그기초/블로그 꾸미기

마크쿼리 스킨 카테고리 링크에 밑줄표시등 스타일 변경

Kay~ 2016. 1. 23. 10:21

 

마크쿼리 스킨 카테고리 접었을때 링크에 밑줄표시등 스타일 변경

마크쿼리 스킨은 카테고리가 기본적으로 펼쳐져 있습니다.

카테고리를 접기 위해서는 skin.html을 수정해야 합니다.

카테고리를 접거나 펼치기 위한 방법은 아래 글에서 언급했으니 참조하면됩니다.

 

- 마크쿼리스킨 등 티스토리 카테고리 접기 및 펼치기

- 티스토리 마크쿼리4 카테고리 글자크기 변경 방법

 

반응형웹스킨인 마크쿼리 스킨에서는 티스토리 카테고리를 접었을때 스타일을 설정하지 않았나봅니다.

그래서 카테고리를 접으니 수정해야 할곳이 한두군데가 아니네요!

글자크기 수정도 해야 하고 ..

카테고리에 마우스를 올렸을때 마우스포인터가 손가락모양으로 바뀌도록 해야하고

또 밑줄이 표시되도록 하기위해서 style.css를 수정해야 합니다.

하지만 수정하는것이 그리 쉽지많은 않습니다.

 

 

 

 

어렵게 어렵게 수정을 하긴 했습니다만,, 완벽하진 않네요!

수정방법은 다음과 같습니다.

 

아래와 같이 CSS 코드를 추가합니다.

 

.widget div:hover,.widget div:focus {cursor:pointer;text-decoration:underline;}

 

 

 

 

 

그러면 아래와 같이 카테고리위에 마우스를 올렸을때(롤오버시)

마우스 포인터가 손가락으로 바뀌고, 밑줄이 표시됩니다.

 

 

 

하지만 여기서 문제가 하나 생겼습니다.

첫번째카테고리(루트카테고리)는 이상이 없는데

서브카테고리(두번째카테고리)가 전체 다 밑줄이 표시되는것입니다.

 

이를 어떻게 해결해야 할지..

알 수가 없어서 수정을 못하고 있네요!

 

아무리 봐도 수정이 안되네요!
하다가 포기했습니다.

 

++ 해결

 

글을 쓰고 나서 다시 한번 도전을 해봤습니다.

이번에는 조금 귀찮긴 하지만 코드를 조금 더 넣어서 테스트해봤는데

해결이 되었네요!

이 방법이 아닌것 같은데 조금 찜찜하지만..

여튼간에 해결이 되었습니다.

 

방법은

 

.widget div:hover,.widget div:focus {cursor:pointer;text-decoration:underline;}

 

위 코드를 아래와 같이 수정하는것입니다.

 

.widget table table:hover, .widget table table:focus {cursor:pointer;text-decoration:underline;}

 

div 대신 table에 스타일을 지정한것이지요! ^^