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

정의 및 사용 방법

:optional 가상 클래스 선택자는
HTML의 required 속성이 지정되지 않아 필수가 아닌 상태(옵션 상태, optional)에 있는 폼 컨트롤 요소를 선택합니다.

필수가 아닌 상태(옵션 상태, optional)에 있는 폼 컨트롤 요소: 폼 제출 시 사용자가 사전에 반드시 값을 입력하거나 선택하지 않아도 제출에 지장이 없는 컨트롤 요소를 말합니다.
이와는 반대로 HTML의 required 속성으로 인해 필수 상태가 된 폼 컨트롤 요소(<input>의 일부 유형과, <textarea>, <select>)가 있습니다.

:required 가상 클래스 선택자는 필수 상태가 된 폼 컨트롤 요소를 선택합니다.

:optional을 사용하면 필수 항목임을 나타내는 스타일과 그렇지 않은 스타일을 쉽게 구분하여 지정할 수 있습니다. 이는 시각적 단서를 통해 사용자가 필수와 옵션 항목을 더 쉽게 인식하도록 도와줍니다.

기본 예제

다음은 :optional 가상 클래스를 사용하여 필수가 아닌 옵션 상태에 있는 폼 컨트롤 요소에 스타일을 적용한 예제입니다.
예제 코드에서는 :optional로 선택하는 옵션 컨트롤 요소와 필수 상태 필드를 구분하기 위해, 필수 상태가 된 폼 컨트롤 요소를 선택하는 :required 가상 클래스 선택자를 함께 사용했습니다.

CSS

/* 필수가 아닌 상태(옵션 상태)의 요소를 선택 */
input:optional {
    border: 1px solid blue;
}

/* 필수 상태가 된 요소를 선택 (비교용) */
input:required {
    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>

구문

선택 가능한 요소

:optional 가상 클래스는 폼 컨트롤 요소(form element) 중 제출 시 반드시 값을 입력하거나 선택해야 하는 필수가 아닌 요소에 적용됩니다. 또한, 폼 컨트롤 요소(form element)가 아니면 :optional 가상 클래스는 선택 가능한 요소가 아닙니다.

다음은 :optional 가상 클래스 선택자로 선택할 수 있는 필수 상태가 아닌 폼 컨트롤 요소(form element)입니다.

접근성 고려 사항

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

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

활용 예제

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

CSS

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

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

/* 옵션 항목 강조 */
:optional { /* *:optional과 동일 */
    background-color: #fff7b2; /* 흰색 배경 */
    border: 2px solid #ccc; /* 회색 테두리로 시각적 강조 */
    padding: 4px;
    border-radius: 4px;
}

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>