CSS의 :focus 가상 클래스(의사 클래스)는 사용자가 텍스트 입력창, 버튼, 링크 같은 대화형 요소를 클릭하거나 Tab 키로 이동해 포커스를 받았을 때, 해당 요소에만 특정 스타일을 적용할 수 있게 해주는 선택자입니다. 폼 디자인에서 현재 입력 중인 필드를 시각적으로 강조할 때 가장 널리 활용됩니다.
:focus 가상 클래스란?
:focus는 요소가 '포커스 상태'에 있을 때만 동작합니다. 마우스로 클릭하거나 키보드로 탐색하는 순간 스타일이 적용되고, 다른 곳으로 포커스가 옮겨지면 자동으로 해제됩니다. 덕분에 별도의 JavaScript 없이도 사용자 경험을 크게 향상시킬 수 있습니다.
예제 코드
아래 코드를 실행하면 입력 필드에 포커스가 갈 때 배경색이 주황색(orange)으로 변경되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
background-color: orange;
}
</style>
</head>
<body>
<form action="">
과목: <input type="text" name="subject"><br>
학생: <input type="text" name="student"><br>
나이: <input type="number" name="age"><br>
<input type="submit" value="제출">
</form>
</body>
</html>실행 결과
페이지를 열고 아무 입력 필드나 클릭해 보세요. 클릭한 순간 해당 필드의 배경색이 주황색으로 바뀌며, 다른 필드를 선택하면 이전 필드는 원래대로 돌아갑니다.
실무 활용 팁
- 접근성 유지: outline: none으로 기본 포커스 표시를 제거할 경우, 반드시 :focus로 대체 스타일을 지정해야 키보드 사용자가 현재 위치를 인식할 수 있습니다.
- 부드러운 전환: transition 속성을 함께 사용하면 배경색 변화가 자연스럽게 애니메이션 처리됩니다.
- 다양한 요소 지원: input뿐 아니라 textarea, select, a, button 등 모든 포커스 가능한 요소에 적용할 수 있습니다.
:focus 가상 클래스는 모든 최신 브라우저에서 완벽하게 지원되므로, 호환성 걱정 없이 안심하고 사용할 수 있습니다.