라이브러리 브랜드

Korean English Japanese

텍스트 링크에 밑줄 없애는 법 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 부분적으로 적용할 경우, 특정 섹션에는 클래스로 선택자를 잡고 적용하면 된다. 한 웹사이트의 전체에 적용할 경우, 아래의 스타일을 그

creativestudio.kr

 

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

See the Pen PooerOj by CreativeStudio (@creativestudiocss) on CodePen. background-image: linear-gradient(transparent calc(100% - 3px), #000 3px) background-repeat: no-repeat background-size: 0% 100%..

creativestudio.kr

 

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

이미지 키프레임 애니메이션 효과[CSS] - animista.net 짧게 정리하는 유용한 사이트, CSS 키프레임 속성을 통해서 이미지에 애니메이션 효과를 줄 수 있다. 마우스 오버를 할 경우 이미지를 확대하게

creativestudio.kr

 

반응형
댓글 0
  • 라이브러리 브랜드에 새로운 의견을 남겨주세요.