텍스트 링크에 밑줄 없애는 법 CSS

텍스트 링크에 밑줄 없앨 수도 있고 효과를 추가할 수도 있습니다.

텍스트 링크

티스토리 TIP : 간단하게 링크가 걸린 글에 밑줄을 없애는 방법입니다.

기본적으로 링크가 걸리면 밑줄이 생기지만, 요즘은 디자인적으로도 밑줄을 없애는 추세입니다.
링크의 경우 별도 컬러와 볼드 처리를 통해서 강조합니다.

 

1. 적용방법

링크를 없애는 방법은 CSS 편집을 열어서 코드를 추가해주면 됩니다.

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

한 줄을 입력하면 텍스트에 걸린 링크를 없앨 수 있습니다.
복잡한 코드로 적용이 안될 경우에 important를 추가해주면 됩니다.

a { text-decoration: none!important; }

 

2. 텍스트 링크 효과

CSS를 어떻게 구성하느냐에 따라 더 다이내믹하고 멋진 디자인을 연출할 수 있습니다.
텍스트 링크를 강조하게 되면 클릭률을 높일 수 있다는 장점이 있습니다.

 

같이보기

스크롤바 없애는 CSS

[CSS] 밑줄 표시 효과 Underline hover effect

[CSS] 이미지 애니메이션 효과 적용하기(Keyframe)