input checkbox를 클래스와 함께 선택하는 방법

HTML에서 checkbox는 다양한 방식으로 사용되며, 이를 CSS로 스타일링할 때 특정한 클래스나 상태에 맞게 세밀하게 적용할 수 있습니다. 이 글에서는 CSS에서 input 태그 중 checkbox 타입을 선택하고, 클래스나 특정 상태에 따라 스타일을 적용하는 다양한 방법을 살펴보겠습니다.

 

1. 직접 선택자 사용

input 태그와 checkbox 타입, 그리고 클래스 이름을 지정하여 간단하게 선택할 수 있습니다.

input[type="checkbox"].my-checkbox {
  /* 스타일 적용 */
}

• input[type="checkbox"]: input 태그 중 type 속성이 "checkbox"인 요소만 선택합니다.
• .my-checkbox: 클래스 이름이 "my-checkbox"인 요소를 선택합니다.

이 선택자는 checkbox 타입의 input 태그 중에서 my-checkbox 클래스를 가진 요소에 스타일을 적용할 수 있습니다.

 

2. 자손 선택자 사용

만약 checkbox가 다른 요소(예: div) 안에 포함되어 있을 경우, 자손 선택자를 활용해 스타일을 적용할 수 있습니다.

<div class="container">
  <input type="checkbox" class="my-checkbox">
</div>

.container input[type="checkbox"].my-checkbox {
  /* 스타일 적용 */
}

• .container: 클래스 이름이 "container"인 요소를 선택합니다.
• input[type="checkbox"].my-checkbox: checkbox 타입의 input 태그 중 my-checkbox 클래스를 가진 요소를 선택하여 스타일을 적용합니다.

이 방법은 특정 컨테이너 안에 있는 checkbox를 스타일링할 때 유용합니다.

 

3. ID 선택자 사용

checkbox에 고유한 ID를 부여한 뒤, ID 선택자를 사용하여 스타일을 적용할 수 있습니다.

<input type="checkbox" id="my-checkbox" class="my-checkbox">

#my-checkbox {
  /* 스타일 적용 */
}

• #my-checkbox: ID가 "my-checkbox"인 요소를 선택하여 스타일을 적용합니다.

ID 선택자는 가장 구체적인 CSS 선택자 중 하나이며, 동일한 ID를 가진 요소가 없다는 보장이 있을 때 사용됩니다.

 

4. 가상 클래스 사용

checkbox가 체크되었을 때 또는 체크되지 않았을 때 다른 스타일을 적용하고 싶다면, 가상 클래스 :checked 또는 :not(:checked)를 사용할 수 있습니다.

input[type="checkbox"].my-checkbox:checked {
  /* 체크되었을 때 스타일 */
}

input[type="checkbox"].my-checkbox:not(:checked) {
  /* 체크되지 않았을 때 스타일 */
}

• :checked: checkbox가 체크되었을 때 스타일을 적용합니다.
• :not(:checked): checkbox가 체크되지 않았을 때 스타일을 적용합니다.

이 방법을 통해 checkbox의 상태에 따라 동적으로 스타일을 변경할 수 있습니다.

 

5. 예시 코드

아래는 위에서 설명한 내용을 종합하여 checkbox에 스타일을 적용한 예시입니다.

 

See the Pen Untitled by park drake (@DrakeP) on CodePen.

 

이 코드는 my-checkbox 클래스를 가진 checkbox가 체크되었을 때 하늘색 배경색이 적용되도록 설정합니다. 체크되지 않았을 때는 기본 테두리와 크기를 적용합니다.

 

출처: 서브웨이 회원가입 스타일

CSS 접근 방법을 응용한다면, input checkbox 뿐만 아니라, radio, text 등을 다양하게 스타일링 할 수 있습니다. 다양한 홈페이지를 보면서 스타일을 적용하는 방법도 연습하시면 좋을 것 같습니다.