[Trouble Shooting] CSS, calc 함수 사용시 주의사항

⚠️ 에러 내용

CSS를 이용해 Switch 버튼을 만들고 있었는데, Switch를 클릭했을 때, 상태관리를 하며 calc를 통해 left값을 변경하여 구현하고자 하였다. 여기서, calc() 는 다 알겠지만 css의 함수로서,  px, em, rem, deg, % 등의 단위를 쓰는 영역의 모든 값을 css에서 계산 처리하도록 하기 위한 함수입니다. 

그래서, 설정했던 코드는 아래와 같습니다.

초기의 left 값

const SwitchToggle = ({ style, children, ...rest }: SwitchToggleProps) => {
  const { isOn } = useSwitchContext();

  const propsStyle: CSSProperties = {
    left: isOn ? "calc(100%-27.5px)" : "2.5px",
    transition: "left 0.3s ease-in-out",
  };

  return (
    <div style={{ ...styled.toggleStyle, ...propsStyle, ...style }} {...rest}>
      {children}
    </div>
  );
};

 

분명 코드는 틀리지 않는데 클릭을 했을때 css변화가 일어나지 않아 다른것도 다 바꾸어 보았지만 계속 그대로였습니다. 뭐가 문제인지 그렇게 처음부터 다시 calc mdn을 찾아서 문서를 읽어 내려갔는데....

📌 에러 원인

calc mdn - https://developer.mozilla.org/ko/docs/Web/CSS/calc

 

정말.. 너무 터무늬 없는 이유였다. 연산기호를 할 때, 공백이 빠진 것이 원이이었다... 이렇게나 허무할 수 가..

특히 - 사용시에는 공백이 없을 경우 음수값으로 처리되기 때문에 + - 의 경우에는 반드시 공백이 필요합니다.

✅ 해결 방법

너무나도 쉽게 그냥 띄어쓰기만 하면 됐다.

  const propsStyle: CSSProperties = {
    left: isOn ? "calc(100% - 27.5px)" : "2.5px", // 띄어쓰기 적용...
    transition: "left 0.3s ease-in-out",
  };

 

이렇게 했더니.. 잘된다.. 

 

오늘의 교훈
진짜 css를 무시하지 말자
그리고 안다고 자만하지 말자