[펌] 티스토리 스킨수정 - hyperlink 표시 방법

나는 dotted 대신에 underline 사용.

출처: http://hquest.tistory.com/13

티스토리 시작하면서 단순하고 깨끗한 스킨 - Tistory Studio (White) - 을 골랐더니,
작성한 글에서 연결(hyperlink) 표시가 나지 않고, 마우스를 올렸을 때만 밑줄이 나타났음.
물론 메뉴에서는 표시가 없는 것이 더 깔끔하지만, 본문에서는 불편한 느낌이 있었음.

어떻게 수정할까 생각을 하다가, 그냥 단순하게 점선과 역상으로 표시하였음.
이는 CSS(Cascading Style Sheets)를 수정하면 됨.


참고자료

CSS 공식 홈페이지 :
http://www.w3.org/Style/CSS/

CSS2 Reference : css property가 잘 정리되어 있음.
http://www.w3schools.com/css/css_reference.asp

CSS TUTORIAL - CSS Links : 수정에 필요한 내용이 여기에 있음!
http://www.echoecho.com/csslinks.htm

정리하면,

a:link, a:visited, a:hover, a:active 에서 아래의 속성 적용.
text-decoration: (none, underline, overline, line-through, blink)
border-bottom : (border-color, border-bottom-width, border-style)
border-bottom-color : (color, transparent)
border-bottom-width : (thin, medium, thick, length)
border-bottom-style :(none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset)


스킨수정

Admin - 스킨 - HTML/CSS 편집 - (2번째 창) style.css

이 스킨에는 link 표시 설정하는 곳이 15군데 있음. (본문 1곳, 달력 2곳, 사이드바 7곳, 내용 5곳)
content : #localog, #taglog, .titleWrap, .article, .actionTrail

한참 내려가면, 아래의 항목이 있음.

 .article a:link    { color:#666; text-decoration:none;}
 .article a:visited   { color:#666; text-decoration:none;}
 .article a:hover   { color:#666; text-decoration:underline;}
 .article a:active   { color:#666; text-decoration:none;}

.article은 작성한 글.
색상 변화 없이(#666) 마우스가 위에 왔을 때(hover)인 경우만 underline이 표시되게 되어 있음.
이것을 아래와 같이 수정.

 .article a:link    { border-bottom: #ef5612 1px dotted;}
 .article a:visited   { border-bottom: #ef5612 1px dotted;}
 .article a:hover   { background: #f7ab8a; border-bottom: none}
 .article a:active   { border-bottom: #ef5612 1px dotted;}

작성한 글의 색상이 여러가지 이므로, 원래 색상은 그대로 둠. (color 항목 삭제)
평상시에는 #ef5612 색의 1px 굵기 dotted 선을 아래에 표시하고, (border-bottom: #ef5612 1px dotted)
마우스가 위에 오면 글자 배경색을 바꾸면서 밑줄은 숨김. (본문 a:hover에 underline이 있으므로)

참로고, #ef5612는 Tistory logo 앞쪽의 풍선 색상 , 이 것의 한단계 연한 색상이 #f7ab8a.
점선 굵기를 안주거나, thin으로 주면 줄이 굵어 보임.

혹시 점선이 나타났다 말았다 하면, !important 명령을 주어 우선순위(priority)를 조정하면 됨.
(outsider님이 작성한 CSS 적용 우선순위 참조.)