[TIL] Input checkbox 체크 시 부모 요소 CSS 적용

TIL

CSS

Input Checkbox

checkbox input을 사용해서 클릭되었을 때 input을 감싸고 있는 부모 요소에 css를 적용하고 싶었다.

기본적으로 알아야할 것은 css에는 부모 선택자가 없다.

따라서 보통 JS로 구현을 하게 된다.

나는 React에서 check가 되었을 때에 따라 className을 다르게 주어 부모 요소에서 check/uncheck를 알 수 있고, CSS가 적용되게 구현했다.

코드

JSX

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="App">
      <label className={`${checked ? "checked" : ""} checkboxCard`}>
        <input
          type="checkbox"
          id="checkTest"
          onChange={(e) => setChecked(e.target.checked)}
        />
        <label htmlFor="checkTest">체크하기</label>
      </label>
    </div>
  );
}

CSS

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkboxCard {
  width: fit-content;
  border: 1px solid gray;
  border-radius: 10px;
  padding: 1rem 2rem;
  cursor: pointer;
}

.checkboxCard.checked {
  border: 2px solid red;
}

.checkboxCard input,
.checkboxCard label {
  color: black;
  cursor: pointer;
}

.checkboxCard input:checked ~ label {
  color: red;
}

동작

border의 문제점

box-sizing을 border-box로 주었음에도 컨텐츠/레이아웃의 위치 및 크기가 변화가 생긴다.

이는 border는 레이아웃의 구성요소인데, border 자체의 값이 변하면서 컨텐츠 전체의 크기가 변화하게 되는 것이다.

따라서 레이아웃과 관계없이 테두리를 설정하려면

outline을 사용하면 된다.

.checkboxCard.checked {
  border: 1px solid transparent;
  outline: 2px solid red;
}

결과

회고 (TIL)

2022.04.26 Daily 회고

✏오늘 한 일

• Vue 업무

⁉느낀 점

얼른 자리를 잡아야 공부도 더 할텐데..
지금 많이 못한다고 계속 조금하지 말자.

자리 잡으면 평일 하루 최소 2시간 이상은 꼭하자!

🎃현재 나의 상태

빨리 어려운 걸 겪어야 나중에 덜 힘들텐데!
일단 업무 조금이라도 쉬울 때 공부 많이해두자!

📚 내일 할 것

• Vue 업무 마무리
• Vue 추가 업무 할당 및 시작
• 환경 세팅 알아보기 중요
  • next, rollup, babel, 등등
• React 프로젝트 문서화

---