:focus 선택자란?
:focus 선택자는 버튼, 링크, 입력 상자 같은 폼 요소가 포커스를 받았을 때 지정한 스타일을 적용하는 데 사용됩니다. 요소는 마우스를 클릭하거나 Tab 키를 눌러 포커스를 얻을 수 있으며, 한 번 포커스를 받으면 다른 요소가 포커스를 가지기 전까지 그 상태가 유지됩니다.
:active 선택자란?
:active 선택자는 앵커(a) 태그나 버튼이 활성화된 상태임을 나타낼 때 사용됩니다. 마우스 버튼을 누르고 있는 동안에만 스타일이 적용되며, 마우스 버튼에서 손을 떼는 즉시 해제됩니다.
핵심 차이점 요약
- :focus — 키보드(Tab 키) 또는 마우스 클릭으로 요소가 포커스를 받으면 적용되며, 다른 요소로 포커스가 이동할 때까지 유지됩니다.
- :active — 요소를 마우스로 누르고 있는 짧은 순간에만 일시적으로 적용됩니다.
예제 코드
다음 예제는 버튼과 링크에 :focus 선택자와 :active 선택자를 함께 사용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Selector Example</title>
<style>
button {
border: 2px solid black;
}
button:focus {
border: 2px dotted red;
}
a {
color: black;
}
a:active {
color: red;
}
</style>
</head>
<body>
<button type="submit">Focus Me</button>
<a href="#">Active Me</a>
</body>
</html>실행 결과
위 코드를 실행하면 버튼을 클릭하거나 Tab 키로 이동했을 때 빨간 점선 테두리가 나타나고(:focus), 링크를 마우스로 누르고 있는 동안 글자색이 빨간색으로 변경됩니다(:active).
