CSS :placeholder-shown 가상 클래스 선택자 – 올바른 이해와 사용 방법

정의 및 사용 방법

:placeholder-shown 가상 클래스는
HTML placeholder 속성이 적용된 <input> 또는 <textarea> 중에서 현재 플레이스홀더 텍스트가 표시되고 있는 해당 요소를 선택합니다.

주의할 점

:placeholder-shown는 플레이스홀더 텍스트(placeholder text) 자체를 선택하는 가상 요소 선택자가 아닙니다.
현재 플레이스홀더 텍스트가 표시되고 있는 해당 요소를 선택하는 가상 클래스입니다.
플레이스홀더 텍스트 자체를 선택하여 스타일하려면 ::placeholder 가상 요소 선택자를 사용하세요.

특징

이 선택자는 플레이스홀더 텍스트가 표시될 때에만 해당 요소가 선택되고, 사라지면(사용자가 입력을 시작하면) 선택되지 않습니다.
즉, 사용자가 해당 요소의 입력 필드에 텍스트를 입력한 경우에는 선택되지 않는다는 것을 의미합니다.

:placeholder-shown 가상 클래스를 사용하면,
사용자가 입력 필드에 텍스트를 입력한 경우와 그렇지 않은 경우를 쉽게 구분할 수 있는 스타일(상태 변화에 따라 시각적 피드백을 주는 스타일링)을 적용할 수 있습니다.

기본 예제

CSS

input {
    padding: 0.5em;
    border: 2px solid blue;
    outline: none;
    outline-offset: 2px;
    transition: border-color 0.4s;
}

/* 포커스 시 점선 아웃라인 */
input:focus {
    outline: 1px dashed;
}

/* 플레이스홀더가 표시 중인 상태 */
input:placeholder-shown {
    border-color: red; /* 플레이스홀더 텍스트가 표시될 때 적용 */
}

이 예제에서는 플레이스홀더 텍스트가 표시될 때 입력 필드의 테두리 색상(border-color)이 빨간색으로, 사용자가 입력을 시작하면 파란색으로 변경됩니다.
이렇게 하면, :placeholder-shown 가상 클래스가 입력 전 상태만 선택한다는 점을 시각적으로 확인할 수 있습니다.

구문

선택 가능 요소

:placeholder-shown 가상 클래스는 placeholder 속성 값이 현재 사용자에게 표시되는 다음 두 가지 요소에 적용할 수 있습니다.

<input> 중에서 placeholder를 적용할 수 있는 텍스트 입력 type
<textarea>

활용 예제

이 예제에서는 :placeholder-shown 가상 클래스를 사용하여,
사용자가 닉네임 입력 필드에 아직 텍스트를 입력하지 않은 경우에만 안내 메시지(툴팁)를 표시하는 방법을 보여줍니다. 이렇게 하면, 입력 전 상태를 시각적으로 구분하고, 사용자 경험을 개선할 수 있습니다.

HTML

<label for="nickname">닉네임</label>
<input type="text" id="nickname" placeholder="15자 이내..." aria-describedby="nickname-required">
<span id="nickname-required" class="tooltip" aria-live="polite">*필수</span>

CSS

input {
    padding: 0.5em;
    border: 2px solid blue;
    outline: none;
    outline-offset: 2px;
    transition: border-color 0.4s;
}

/* 포커스 시 점선 아웃라인 */
input:focus {
    outline: 1px dashed;
}

/* 플레이스홀더가 표시 중인 상태 */
input:placeholder-shown {
    border-color: red; /* 플레이스홀더 텍스트가 표시될 때 적용 */
}

/* 툴팁 기본 스타일 */
.tooltip {
    display: none;
    color: red;
    font-size: 0.9em;
    margin-left: 0.5em;
}

/* 플레이스홀더 표시 시 툴팁 표시 */
input:placeholder-shown + .tooltip {
    display: inline;
}

코드 부연설명
input:placeholder-shown + .tooltip는 input:placeholder-shown 선택자 바로 뒤에 있는 형제 요소인 .tooltip을 선택합니다.
다음 형제 선택자 (+): 선택자A + 선택자B를 참고하세요.