비쥬얼이 없는 웹사이트는 지루합니다. 아무리 디자인이 좋아도 우리 대부분은 그래픽이 많은 웹사이트를 선호할 것입니다. 왜 그럴까요? 이미지는 웹사이트의 사용자 경험을 향상시키는 빠르고 쉬운 방법입니다. 우리가 인식하고 뇌로 보내는 정보의 90%는 시각적입니다. 이미지를 사용하여 방문자의 관심을 끌고 다시 집중할 수 있습니다.
중요한 정보를 전달할 때 매우 도움이 될 수 있습니다. 이미지는 방문자의 참여를 유도하고 콘텐츠를 계속 읽게 하는 데 사용할 수 있는 환상적인 감정적 유발 요인입니다.
CSS를 사용하면 이러한 이미지의 스타일을 지정하고 위치를 지정하여 환상적인 시각 효과를 만들 수 있습니다. 이미지를 하이퍼링크로 사용하면 일부 오래된 브라우저에서는 기본 파란색 테두리로 이미지를 표시합니다. 이 글에서는 CSS를 사용하여 연결된 이미지 주위의 파란색 테두리를 변경하거나 제거하는 방법에 대해 설명합니다.
링크 이미지는 하이퍼링크 역할을 하는 웹페이지에 추가된 이미지입니다. 하이퍼링크를 만들려면 요소 안에 이미지를 추가해야 합니다. HTML 페이지에 간단한 하이퍼링크 이미지를 만들어 보겠습니다.
이전 버전의 브라우저(예: Internet Explorer 6~8, Firefox 7 등)를 사용하여 이미지를 하이퍼링크로 추가하면 기본적으로 이미지 주위에 파란색 테두리가 나타납니다. 이는 하이퍼링크 텍스트에 부여되는 효과와 유사합니다. 기본적으로 하이퍼링크 텍스트에는 파란색 밑줄이 그어지고 마우스를 올리면 글꼴 색상이 강조 표시됩니다.
인터넷 익스플로러 6을 이용해 이미지를 하이퍼링크로 추가해 보겠습니다.
으아악NOTE - Internet Explorer 6에서 이 프로그램을 실행하세요. 그렇지 않으면 다른 최신 브라우저를 사용하는 경우 기본 파란색 테두리가 표시되지 않습니다.
이 기본 동작은 두 가지 방법을 사용하여 제거할 수 있습니다. 한 가지 방법은 이미지에서 테두리를 완전히 제거하는 것이고, 또 다른 방법은 이미지에 자신만의 테두리 스타일을 추가하는 것입니다. 하이퍼링크된 이미지를 모두 선택하기 위해 CSS 선택기를 사용합니다.
CSS 선택기는 CSS 규칙의 시작입니다. CSS 속성 값(규칙에 지정됨)이 적용될 수 있도록 어떤 요소를 선택해야 하는지 브라우저에 알려주는 데 사용되는 일련의 요소 또는 기타 용어입니다. CSS 선택기를 사용하면 개발자는 웹 페이지에서 스타일을 지정하려는 HTML 요소를 선택(또는 일치)할 수 있습니다.
선택기에는 다양한 유형이 있습니다. 그 내용은 다음과 같습니다 -
간단한 선택기 – 이름, ID, 클래스를 사용하여 요소를 선택합니다.
Combined Selector – 요소 간 관계(예: 부모-자식 관계)를 사용하여 요소를 선택합니다.
의사 요소 선택기 – 범위와 같은 요소의 일부를 선택합니다.
속성 선택기 – 속성이나 속성 값을 사용하여 요소를 선택합니다.
CSS 선택기의 몇 가지 예로는 CSS 요소 선택기, CSS 그룹 선택기, CSS ID 선택기, CSS 범용 선택기 등이 있습니다.
CSS 별표(*) CSS 범용 선택기라고도 알려진 선택기는 전체 웹 페이지의 모든 요소 또는 요소의 특정 부분을 한 번에 선택하거나 일치시키는 데 사용됩니다. 선택한 후에는 CSS 사용자 정의 속성을 사용하여 그에 따라 스타일을 지정할 수 있습니다. ,
이 선택자는 상위 요소의 모든 하위 요소를 일치시키는 데 사용됩니다.
아래 표시된 대로 CSS 상위-하위 선택기를 사용하여 border: none을 작성하여 기본 파란색 테두리 스타일을 제거할 수 있습니다. -
으아악예시를 보시죠 -
으아악자신만의 테두리 스타일로 재정의하여 하이퍼링크 이미지의 기본 파란색 테두리를 제거할 수 있습니다.
으아악이 문서에서는 하이퍼링크 이미지 주위에 파란색 테두리를 표시하는 기존 브라우저와 기본 동작을 제거하는 방법에 대해 설명합니다. 그러나 Chrome, Edge, Firefox 등과 같은 최신 브라우저는 기본적으로 이미지 주위에 테두리를 표시하지 않습니다.
위 내용은 CSS를 사용하여 연결된 이미지 주위의 파란색 테두리를 제거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
