CSS 변수를 활용한 수치 비교 및 조건부 로직 구현

핵심 기술

이 글은 CSS에서 아직 공식적으로 지원되지 않는 조건부 로직 구현을 위해 CSS 변수와 calc(), abs(), sign() 함수를 조합하는 창의적인 방법을 제시합니다. 이를 통해 숫자 변수 간의 비교를 가능하게 하여 동적인 스타일 제어를 구현합니다.

기술적 세부사항

• CSS 변수 활용: 0 또는 1 값을 갖는 CSS 변수 외에 일반 숫자 변수(var(--a), var(--b))를 사용하여 수치 비교 로직을 구현합니다.
• calc() 함수: 두 변수의 차이를 계산하는 데 사용됩니다 (calc(var(--a) - var(--b))).
• abs() 함수: 계산된 차이의 절대값을 얻습니다 (abs(calc(var(--a) - var(--b)))).
• sign() 함수: 절대값의 부호를 이용하여 비교 결과를 1 (양수), -1 (음수), 또는 0 (영)으로 반환합니다.
  • --isNotEqual: sign(abs(calc(var(--a) - var(--b))))을 사용하여 a와 b가 다르면 1, 같으면 0을 반환합니다.
  • --isEqual: calc(1 - var(--isNotEqual))을 통해 --isNotEqual의 반대값으로 동등 여부를 판단합니다.
  • --isLessThan: sign(max(0, calc(var(--b) - var(--a))))을 사용하여 b가 a보다 크면 1, 같거나 작으면 0을 반환합니다.
  • --isGreaterThan: sign(max(0, calc(var(--a) - var(--b))))을 사용하여 a가 b보다 크면 1, 같거나 작으면 0을 반환합니다.
  • --isLessThanOrEqual: calc(1 - var(--isGreaterThan))을 통해 --isGreaterThan의 반대값으로 판단합니다.
  • --isGreaterThanOrEqual: calc(1 - var(--isLessThan))을 통해 --isLessThan의 반대값으로 판단합니다.
• 브라우저 지원: abs()와 sign()은 아직 부분적인 브라우저 지원만 가능하며, Safari와 Firefox에서 주로 지원됩니다. 다른 브라우저에서는 폴백(fallback) 처리가 필요할 수 있습니다.

개발 임팩트

이 기법을 통해 CSS만으로 복잡한 조건부 스타일링이나 동적인 UI 로직을 구현할 수 있어 JavaScript 의존도를 줄이고 CSS의 표현력을 확장할 수 있습니다. 향후 CSS 표준에 조건부 로직이 도입될 경우 더욱 유용하게 활용될 잠재력이 있습니다.

커뮤니티 반응

글에서는 Lea Verou와 같은 다른 개발자들의 CSS 변수를 활용한 바이너리 로직 가이드가 언급되었으며, 본 게시물은 숫자 비교를 통한 더 광범위한 논리 구현 방법을 제시하며 제안을 환영하고 있습니다. CodePen 데모 링크도 제공되어 실제 적용을 확인할 수 있습니다.