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;}


적용한 샘플은요? 바로 위의 샘플 아래에 희미한 분홍색 점선줄 보이시죠.
그게 샘플입니다. ^^;;;
Trackback 1 Comment 20
  1. Favicon of http://blutom.com BlogIcon 파란토마토 2008.01.14 12:15 address edit & delete reply

    우와.. 이거 정말 유용한 정보입니다!!!!!!
    저 안그래도 스킨 바꾼 후에 링크 표시가 하나도 안나서 아주 불편해서 미치겠는데
    이런 유용한 정보를 주시다니!!!!!!!!!!!!!!! 감사합니다ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.01.14 12:18 address edit & delete

      와주셨네요.
      참, 2차 도메인 등록 축하드립니다.
      저도 하고싶어요 ^^;;;

  2. Favicon of http://blutom.com BlogIcon 파란토마토 2008.01.14 12:26 address edit & delete reply

    방명록을 봐주세요. 자세한 답변 드렸스빈다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.01.14 12:32 address edit & delete

      아항~ 추가할 것이면 고민할 것이 없네요. 고맙습니다.
      그리고, 혹시 MS에서 도메인 제공해주는 서비스 아세요?
      거기에 bluenlive.com를 등록했는데,
      그걸 tistory에 연결하는 방법은 없겠죠?

  3. Favicon of http://blutom.com BlogIcon 파란토마토 2008.01.14 12:34 address edit & delete reply

    그걸 티스토리에서 연결해주는 서비스는.. 특별한 게 아니라
    제 게시물에서 언급한 DNSever.com 이라는 회사입니다.

    그곳에 가셔서 회원가입하시고 차근차근 게시물대로 따라하시면 되요^^
    ms에 대한 건 잘 모르겠지만.. 일단 도메인을 등록하셨으면
    티스토리랑 그 도메인이랑 연결을 해주셔야 되거든요,,

    그 작업이 1. dnsever에 가서 도메인 등록하고, 관리하기에 입력,
    2. 네임서버 변경 작업..

    이 두가지 입니다.

  4. Favicon of http://blutom.com BlogIcon 파란토마토 2008.01.14 12:35 address edit & delete reply

    저도 궁금한게 있는데요,,
    저 html 링크 태그를 입력했더니.. 폴더에까지 빨간 밑줄이 나와서 좀 보기 싫은데 어떻게 해야할까요?

  5. Favicon of http://blutom.com BlogIcon 파란토마토 2008.01.14 12:36 address edit & delete reply

    본문에만 밑줄 나오게 하는 방법은 없을까요? ㅠㅠ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.01.14 12:44 address edit & delete

      본문의 스타일은 .article에서 지정하면 됩니다.
      본문 공통은 원래 거 그대로 두시고 .article 쪽을 바꾸면 됩니다.

      참고로, 제 style.css의 해당부분들은 아래와 같습니다.
      - 본문공통 -
      a:link { color:#666; text-decoration:none;}
      a:visited { color:#666; text-decoration:none;}
      a:hover { color:#666; border-bottom-width: 1px; BORDER-BOTTOM-COLOR: red; border-bottom-style: solid;}
      a:active { color:#666; text-decoration:none;}

      -article-
      .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;}

  6. Favicon of http://blutom.com BlogIcon 파란토마토 2008.01.14 13:02 address edit & delete reply

    감사합니다!! 이것이야 말로 제가 필요로 하던 바로 그 기능입니다ㅠㅠㅠ
    저는 본문에만 링크 적용했습니다. 다른 거까지 하니까 조금 지저분해보여서요.
    너무 너무 좋네요. 감사합니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.01.14 13:46 address edit & delete

      도움이 되었다니 기분 좋습니다. ^^;;

  7. Favicon of http://blutom.com BlogIcon 파란토마토 2008.01.27 17:29 address edit & delete reply

    bluenlive님, 여기에 대해서 또 묻게 되네요.ㅋ

    저는 이걸 지정하면 링크가 분홍 점선,
    마우스를 대면 파란 줄, 안대면 그대로인데요,,

    bluenlive님은 게시물 중간에 예로 드신게,
    그냥 있을때는 분홍점선으로 저랑 동일하신데요,

    1. 마우스를 대면 아래위로 노란 박스가 생깁니다. 왜 그런거죠?
    2. 이것 뿐 아니라 사이드바의 링크에도 마우스를 대면 파란 줄이 아래위로 생기네요.
    3. 또한 관련 카테고리에는 백그라운드 색상이 바뀌네요. 신기합니다.

    설명 좀 해주시면 감사하겠습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.01.27 17:31 address edit & delete

      메일로 보내드릴께요

  8. Favicon of http://BLUTOM.COM BlogIcon 파란토마토 2008.01.28 00:58 address edit & delete reply

    감사합니다. 메일 잘봤습니다.
    제가 링크에 대한 글을 하나 써놨는데 블루NLIVE을 링크했어요.
    메일 받고 나서 써논 거 수정하려니 좀..... 귀찮군요ㅡㅡ;;

    그 메일에 나온 내용은 나중에 추가하든지..
    아님 꼬리말로 추가하든지 해야겠습니다.

    지금 그거까지 하려니 너무 피곤해서요.
    암튼 도움 감사합니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.01.28 02:03 address edit & delete

      왜 링크를 지우십니까... ^^;;;
      영광입니다. 그대로 링크 살려둬 주세요...

      나중에 비슷한 내용으로 글 쓸 때 저도 트랙백 걸겠습니다.

  9. Favicon of http://reeni.net BlogIcon 리니♡ 2008.02.15 16:42 address edit & delete reply

    예쁘네요~~~ 하이퍼링크 아래 점선 표현 마음에 들어요.
    고마워요. bluenlive님 덕분에 저도 달게 되었네요~~ㅋ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.02.15 16:45 address edit & delete

      예쁘게 쓰시기 바랍니다.
      도움이 되었다니 기분 좋습니다...

  10. Favicon of http://lucifer625.tistory.com BlogIcon 이름이동기 2009.02.20 13:42 address edit & delete reply

    정말 찾던 자료인데 감사합니다 ^^
    그런데 한가지 문제점이 ...
    본문에만 적요을하였는데 올려놓은 사진 밑에도 희미하게 점선이 표시가 됩니다 ㅠㅠ
    도와주세용 ~ 0~ ㅋㅋㅋ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.02.20 18:49 address edit & delete

      링크 (a 태그)에 밑줄 속성을 부여하는 태그인데, 이미지 역시 링크니까 같이 적용되는 것입니다.

  11. Favicon of http://cdmanii.tistory.com BlogIcon cdmanii 2009.04.14 11:04 address edit & delete reply

    저도 궁금한게 하나 있는데요

    -생략-
    .test a:visited { color: #998f5b; font:normal 13px Dotum,'돋움'; text-decoration: underline; }

    으로 해서 한번 방문한 링크에 색을 주고 밑줄을 넣은 상태인데요.

    만약에 그 페이지를 새로 갱신할경우에 visited 를 초기화 시켜서 밑줄이 다시 없는상태로 처음부터 시작하게
    하는 방법이 있을까요? 이거 찾는중인데 애먹고있네요..

    즉 처음에 링크가 있고 그 링크를 누르면 새페이지가 뜨구요

    opener 페이지를 만약에 새로 불러들이거나 다른 글을 뛰웠을때는 같은 링크더라도 visited 가 적용이
    안되고 다시 처음부터 시작했으면 하거든요.. 혹시 조언해주실 부분있다면 좀 알려주세요 ㅠ

  12. Favicon of http://disport.tistory.com/ BlogIcon 보스토크 2010.05.07 20:44 address edit & delete reply

    덕분에 유용한 정보도 얻었어요...설치형블로그를 쓰고있는데 태그는 너무 어렵더라고요...감사드립니다.