CSS의 :focus 선택자는 현재 포커스를 가지고 있는 요소를 선택할 때 사용합니다. 사용자가 폼의 입력 필드를 클릭하거나 Tab 키로 이동해 해당 요소가 활성화되면, :focus 선택자에 정의한 스타일이 자동으로 적용됩니다.
:focus 선택자란?
:focus는 CSS 의사 클래스(pseudo-class) 중 하나로, 문서 안에서 현재 포커스를 받은 요소를 대상으로 스타일을 지정합니다. 주로 <input>, <textarea>, <select> 같은 폼 요소나 링크(<a>)에 활용되며, 사용자가 어느 부분을 조작하고 있는지 시각적으로 알려주는 중요한 역할을 합니다.
예제 코드
아래 예제에서는 입력 필드에 포커스가 있을 때 배경색이 초록색으로 변경되도록 설정했습니다. 코드를 직접 실행하고 입력 필드를 클릭해 보면 변화를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
background-color: green;
}
</style>
</head>
<body>
<form action = "">
Subject <input type = "text" name = "subject"><br>
Student: <input type = "text" name = "student"><br>
Age: <input type = "number" name = "age"><br>
<input type = "submit" value = "Submit">
</form>
</body>
</html>실전 활용 팁
- 접근성 향상: 키보드 사용자가 현재 위치를 쉽게 파악할 수 있도록 포커스 스타일을 명확하게 지정하는 것이 좋습니다.
- 시각적 강조:
outline,box-shadow속성과 함께 사용하면 더욱 돋보이는 포커스 효과를 만들 수 있습니다. - :focus-visible 활용: 최신 CSS에서는
:focus-visible선택자를 사용해 키보드 포커스와 마우스 클릭 포커스를 구분하여 다르게 스타일링할 수 있습니다.