[CSS] 링크 밑줄(Underline) 없애기

링크 밑줄(Underline) 없애기

개요

• <a> 태그를 사용할 때 href 옵션을 사용할 경우, 글자 밑에 밑줄(Underline)이 생기게 된다.
• 간단한게 CSS를 사용하여 이러한 밑줄을 없애줄 수 있다.

 

방법

• 적용시키고자 하는 요소의 text-decoration 속성을 none으로 지정해주면 된다.

item { text-decoration: none; }

 

적용 예

HTML

<a href="http://starrykss.tistory.com">블로그 홈</a>

 

CSS

a { text-decoration: none; }

 

참고

HTML 선언과 동시에 한 번에 적용시키기

• style 옵션을 사용하여 적용 시켜 준다.

<a href="http://starrykss.tistory.com" style="text-decoration:none">블로그 홈</a>

 

강제로 적용시키기

• important! 를 세미콜론(;) 앞에 추가해준다.

a { text-decoration: none !important; }

 

링크 위에 마우스 커서를 올렸을 때 밑줄이 나오지 않도록 하기

• 해당 요소의 :hover 속성에 적용해준다.

a:hover { text-decoration: none !important; }