CSS의 :focus와 :active 의사 클래스의 차이점은 무엇입니까?

:focus와 :active 의사 클래스의 구별

작업할 때 :focus와 :active 상태의 차이점을 이해하는 것이 중요합니다. CSS. 이러한 의사 클래스는 HTML 요소와 상호 작용할 때 작용하는 고유한 요소 상태를 나타냅니다.

:focus란 무엇입니까?

:focus 상태는 요소가 입력 포커스를 받았습니다. 이 상태는 일반적으로 요소가 키보드 입력을 받거나 사용자가 다른 포커스 가능 메커니즘을 사용하여 요소를 선택할 때 트리거됩니다. 양식 요소(:input, :button, :a), 프레임/:iframe과 같은 요소는 이러한 방식으로 동작합니다.

:active란 무엇입니까?

:active 상태 현재 사용자가 활성화 중인 요소를 나타냅니다. 이 상태는 사용자가 단추를 클릭하거나 키를 누를 때와 같은 대화형 시나리오에서 일반적입니다. 예를 들어, 버튼은 일반적으로 클릭하고 놓을 때 :active 상태로 전환됩니다.

:focus와 :active를 구별하는 방법

요소가 다음과 같은 경우에는 비슷해 보이지만 클릭, :focus 및 :active는 별개의 상태입니다. 사용자가 요소를 클릭하면 포커스와 활성화가 모두 수신되어 :focus:active 상태가 됩니다. 그러나 이러한 상태는 독립적으로 트리거될 수 있습니다. 예를 들어 활성화 없이(예: 탭 사용) 요소에 초점을 맞출 수 있으며 그 반대의 경우도 마찬가지입니다.

예

다음 HTML 및 CSS 코드를 고려하세요.

<style>
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

클릭하지 않고 버튼에 포커스(탭 이용)를 하면 텍스트가 빨간색으로만 변합니다. 버튼을 클릭하면 텍스트가 빨간색으로 굵은 글씨로 바뀌어 버튼에 초점이 맞춰져 있고 활성화되었음을 나타냅니다.

위 내용은 CSS의 :focus와 :active 의사 클래스의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!