본문 바로가기
읽을 거리/블로그 이야기

링크된 곳에 파란 점선/밑줄 나오게 하는 html태그!!

by 파란토마토 2008. 1. 28.

제가 쓰는 스킨은 티스토리 최고의 인기스킨 공지용 블랙스킨!!

그런데 기본 스킨에서 공지용 블랙스킨으로 바꿨더니...
디자인은 깔끔한데 필수 기능 몇개가 사라졌더군요.

제일 마음에 안드는 것은
1. 링크가 전혀 표시되지 않는 것!!!
2. more/less 의 아이콘이 안나타나는 것!!!

부단한 연구와 노력 끝에 more/less 아이콘을 나오게 하는 건 성공해서
저번에 게시물도 올렸습니다.

티스토리 more/less(더보기, 감추기) 기능에 대해 알아보자!
티스토리, 이미지 직접 올리기로 more/less 아이콘 등록하기, 댓글창 버튼 넓히기 방법


하지만 여전히 링크는 해결되지 않았습니다.

저는 일일이 링크에 밑줄을 나오게 하거나 색깔을 바꾸었는데
귀찮기도 하고, 파랑실선이 계속 드러나 있으니 깔끔하지가 않더군요.


그러던 어느날, bluenlive님께서 무지몽매한 중생을 불쌍히 여기시어
하늘과 같이 높고 바다와 같이 넓으신 은혜를 베풀어 주시사~ 드디어 구원을 받았습니다.


지금은 제 블로그 게시물 내에 삽입된 관련글에 모두 빨간 점선이 나타나구요,
제 블로그 로고, 블로그 이미지, 공지, 사이드바 등 게시물이 있는 곳이면
"어디선가 누군가에 링크가 생기면~ 틀림없이 나타난다~ 홍반장~" 이 아니라;;

파란 줄이 생깁니다. 부러우시죠?? ^^


자자~ 침 닦으시고..
여러분도 할 수 있습니다~

조금 어렵지만 웹맹인 저도 했으니 여러분도 할 수 있습니다~


먼저 이것은 skin.html 이 아니라 style.css 에서 수정하셔야 합니다.

a:link - 링크가능한 곳을 나타내는 코드
a:visited - 한번 방문한 곳을 나타내는 코드
a:hover - 마우스를 가까이 대었을 때 밑줄 나오게 하는 코드

다음은 공지용 블랙스킨 style.CSS 파일의 기본 설정입니다. (본문이 아니라 사이드바의 설정)

/* 본문 공통 */
- 중략 -
a:link         { color:#333;  text-decoration:none ; }
a:visited    { color:#333;  text-decoration:none ; }
a:hover      { color:#666; text-decoration:underline ; }
a:active      { color:#666;  text-decoration:none ; }


사이드바 등의 링크에 마우스를 가까이 대면 파란 밑줄이 나오게 하는 명령어 코드입니다.
만약 빨간 민줄을 원하시면 blue를 red로 바꾸시면 됩니다.

저는 여기서 빨간 글자 부분을 아래와 같이↓↓↓↓↓↓ 수정해주었습니다.

a:link          { color:#333;  text-decoration:none; }
a:visited     { color:#333;  text-decoration:none; }
a:hover       { color:#666;  border-bottom-width: 1px; BORDER-BOTTOM-COLOR: blue; border-bottom-style: solid; }
a:active        { color:#666;  text-decoration:none; }

border-bottom-width: 1px; ㅡ 밑줄의 굵기
BORDER-BOTTOM-COLOR: blue;
ㅡ 밑줄의 색깔
border-bottom-style: solid;
  ㅡ 점선인지, 실선인지를 결정


저는 파랑색 실선이 나오도록 했습니다.
지금 제 블로그 아무 곳이나 마우스를 대보시면 파란 밑줄이 나올 것입니다.

현재 제 블로그는 복사가 안되므로, 보고 따라치기가 어려운 분들을 위해서 텍스트 문서를 첨부해드리겠습니다. 이것을 다운받으셔서 Style.css 에 복사해서 여러분 각자의 취향에 맞게 수정하시면 됩니다.

 

다음은 본문 내의 링크 표시 부분입니다.
이 곳도 처음에는 다음이( text-cecoratin:none; ) 기본적인 상태입니다.

.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 a:link       { color:#508; border-bottom: #ffc0c0 1px dotted;  text-decoration:none;}
.article a:visited  { color:#208; border-bottom: #ffc0c0 1px dotted; text-decoration:none;}
.article A:hover   { border-bottom-width: 1px; BORDER-BOTTOM-COLOR: blue; border-bottom-style: solid; }
.article a:active    { color:#666; text-decoration:none;}

저는 링크될 부분의 색상은 빨간 점선으로 했구요,
color:#508; border-bottom: #ffc0c0 1px dotted;  - 링크에서 표시될 색상선 굵기, 선 모양(점선) 

마우스를 가까이 댈 때는 위와 같이 파란 밑줄입니다.


현재 제 블로그는 복사가 안되므로, 보고 따라치기가 어려운 분들을 위해서 텍스트 문서를 첨부해드리겠습니다. 이것을 다운받으셔서 Style.css 에 복사해서 여러분 각자의 취향에 맞게 수정하시면 됩니다.



쉽죠? :)
링크가 제일 쉬웠어요..  책 한권 낼까요?ㅋㅋ