티스토리 매거진(Magazine) 스킨의 CSS를 확인해 보면 이 스킨은 기본적으로 마우스가 링크 위에 올라갔을 때(hover) 색깔만 지정되어 있는 것 같다. 사실 이 스킨에서 링크 색깔을 찾으려고 CSS에서 ctrl + f로 열심히 찾아다녔는데, a:hover만 설정되어 있는 줄 모르고 검색이 잘 안 되는 바람에 한참 헤맸다...
뭐 아무튼 hover만 걸려있으면 본문에서 링크가 어디에 걸려있는지 잘 안 보인다. 물론 그 점이 장점이 될 수도 있고 단점이 될 수도 있는 거라 특별히 불편함이 없다면 그냥 두고 써도 된다.
아무튼, 매거진 스킨의 링크 관련 항목은 아래와 같이 들어가 있다. 마우스가 링크 위에 올라가 있을 때의 색깔만 바꾸고자 한다면 아래 #d94c4c를 원하는 색깔로 변경해 주면 된다.
/* 서브 상세페이지 - 본문 (Typography) */
.box_article .article_cont a:hover {
color: #d94c4c;
}
만약 방문 전 링크(link), 방문한 링크(visited), 마우스를 클릭했을 때(active)의 색상을 모두 지정하고 싶거나, 이 중 필요한 요소를 선택적으로 넣고 싶으면 a: 다음 부분을 원하는 요소로 바꾸어 색깔을 지정하면 된다.
주의할 점이 있다면 순서를 link, visited, hover, active로 적어 넣어야 한다는데 이를 어기면 스타일이 제대로 적용되지 않는다고 한다. 실험 삼아 티스토리 편집기로 hover 뒤에 visited를 넣어 보니 hover가 적용되지 않았다! (혹시라도 링크 색깔이 제대로 적용되지 않는다면 배치 순서가 틀렸는지 확인해 볼 필요가 있다)
.box_article .article_cont a:link {
color: #색깔;
}
.box_article .article_cont a:visited {
color: #색깔;
}
.box_article .article_cont a:hover {
color: #색깔;
}
.box_article .article_cont a:active {
color: #색깔;
}
사실 링크 색깔이 너무 현란하면 그 역시 읽기 불편하기 때문에 설정을 잘해줘야 하는 것 같다(이런 건 언제나 어려워). 나는 일단 아래와 같이 기본 a:hover 설정에 a:link는 같은 색깔로 추가하고 a:visited는 회색으로 지정해 보았다(현재 기준이고 나중 어떻게 바뀌어 있을지는 모름).
.box_article .article_cont a:link {
color: #d94c4c;
}
.box_article .article_cont a:visited {
color: #888888;
}
.box_article .article_cont a:hover {
color: #d94c4c;
}
이렇게 설정하면 방문 전 링크는 붉은색, 방문한 링크는 회색이 되며, 이미 방문한 링크(회색)라도 마우스가 위로 올라가면 붉은색으로 변하게 된다.