CSS :read-only 가상 클래스 선택자

정의 및 사용 방법

:read-only 가상 클래스 선택자는 HTML에서 정의하는 바에 따라, '사용자가 내용을 변경할 수 있는(user-alterable) 요소가 아닌 요소'를 선택합니다.

사용자가 내용을 변경할 수 있는(user-alterable) 요소가 아닌 요소

HTML에서는 사용자가 내용을 변경할 수 있는(user-alterable) 요소들이 있습니다.

텍스트 관련 컨트롤 요소(<input>의 텍스트 관련 일부 유형과 <textarea>)는 사용자가 내용을 직접 작성하거나 변경할 수 있습니다.
contenteditable 속성의 값이 true 또는 plaintext-only로 설정되어 있어 편집 가능한 요소도 사용자가 내용을 직접 작성하거나 변경할 수 있습니다.
다만, 텍스트 관련 컨트롤 요소인 <input>과 <textarea>는 실제로 내용을 변경할 수 있는 상태이어야 합니다. 읽기 전용 상태(HTML의 readonly 속성으로 설정된)이거나 비활성 상태(HTML의 disabled 속성으로 설정된)는 사용자가 내용을 변경할 수 있는(user-alterable) 요소에 해당하지 않습니다.

이렇게 :read-only 가상 클래스 선택자는 사용자가 내용을 변경할 수 있는(user-alterable) 요소가 아닌 요소를 선택합니다.

반면에, :read-write는 :read-only로 선택되지 않는 요소를 선택합니다. 즉, '사용자가 내용을 변경할 수 있는(user-alterable) 요소'를 선택합니다.

구문

기본 예제

다음은 사용자가 '내용을 변경할 수 있는 요소'와 그렇지 않은 요소를 시각적으로 명확하게 구분하기 위해 :read-only 가상 클래스 선택자를 사용해 '내용을 변경할 수 있는 요소가 아닌 요소'에 스타일링한 예제입니다.

HTML

<div class="container">
    <p>실제로 내용을 변경할 수 있는 상태의 input의 일부 유형</p>
    <input type="text">
    
    <p>읽기 전용 상태의 input의 일부 유형</p>
    <input type="text" readonly>
    
    <p>실제로 내용을 변경할 수 있는 상태의 textarea</p>
    <textarea></textarea>
    
    <p>contenteditable 속성의 값이 true 또는 plaintext-only로 설정되어 있어 편집 가능한 요소</p>
    <div contenteditable="true">
         이 내용을 직접 편집해 보세요.
    </div>
</div>

추가 설명

사용자가 내용을 변경할 수 있는(user-alterable) 요소에 대해 좀 더 자세히 살펴보겠습니다.

<input>은 type 속성 값에 따라 다양한 컨트롤 유형을 제공합니다.

<input>의 모든 유형이 사용자가 내용을 변경할 수 있는(user-alterable) 요소가 아니라, 텍스트 관련 일부 유형만 해당합니다.

사용자가 내용을 변경할 수 있는(user-alterable) <input>의 텍스트 관련 일부 유형은 다음과 같습니다.

텍스트와 관련되지 않은 유형은 사용자가 내용을 변경할 수 있는(user-alterable) 요소가 아닙니다. 예를 들면, 다음과 같은 유형입니다.

또한 텍스트와 관련되지 않은 컨트롤도 사용자가 내용을 변경할 수 있는(user-alterable) 요소가 아닙니다. 예를 들면, 다음과 같은 컨트롤 요소들입니다.

즉, 텍스트와 관련되지 않은 <input>의 일부 유형과 텍스트와 관련되지 않은 컨트롤은 :read-only 가상 클래스 선택자로 선택 가능한 요소입니다.

다음의 예제를 통해 확인해 보세요.

HTML

<div class="container">
    <p>텍스트와 관련되지 않은 input의 일부 유형</p>
    <input type="color">
    <input type="button" value="input button">
    <p>텍스트와 관련되지 않은 컨트롤</p>
    <button type="button">button</button>
    <select>
        <option>select</option>
    </select>
</div>

앞서 언급한 바와 같이, 텍스트 관련 컨트롤 요소인 <input>과 <textarea>는 실제로 내용을 변경할 수 있는 상태이어야 합니다. 읽기 전용 상태(HTML의 readonly 속성으로 설정된)이거나 비활성 상태(HTML의 disabled 속성으로 설정된)는 사용자가 내용을 변경할 수 있는(user-alterable) 요소에 해당하지 않습니다. 이러한 요소들은 :read-only 가상 클래스 선택자로 선택 가능한 요소입니다.

다음의 예제를 통해 확인해 보세요.

HTML

<div class="container">
    <p>실제로 내용을 변경할 수 있는 상태의 input의 일부 유형</p>
    <input type="text">
    
    <p>읽기 전용 상태의 input의 일부 유형</p>
    <input type="text" readonly>
    
    <p>비활성 상태의 input의 일부 유형</p>
    <input type="text" disabled>
    
    <p>실제로 내용을 변경할 수 있는 상태의 textarea</p>
    <textarea></textarea>
    
    <p>읽기 전용 상태의 textarea</p>
    <textarea readonly></textarea>
    
    <p>비활성 상태의 textarea</p>
    <textarea disabled></textarea>    
</div>