css 체크했을 때 효과 주기 - checked

CSS에서 checked 가상 클래스는 HTML 폼 요소 중에서 사용자에 의해 선택된 상태를 스타일링하기 위해 사용됩니다. 주로 체크박스, 라디오 버튼 등과 함께 사용되며, 선택된 요소에 대한 스타일을 지정할 수 있습니다.

 

 

checked 가상 클래스의 사용 예시

아래는 HTML 체크박스와 함께 checked 가상 클래스를 사용한 CSS 예시입니다.

 

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">체크박스</label>

 

input[type="checkbox"]:checked + label {
  color: red;
}

 

위 예시에서는 input 요소의 type 속성이 "checkbox"인 경우에만 checked 가상 클래스가 적용됩니다. checked 가상 클래스를 사용하여 선택된 체크박스에 대한 스타일을 변경하고 있습니다. 위 예시에서는 선택된 체크박스의 라벨 텍스트를 빨간색으로 스타일링하고 있습니다.

 

 

checked 가상 클래스의 활용

checked 가상 클래스는 사용자가 어떤 요소를 선택했을 때 동적으로 스타일을 변경할 수 있는 강력한 기능입니다. 이를 활용하여 사용자에게 시각적인 피드백을 제공하거나 선택된 요소에 대한 다른 동작을 수행할 수 있습니다. 예를 들어, 체크박스가 선택되면 해당 항목을 활성화하는 등의 동작을 구현할 수 있습니다.

 

결론

checked 가상 클래스는 CSS에서 사용자에 의해 선택된 요소를 스타일링하기 위해 사용되는 유용한 기능입니다. 체크박스, 라디오 버튼 등과 함께 사용하여 선택된 요소에 대한 시각적인 효과를 적용하거나 다른 동작을 수행할 수 있습니다.

 

CSS 미디어 쿼리 (Media Query)