CSS의 링크에서 파란색 밑줄 제거

1. CSS의 링크에서 파란색 밑줄을 제거하려면 text-decoration 속성을 none으로 설정하십시오
2. 선택에 의사 클래스를 사용하여 CSS의 링크에서 파란색 밑줄 제거
3. CSS의 링크에서 밑줄과 색상을 제거하려면 box-shadow 속성을 제거하십시오

이 튜토리얼에서는 HTML의 하이퍼링크에 형성된 파란색 밑줄을 제거하는 방법을 소개합니다. CSS를 사용하여 이러한 밑줄을 제거합니다.

CSS의 링크에서 파란색 밑줄을 제거하려면 text-decoration 속성을 none으로 설정하십시오

CSS의 text-decoration 속성을 사용하여 텍스트 장식을 지정할 수 있습니다. 속성은 다른 세 속성의 약식 속성입니다. 이러한 속성은 text-decoration-line, text-decoration-color 및 text-decoration-style입니다. text-decoration-line 속성은 overline, underline 및 line-through와 같은 텍스트 장식을 적용합니다. text-decoration-color 속성은 텍스트 장식의 색상을 설정하는 역할을 하며 text-decoration-style은 텍스트 장식에 solid, wavy, dotted, dashed와 같은 다양한 스타일을 적용합니다. 약식 속성 text-decoration을 사용할 때 값을 none으로 지정할 수 있습니다. 결과적으로 세 가지 속성을 모두 none으로 설정할 수 있습니다. 결과적으로 하이퍼링크의 밑줄이 제거되고 파란색도 제거됩니다.

예를 들어 container 클래스로 div를 생성합니다. 그런 다음 div 내부에서 thisPage 클래스로 span을 만듭니다. 다음으로 span 태그 사이에 Current Page라는 텍스트를 작성합니다. 다음 줄에 anchor 태그를 작성하십시오. 태그의 href 속성을 #으로 설정합니다. anchor 태그 안에 otherPage 클래스를 사용하여 또 다른 span을 작성합니다. span 사이에 Next Page라는 텍스트를 씁니다. 그런 다음 해당 CSS 파일에서 container 클래스 내부에 있는 앵커 태그를 .container a로 선택합니다. 16진수 코드 #FF0000을 사용하여 텍스트에 빨간색을 설정합니다. 그런 다음 text-decoration 속성을 none으로 설정합니다.

아래 CSS는 Next Page 텍스트를 하이퍼링크인 빨간색으로 설정합니다. none으로 설정된 text-decoration 속성은 anchor 태그 요소의 밑줄과 파란색을 제거합니다.

예제 코드:

<div class="container">
    <span class="thisPage">Current Page</span>
    <a href="#"><span class="otherPage">Next Page</span></a>
</div>

.container a {
  color: #FF0000;
  text-decoration: none;
}

선택에 의사 클래스를 사용하여 CSS의 링크에서 파란색 밑줄 제거

의사 클래스를 선택하고 링크에서 파란색 밑줄을 제거하는 첫 번째 방법과 동일한 CSS 속성을 적용합니다. 이전에는 anchor 태그만 선택했습니다. 이 방법에서는 의사 클래스를 사용하여 앵커 태그를 선택합니다. :hover, :visited, :link, :active와 같은 유사 클래스를 사용합니다. :hover 클래스는 사용자가 마우스와 같은 포인팅 장치로 요소를 가리킬 때 적용되지만 반드시 요소를 클릭할 필요는 없습니다. :visited 클래스는 링크를 이미 클릭했을 때 적용됩니다. 마찬가지로 :link 클래스는 방문하지 않은 모든 링크를 선택합니다. 그리고 :active 클래스는 활성 링크를 선택합니다. 이 방법의 데모에 동일한 HTML 문서를 사용합니다.

예를 들어. anchor 태그를 선택하는 :link, :visited, :hover 및 :active 유사 클래스를 사용합니다. 각 의사 클래스는 쉼표로 구분하십시오. text-decoration 속성을 none으로 설정하고 color 속성을 #000000으로 설정합니다.

적용된 CSS 속성은 아래 예제의 모든 의사 클래스에 적용됩니다. a:link 선택기는 하이퍼링크 색상을 검정색으로 변경하고 링크를 방문하지 않을 때 밑줄을 제거합니다. 다른 모든 선택기 중에서 color 속성을 재정의합니다. a:visited 선택기는 링크를 방문한 후 링크에서 밑줄을 제거합니다. CSS 효과는 링크 위로 마우스를 가져갈 때와 링크를 클릭할 때도 발생합니다. 이런 식으로 CSS 의사 클래스를 사용하여 링크에서 밑줄과 파란색을 제거할 수 있습니다.

예제 코드:

<span class="thisPage">Current Page</span>
<a href="#"><span class="otherPage">Next Page</span></a>

a:link, a:visited,  a:hover, a:active
{
    color: #000000;
    text-decoration: none;
}

CSS의 링크에서 밑줄과 색상을 제거하려면 box-shadow 속성을 제거하십시오

때때로 밑줄은 box-shadow 속성을 사용하여 스타일을 지정할 수 있습니다. 속성을 사용하여 모든 텍스트에 밑줄 효과를 제공할 수 있습니다. 다음 CSS 코드 조각은 밑줄을 만듭니다.

box-shadow: inset 0 -3px 0 0 #bdb;

이러한 경우 밑줄을 제거하려면 box-shadow 속성을 제거하거나 속성 값을 none으로 설정할 수 있습니다.

아래 예에서 span 클래스는 녹색으로 스타일이 지정되고 box-shadow 속성은 빨간색 밑줄을 만드는 데 사용됩니다. 그런 다음 속성 값이 none으로 설정되어 텍스트에서 밑줄 효과가 제거됩니다.

예제 코드:

<span class="thisPage">Current Page</span>

.thisPage {
  color: green;
  box-shadow: inset 0 -3px 0 0 red;
  box-shadow: none;
}