CSS | 링크에 밑줄 없애는 방법

반응형

링크는 <a> 태그로 만듭니다.

기본 모양은 밑줄이 있는 것입니다.

요즘엔 밑줄이 있는 링크를 찾기 힘듭니다. 링크인지는 보통 색으로만 표현합니다.

링크의 밑줄을 없애는 방법은 CSS의 text-decoration 속성을 이용하는 것입니다.

속성값은 다음과 같습니다.

  • none : 선이 없음
  • line-through : 취소선
  • overline : 글자 위에 선
  • underline : 글자 아래에 선
  • initial : 기본값으로
  • inherit : 부모 요소의 속성값을 상속 받음

따라서 다음과 같이 하면 링크에서 밑줄이 사라집니다.

a { text-decoration: none; }

링크에 마우스를 올려도 밑줄이 나오지 않는데, 만약 링크에 마우스를 올렸을 때는 밑줄이 나오게 하려면 다음과 같이 하면 됩니다.

a:hover { text-decoration: underline; }

반응형

댓글(0)

Designed by JB FACTORY