CSS의 :required 선택자는 HTML 폼에서 required 속성이 지정된 <input> 요소에만 특별한 스타일을 적용할 수 있는 강력한 도구입니다. 이 선택자를 활용하면 사용자가 반드시 입력해야 하는 필드를 시각적으로 강조하여, 폼 작성 시 어떤 항목이 필수인지 한눈에 알 수 있도록 유도할 수 있습니다.
:required 선택자란?
:required는 의사 클래스(pseudo-class) 선택자로, required 속성을 가진 입력 요소를 자동으로 감지합니다. 반대로 필수가 아닌 입력 필드를 대상으로 하려면 :optional 선택자를 사용하면 됩니다.
예제 코드
아래 예제는 :required 선택자를 사용하여 필수 입력 필드의 배경색을 주황색으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
input:required {
background-color: orange;
}
</style>
</head>
<body>
<form>
Subject: <input type = "text" name = "subject" value = "C++"><br>
Student: <input type = "text" name = "student" value = "Amit" required><br>
</form>
</body>
</html>코드 설명
위 예제에는 두 개의 텍스트 입력 필드가 있습니다. 첫 번째 'Subject' 필드에는 required 속성이 없으므로 기본 배경색이 유지되고, 두 번째 'Student' 필드에는 required 속성이 있기 때문에 input:required 규칙에 따라 배경색이 주황색으로 표시됩니다.
활용 팁
실무에서는 단순히 배경색을 바꾸는 것 외에도 다음과 같은 방법으로 :required 선택자를 활용할 수 있습니다.
- 필수 입력 필드 옆에 복표(*)나 안내 문구를 추가하는 스타일 적용
- 테두리 색상 변경으로 필수 항목 강조
:invalid,:valid선택자와 조합하여 입력 상태에 따른 실시간 피드백 제공
이처럼 :required 선택자를 사용하면 자바스크립트 없이도 순수 CSS만으로 폼의 사용성과 접근성을 크게 향상시킬 수 있습니다.