input type='text' 값이 들어왔을 때, 배경색 변경하기
값이 들어왔을 떄, 배경색을 변경시켜주는 걸 css로 구현하기 위해서는 일단 input에 required 속성을 추가해야 한다. 값으로 required를 넣어, required="required"를 input 태그 안에 추가한다.
글을 작성하다가, required="required"의 내용은 안 나와서.. 그냥 required를 작성하면 동작하지 않을까? 라는 의문이 들어서 테스트를 해본 결과 그냥 required를 작성해도 잘 작동된다…!
해당 속성을 추가하고 css는 input:valid일시, 즉 input에 값이 들어있을 때 배경색상을 흰색으로 변경하게 한다.
🚨주의🚨
input에 required 속성을 추가하지 않으면, 값을 입력했다가 다시 모든 값을 지우고 focus를 해제했을 때, 배경색상이 회색(값이 없을 때)으로 변경되지 않고 흰색(값이 있을 때)으로 유지된다.
input type='radio' 값을 checked 했을 때, label 색상 변경하기
radio를 checked 했을 때, radio와 연결된 label의 색상을 변경시켜주기 위한 코드(css)는 다음과 같다.
input:checked + label {
color: red;
}
input이 checked 되었을 때, 인접 형제 요소인 label의 color를 변경하는 css 코드이다.
그런데, 해당 코드를 작성하면 스타일이 적용되지 않는 문제가 발생했다. 나의 html 코드는 다음과 같았다.
<div>
<label>라디오와 연결된 라벨</label>
<input type="radio" />
</div>
위와 같이, label이 먼저 오고 input이 그 다음에 오는 형태이다. 이 순서가 가장 큰 문제였다…
radio가 checked시, label에 스타일을 적용하기 위해서는 radio가 먼저 오고 label이 그 다음에 왔을 때만 css 코드가 작동했다.
Bard에 물어본 결과 다음과 같은 답을 받았다.
그렇다고 한다… radio 앞에 label을 배치하게 되면 radio를 가리게 되어 작동하지 않는다고 한다..ㅜ
label을 앞에 했을 때, html은 잘 작동을 하는데 (label 클릭시, 연결된 radio가 체크되는) 스타일은 적용되지 않으니… 순서를 바꿔주기로 했다.
순서를 변경해주니 css 코드가 잘 작동했다.
그리고, checked일 때, radio 버튼의 색상을 변경할 때 그냥 color로 하면 스타일이 적용되지 않았다. 서칭을 해보니 accent-color로 적용하면 색상이 잘 적용되었다.
accent-color는 UI 컨트롤의 색상을 변경시켜줄 때 사용한다고 한다.
마무리
이번 기능들은 js가 아닌, css로도 충분히 가능할 것 같아서 css로 구현해보았다. css로 해서 금방 끝날 줄 알았는데… 생각보다 많은 난관에 봉착하여^^… 시간이 꽤 걸렸다. 역시, 코딩의 세계는 만만하지 않아…ㅜ
Comments