[CSS] CSS만으로 라디오 버튼 체크 시 요소 보이게 하기 (display: block)

웹사이트에서 input[type="radio"]가 체크되었을 때 특정 요소를 보이게 하려면 CSS만으로도 쉽게 구현할 수 있습니다. 이번 포스팅에서는 :checked 가상 클래스와 + 및 ~ 형제 결합자(Combinator)를 활용하는 방법에 대해서 알아보겠습니다.

기본 예제: + (인접 형제 선택자) 사용하기

input[type="radio"]:checked + .content는 체크된 input 바로 다음에 오는 .content 요소를 선택하여 display: block;으로 변경합니다.
* 주의할 점은 +는 인접한 형제 요소만 선택할 수 있기 때문에, 중간에 다른 요소가 있으면 .content에 스타일이 적용되지 않습니다.

<label>
  <input type="radio" name="toggle" id="radio1">
  옵션 선택
</label>
<div class="content">이 내용이 표시됩니다!</div>

<style>
  .content {
    display: none;
  }

  input[type="radio"]:checked + .content {
    display: block;
  }
</style>

 

~ (일반 형제 선택자) 사용하기

+ 선택자는 바로 다음 형제 요소만 선택할 수 있는 반면, ~ 선택자는 같은 부모 안에 있는 모든 뒤에 나오는 형제 요소를 선택할 수 있습니다.
input[type="radio"]:checked ~ .content는 같은 부모 요소 내에서 input 뒤에 있는 모든 .content 요소를 선택하여 표시합니다. 따라서 중간에 다른 요소가 있어도 정상적으로 동작하며, 보다 유연한 스타일링이 가능합니다.

<div>
  <input type="radio" id="radio1" name="toggle">
  <label for="radio1">옵션 1</label>
  
  <p>이 요소가 중간에 있음</p>
  
  <div class="content">이 내용이 표시됩니다!</div>
</div>

<style>
  .content {
    display: none;
  }

  input[type="radio"]:checked ~ .content {
    display: block;
  }
</style>

 

언제 + 와 ~ 를 사용할까?

• +를 사용할 때 → input 바로 다음 요소를 표시해야 할 때
• ~를 사용할 때 → input과 .content 사이에 다른 요소가 있어도 적용되길 원할 때

 

여러 개의 라디오 버튼으로 콘텐츠 변경하기

라디오 버튼을 여러 개 만들어 하나의 name 그룹으로 묶으면, 체크된 버튼에 따라 특정 .content만 표시할 수 있습니다. 이때 + label + .content를 사용하면 라벨 다음에 나오는 .content 요소를 선택하여 스타일을 적용할 수 있습니다.

<input type="radio" name="toggle" id="radio1">
<label for="radio1">옵션 1</label>
<div class="content">옵션 1 내용</div>

<input type="radio" name="toggle" id="radio2">
<label for="radio2">옵션 2</label>
<div class="content">옵션 2 내용</div>

<style>
  .content {
    display: none;
  }

  input[type="radio"]:checked + label + .content {
    display: block;
  }
</style>

 

 

CSS만으로도 간단히 탭 메뉴 구현!

위의 방법을 활용하여 탭 메뉴를 CSS만으로 구현할 때도 유용하게 사용할 수 있습니다.

각 탭을 input[type="radio"]로 만들고, 탭에 해당하는 콘텐츠를 .content로 지정하면 클릭할 때마다 특정 콘텐츠만 보이도록 설정할 수 있습니다.

<div class="tabMenu">
  <input type="radio" name="tab" id="tab1" checked>
  <label for="tab1">탭 1</label>
  <div class="content">탭 1의 내용</div>
  
  <input type="radio" name="tab" id="tab2">
  <label for="tab2">탭 2</label>
  <div class="content">탭 2의 내용</div>
</div>

<style>
  .content {
    display: none;
  }
  
  input[type="radio"]:checked + label + .content {
    display: block;
  }
</style>

 

 

CSS만으로 라디오 버튼을 이용해 요소를 보이게 하는 방법은 웹 개발에서 유용한 기술입니다. +와 ~ 선택자를 적절히 활용하면, 구조에 따라 보다 유연하고 효율적인 스타일링이 가능합니다. 이를 통해 간단한 탭 메뉴 구현이나 다양한 콘텐츠 표시를 CSS만으로 쉽게 활용해 보세요!

 

 

[Git] git rebase 취소하는 방법에 대해서 알아보자 (feat. git reflog, git reset)

 

[macOS] Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법

 

 

[Server] 외부에서 파일을 보다 안전하게 공유하는 방법 (feat. Synology Nas Server)

 

 

[Javascript] e.target vs e.currentTarget : 웹 개발자가 알아야 할 이벤트 객체의 중요한 속성

 

[AI] 1분이면 가능! Gamma로 빠르고 멋진 PPT와 웹사이트 제작하기