CSS를 사용하면 다양한 방식으로 링크의 스타일을 지정할 수 있습니다.

CSS 링크의 스타일을 다음과 같이 변경할 수 있습니다.

:hover

:active

:visited

:focus

:focus-within

:focus-visible

1. :호버

:hover 사용자가 커서가 있는 요소 위로 마우스를 가져가면 트리거되는 CSS 의사 클래스입니다.

a:hover {
    color: red
}

:link, :visited, :active를 사용하는 경우. LVHA 순서: :link — :visited — :hover — :active에 따라 링크 및 방문 후에 hover를 추가하는 것을 잊지 마십시오.

2. :활성

:active CSS 의사 클래스는 사용자가 기본 마우스 버튼을 누를 때 시작됩니다.

a:active {
    color: blue;
}

:active 의사 클래스는 일반적으로 <a> 및 <button> 요소에 사용됩니다.

3. :방문

:visited CSS 의사 클래스는 사용자가 이미 방문한 링크를 나타냅니다.

a:visited {
    color: yellow;
}

4. :포커스

:focus CSS 의사 클래스는 포커스를 받은 요소(예: 양식 입력)를 나타냅니다. 일반적으로 사용자가 요소를 클릭 또는 탭하거나 키보드의 Tab 키로 요소를 선택할 때 트리거됩니다.

input:focus {
    background-color: green;
}

참고 📝 초점 윤곽선을 제거하지 마십시오.

플레이하는 코드펜을 확인하고 hover , active , visited 및 focus 가 어떻게 작동하는지 이해합니다.

5. :내 초점

:focus-within CSS 의사 클래스는 자체적으로 :focus 의사 클래스와 일치하거나 :focus와 일치하는 자손이 있는 요소를 나타냅니다.

div:focus-within {
    background: cyan;
}

6. :초점-보임

:focus-visible 의사 클래스는 사용자의 입력 방식(마우스 대 키보드)에 따라 다른 포커스 표시기를 제공하는 데 적용됩니다.

.focus-visible:focus-visible {
    background: pink;
    color: red;
}

:focus-visible이 필요한 이유는 무엇입니까?
:focus도 마찬가지겠죠? 🤔
그러나 한 가지 문제가 있습니다. 어떤 버튼이나 링크의 윤곽선을 제거하고 싶다고 상상해보세요. 그러면 키보드를 통해 액세스하려는 사용자에게는 약간 문제가 될 것입니다.

여기서 우리는 :focus-visible을 사용할 수 있습니다. 이는 실제로 사용자가 초점을 볼 수 있도록 시각적 표시기를 원할 때 적용됩니다.

여기에서 코드펜을 확인하세요 👇

참고 🧐

MDN Doc hover

MDN Doc focus

MDN Doc active

MDN Doc visited

MDN Doc focus-visible

MDN Doc focus-within

🌟


👩🏻‍💻 suprabha.me


🌟