CSS :disabled 가상 클래스 선택자 – 실제로 비활성화된 요소 선택

정의 및 사용 방법

:disabled 가상 클래스 선택자는
HTML의 disabled 속성으로 인해 실제로 비활성화된 요소를 선택합니다.

접근성 측면에서 이 선택자는 비활성화된 요소임을 시각적으로 표현할 때 매우 유용합니다.

부연설명
HTML의 disabled 속성은 해당 요소나 해당 요소에 포함되어 있는 컨트롤 요소들을 비활성화합니다. 비활성화된 요소는 입력, 클릭, 선택 등 사용자가 요소와 상호작용하는 기능이 차단되는 특징이 있습니다.

기본 예제

다음의 예제는 :disabled 가상 클래스 선택자를 사용해서 <textarea>로 나타낸 댓글 쓰기 입력 필드가 사용자에게 닫혀 있음을 시각적으로 표현하는 방법을 보여줍니다.

CSS

/* 비활성화된 textarea 스타일 */
textarea:disabled {
    color: #555;
    background-color: silver;
    border-color: #555;
    cursor: not-allowed; /* 입력하지 않도록 커서 변경 */
}

이 예제에서처럼 :disabled 선택자를 사용하면 실제로 비활성화된 요소를 시각적으로 구분할 수 있습니다. 이는 사용자에게 해당 요소가 비활성화되어 상호작용할 수 없음을 명확히 전달하여, 접근성을 높이는 데 중요한 역할을 합니다.

구문

선택 가능한 요소

:disabled 가상 클래스 선택자는 HTML의 disabled 속성으로 인해 실제로 비활성화된 요소만 선택합니다.

비활성화된 요소

요소가 다음 중 하나에 해당하는 경우 disabled 속성으로 인해 실제로 비활성화된 것으로 간주합니다.

비활성화된 <button> 요소
비활성화된 <input> 요소
비활성화된 <select> 요소
비활성화된 <textarea> 요소
disabled 속성이 있는 <optgroup> 요소
비활성화된 <option> 요소
disabled 속성이 있는 <fieldset> 요소
비활성화된 양식 관련 사용자 지정 요소(form-associated custom element)

주의할 점

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

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

CSS

[disabled] {
    border: 2px solid red; /* disabled 속성을 가진 모든 요소에 테두리 추가 */
}
:disabled {
    background-color: gold; /* 실제로 비활성화된 요소에 배경색 적용 */
}

접근성 고려 사항

:disabled 가상 클래스 선택자는 접근성 측면에서 중요한 역할을 합니다. 비활성화된 요소를 시각적으로 구분할 수 있도록 쉽게 선택할 수 있다는 점이 핵심입니다. 사용자에게 비활성 상태를 명확히 전달하기 위해 이 선택자를 사용해야 하며, 활성화된 요소와 구분되지 않도록 스타일을 변경하거나, 화면에서 아예 보이지 않도록 스타일을 적용하는 것은 접근성에 큰 방해가 될 수 있습니다.

예제 - 잘못된 접근성 스타일링

아래 예제에서는 :disabled을 사용하여 비활성화된 버튼에 배경을 동일하게 만들고 글자색을 투명하게 설정해버립니다. 이는 비활성화된 버튼을 사용자에게 명확히 구분할 수 없게 만들어, 접근성에 문제가 될 수 있습니다.

CSS

/* 잘못된 스타일링 - 비활성화된 요소가 화면에서 아예 보이지 않도록 스타일을 적용하는 것 */
:disabled {
    background-color: transparent;  /* 배경을 투명하게 설정 */
    color: transparent;  /* 글자 색을 투명하게 설정 */
}

이 경우, 사용자는 버튼이 비활성화된 상태임을 인식할 수 없고, 클릭할 수 없다는 점에서 혼동을 일으킬 수 있습니다.

활용 예제 - 검색창 입력 시 검색 버튼 활성화

이 예제에서는 사용자가 검색어를 입력하기 전에는 검색 버튼을 비활성화하여 잘못된 제출을 방지하고, 입력을 시작하면 버튼이 활성화되어 검색이 가능하도록 합니다. 이 방식은 사용자가 아무것도 입력하지 않았을 때 버튼이 비활성화된 상태로 유지되며, 입력이 있을 때만 활성화되어 제출할 수 있도록 하는 폼 검증 방식으로 자주 사용됩니다.

이때, 비활성화되어 있는 검색 버튼을 :disabled 가상 클래스 선택자로 비활성화된 요소임을 시각적으로 표현할 때 매우 유용합니다.

HTML

<form>
    <label for="search">검색어:</label>
    <input type="text" id="search" placeholder="검색어를 입력하세요">
    <button type="submit" id="search-button" disabled>검색</button>
</form>

CSS

[type="submit"]:disabled {
    color: #555;
    background-color: silver;
    border-color: silver;
    cursor: not-allowed; /* 클릭하지 않도록 커서 변경 */
}

JavaScript

const searchInput = document.getElementById("search");
const searchButton = document.getElementById("search-button");

searchInput.addEventListener("input", () => {
    // 검색어 입력이 있을 때 버튼 활성화
    if (searchInput.value.trim()) {
        searchButton.disabled = false; // 비활성화된 버튼을 활성화
    } else {
        searchButton.disabled = true; // 입력이 없으면 버튼 비활성화
    }
});