CSS를 사용하여 링크를 숨기는 방법

CSS를 사용하여 링크를 숨기는 방법은 여러 가지가 있지만 URL을 완전히 숨길 수있는 두 가지 방법을 살펴 보겠습니다. 귀하의 사이트에서 청소부 사냥이나 부활절 달걀을 만들고 싶다면 이것은 링크를 숨기는 흥미로운 방법입니다.

첫 번째 방법은 "none"을 포인터 이벤트 CSS 속성 값으로 사용하는 것입니다. 다른 하나는 텍스트를 페이지의 배경에 맞게 채색하는 것입니다.

두 방법 모두 소스 코드를 검색 할 때 링크가 완전히 사라지는 것을 방지하지 않습니다. 그러나 방문객은 간단하고 간단한 방법으로 사이트를 볼 수 없으며 초보 방문자는 링크를 찾는 방법을 알지 못합니다.

참고 : 외부 스타일 시트를 연결하는 방법에 대한 지침을 보려면이 지시 사항을 따르지 마십시오. 외부 스타일 시트 란 무엇입니까? 대신.

URL을 숨기는 데 사용할 수있는 첫 번째 방법은 링크를 아무 것도하지 않는 것입니다. 링크 위로 마우스를 가져 가면 URL이 가리키는 내용이 표시되지 않으며 클릭 할 수 없습니다.

HTML을 올바르게 작성하십시오.

웹 페이지 중 하나 인 하이퍼 링크가 다음과 같이 표시되는지 확인하십시오.

물론 "https://www.thoughtco.com/" 는 숨기려는 실제 URL을 가리켜 야 하며 ThoughtCo.com 은 링크를 설명하는 원하는 단어 나 구로 변경할 수 있습니다.

여기에있는 아이디어는 링크를 효과적으로 숨기기 위해 아래의 CSS와 함께 활성 클래스가 사용된다는 것입니다.

이 CSS 코드 사용

CSS 코드는 활성 클래스를 처리하고 링크 클릭시 이벤트가 다음과 같이 "없음"이어야한다고 브라우저에 설명해야합니다.

.active {포인터 이벤트 : 없음; 커서 : 기본; }

JSFiddle에서이 메소드가 작동하는 것을 볼 수 있습니다. CSS 코드를 제거한 다음 데이터를 다시 실행하면 링크가 갑자기 클릭하여 사용할 수있게됩니다. 이는 CSS가 적용되지 않으면 링크가 정상적으로 작동하기 때문입니다.

참고 : 사용자가 페이지의 소스 코드를 보면 링크가 표시되고 위의 코드와 같이 링크가 표시되므로 코드가 그대로 유지되므로 링크를 볼 수 있습니다.

일반적으로 웹 디자이너는 하이퍼 링크를 배경색과 다른 색으로 만들어 방문자가 실제로 볼 수 있고 그들이가는 곳을 알 수 있습니다. 그러나 링크 를 숨기려면 여기를 참조하십시오. 따라서 페이지의 색상과 일치하도록 색상을 변경하는 방법을 살펴 보겠습니다.

사용자 정의 클래스 정의

위의 첫 번째 방법과 같은 예제를 사용하면 클래스를 원하는 것으로 변경하면 특수 링크 만 숨길 수 있습니다.

우리가 수업을 사용하지 않고 아래의 CSS를 모든 링크에 적용하면 모든 것이 사라질 것입니다. 이것이 우리가 여기서 다룰 내용이 아니므로 사용자 정의 hideme 클래스를 사용하는 HTML 코드를 사용합니다.

사용할 색을 찾으십시오.

링크를 숨기기 위해 적절한 CSS 코드를 입력하기 전에 우리는 어떤 색상을 사용할지 알아야합니다. 흰색이나 검은 색과 같은 단단한 배경이 이미있는 경우 쉽습니다. 그러나 다른 특수 색상도 정확해야합니다.

예를 들어, 배경색에 16 진수 값 e6ded1 이있는 경우 CSS 코드가 페이지에서 제대로 작동하는지 알아야합니다.

이러한 "색상 선택 도구"또는 "스포이드 도구"가 많이 있으며, 그 중 하나는 Chrome 브라우저 용 ColorPick 스포이드라고합니다. 그것을 사용하여 웹 페이지의 배경색을 샘플링하여 16 진수 색상을 얻습니다.

CSS를 사용자 정의하여 색상 변경

이제 링크가 있어야하는 색상을 얻었으므로 CSS 코드를 작성하려면 위와 같은 사용자 정의 클래스 값을 사용할 차례입니다.

.hideme {color : # e6ded1; }

배경색이 흰색 또는 녹색과 같이 단순하다면 앞에 # 기호를 쓸 필요가 없습니다.

.hideme {color : white; }

JSFiddle에서이 메소드의 샘플 코드를 참조하십시오.

Alike posts