웹 폼에서 사용자가 현재 입력하고 있는 요소, 즉 포커스(focus)를 가진 요소를 선택하려면 CSS의 :focus 선택자를 사용합니다.
:focus 선택자란?
:focus 선택자는 사용자가 마우스로 클릭하거나 Tab 키를 눌러 해당 요소에 접근했을 때 활성화됩니다. 주로 텍스트 입력 필드에 시각적인 강조 효과를 주어, 사용자가 어느 부분에 입력 중인지 쉽게 알 수 있도록 도와줍니다.
아래 예제에서는 입력 필드에 포커스가 맞춰지면 배경색이 초록색으로 변경되도록 설정했습니다. 직접 코드를 실행하여 동작을 확인해 보세요.
예제 코드
<!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>코드 설명
위 코드의 핵심은 다음 CSS 규칙입니다.
input:focus {
background-color: green;
}input:focus— 페이지 내 모든<input>요소 중 포커스를 가진 요소만 대상으로 합니다.background-color: green;— 해당 입력 필드의 배경색을 초록색으로 변경합니다.
브라우저에서 이 페이지를 열고 각 입력 필드를 클릭하거나 Tab 키로 이동해 보면, 포커스가 맞춰진 순간 필드의 배경색이 초록색으로 바뀌는 것을 확인할 수 있습니다. 이처럼 :focus 선택자를 활용하면 폼의 사용성과 접근성을 크게 향상시킬 수 있습니다.