:read-only vs readonly / readonly vs disabled

  :read-only   vs   readonly  

:read-only 가상 클래스

• 요소를 사용자가 변경, 컨트롤 할 수 없다.
• input, textarea 제외한 모든 요소에서 사용 가능

readonly 속성

• 요소를 사용자가 변경, 컨트롤 할 수 없다.
• input, textarea 에만 적용 가능

📌 input, textarea 에 readonly 속성이 있으면 :read-only 가상 클래스 사용이 가능하다.

📌 input[readonly] 를 사용해 readonly 속성 들어간 요소에만 css를 줄 수 있다.

 

 

 

  readonly   vs   disabled  

readonly 속성

• input, textarea 에만 적용 가능
• 포커스 받을 수 있다. (Tab키 사용 가능)
• 서버로 값이 전달된다.

 

disabled 속성

• button, fields, input, optgroup, option, select, textarea 에만 저거용 가능
• 포커스 받을 수 없다. (Tab키 사용 불가능)
• 서버로 값도 전달 안된다.
• 기본적으로 비활성화 된 스타일 제공

=> 그래서 disabled 된 값을 submit 시키기 위해 input[type=“hidden”]을 사용하는 것 같다.