[CSS] CSS만으로 라디오 버튼 체크 시 요소 보이게 하기 (display: block)
웹사이트에서 input[type="radio"]가 체크되었을 때 특정 요소를 보이게 하려면 CSS만으로도 쉽게 구현할 수 있습니다. 이번 포스팅에서는 :checked 가상 클래스와 + 및 ~ 형제 결합자(Combinator)를 활용하는 방법에 대해서 알아보겠습니다.기본 예제: + (인접 형제 선택자) 사용하기input[type="radio"]:checked + .content는 체크된 input 바로 다음에 오는 .content 요소를 선택하여 display: block;으로 변경합니다.* 주의할 점은 +는 인접한 형제 요소만 선택할 수 있기 때문에, 중간에 다른 요소가 있으면 .content에 스타일이 적용되지 않습니다. 옵션 선택이 내용이 표시됩니다! ~ (일반 형제 선택자) 사용하기+ 선택자는..
2025.03.26