css - 링크 밑줄을 점선으로 표시하기

웹 페이지나 블로그에서 링크를 표시할 때 밑줄이 없으면 링크인지 알기 어렵고,
밑줄이 있으면 약간 촌스럽습니다. (지극히 주관적인 느낌입니다)

일반적으로 css를 이용해서 밑줄을 표시하거나,
링크의 밑줄을 아예 없애는 것(text-decoration:none),이 일반적입니다.

그런데, 약간 다른 방식으로 밑줄을 점선으로 표시할 수 있습니다.
이렇게 하면 링크의 표시가 명확해지면서도 깔끔해집니다.

---

일반적으로 css 파일에서 link에 대한 style은 아래와 같이 표시됩니다.

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

이 부분을 아래와 같이 바꿔주면 링크가 점선으로 바뀝니다.
두껍게 칠한 부분이 바뀐 부분입니다.

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

적용한 샘플은요? 바로 위의 샘플 아래에 희미한 분홍색 점선줄 보이시죠.
그게 샘플입니다. ^^;;;