CSS :required 가상 클래스 선택자 – 필수 상태인 폼 컨트롤 요소 선택

정의 및 사용 방법

:required 가상 클래스 선택자는
HTML의 required 속성으로 인해 필수 상태가 된 폼 컨트롤 요소를 선택합니다.

필수 상태가 된 폼 컨트롤 요소: 폼 제출 시 사용자가 사전에 반드시 값을 입력하거나 선택해야 하는 컨트롤 요소를 말합니다.
HTML의 required 속성으로 지정하며, <input>의 일부 유형과, <textarea>, <select>에 지정할 수 있습니다. 폼 제출 시 해당 컨트롤 요소에 값을 입력하지 않거나 선택하지 않으면 브라우저가 필수 입력에 대한 오류 메시지를 표시합니다.

:required를 사용하면 필수 항목임을 나타내는 스타일을 쉽게 지정할 수 있습니다. 이는 시각적 단서를 통해 사용자가 필수 항목을 더 쉽게 인식하도록 도와줍니다.

기본 예제

다음은 :required 가상 클래스를 사용하여 <input type="password"> 비밀번호 필드를 필수 항목으로 표시하는 스타일을 적용한 예제입니다.

CSS

input:required { /*  HTML의 required 속성으로 인해 필수 상태가 된 <input> 요소를 선택 */
    background-color: gold;
    border: 1px solid red;
}
.req {
    color: red;
}

HTML

<form>
    <fieldset>
        <legend>비밀번호는 필수</legend>
        <p>
            <label for="username">이름</label>
            <input id="username" type="text">
        </p>
        <p>
            <label for="userpassword">비밀번호 <span class="req">*</span></label>
            <input id="userpassword" type="password" required> <!-- 필수 상태가 된 폼 컨트롤 요소 -->
        </p>
        <p>
            <button type="submit">제출</button>
        </p>
    </fieldset>
</form>

구문

선택 가능한 요소

:required 가상 클래스 선택자는 HTML의 required 속성으로 인해 실제로 필수 상태가 된 폼 컨트롤 요소만 선택합니다.
값을 입력하거나 선택해야 하는 관련 컨트롤 요소(<input>의 일부 유형과 <textarea>, <select>)에만 사용 가능합니다. 단, 제출할 폼(<form>) 내에 있거나 폼과 연결되어 있어야 합니다.

<input>의 일부 유형:
- <input type="text">
- <input type="password">
- <input type="search">
- <input type="url">
- <input type="tel">
- <input type="email">
- <input type="date">
- <input type="datetime-local">
- <input type="number">
- <input type="checkbox">
- <input type="radio">
- <input type="file">
- <input type="time">
- <input type="month">
- <input type="week">
<textarea>
<select>

주의할 점

:required 가상 클래스 선택자는 실제로 필수 상태가 된 폼 컨트롤 요소만을 선택합니다. 이 점에서 속성이 있으면 선택하는 [attribute] 선택자와 차이가 있습니다. 예를 들어, [required] 선택자는 required 속성이 포함된 모든 요소를 선택하는 반면, :required는 실제로 필수 상태가 된 폼 컨트롤 요소만 선택합니다.

다음의 예제는 :required와 [required] 선택자 간의 차이를 잘 보여줍니다.

CSS

[required] {
    border: 2px solid red; /* required 속성을 가진 모든 요소에 테두리 추가 */
}
:required {
    background-color: gold; /* 실제로 필수 상태가 된 폼 컨트롤 요소에 배경색 적용 */
}

HTML

<p required>required 속성이 있는 p 요소입니다.</p>
<form>
    <input id="userpassword" type="password" required> <!-- 필수 상태가 된 폼 컨트롤 요소 -->
</form>

접근성 고려 사항

:required는 필수 상태가 된 폼 컨트롤 요소를 쉽게 선택할 수 있게 고안된 가상 클래스 선택자입니다. 사용자가 필수 항목임을 쉽게 인지할 수 있도록, 시각적으로 뚜렷한 스타일을 적용하세요.

시각적 명확성: 필수 항목에 적용하는 배경색이나 테두리는 주변 요소와 충분한 명도 대비를 이루어야 합니다. 사용자가 화면을 훑어볼 때 어떤 항목이 필수인지 즉각적으로 인지할 수 있도록 뚜렷한 스타일을 적용하세요.
상태 변화의 일관성: 필수 항목의 스타일이 폼 전체의 디자인 시스템 내에서 일관되게 유지되어야 사용자가 혼란을 느끼지 않습니다.

활용 예제

다음 예제는 :required를 사용하여 여러 필수 입력 필드를 시각적으로 강조하고, 사용자가 한눈에 필수 항목을 인지할 수 있도록 한 실무형 폼 예제입니다.

CSS

/* 필수 항목 강조 */
:required { /* *:required와 동일 */
    background-color: #fff7b2; /* 은은한 황금색 배경 */
    border: 2px solid #f39c12; /* 주황색 테두리로 시각적 강조 */
    padding: 4px;
    border-radius: 4px;
}

/* 필수 표시 텍스트 스타일 */
.req {
    color: red;
    font-weight: bold;
}

HTML

<form>
    <fieldset>
        <legend>회원 정보 입력</legend>
        <p>
            <label for="name">이름 <span class="req">*</span></label>
            <input id="name" type="text" required>
        </p>
        <p>
            <label for="email">이메일 <span class="req">*</span></label>
            <input id="email" type="email" required>
        </p>
        <p>
            <label for="password">비밀번호 <span class="req">*</span></label>
            <input id="password" type="password" required>
        </p>
        <p>
            <label for="bio">자기소개</label>
            <textarea id="bio"></textarea>
        </p>
        <p>
            <button type="submit">제출</button>
        </p>
    </fieldset>
</form>