CSS에서 숫자 비교와 조건 로직 구현 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
CSS 변수와 조건 스타일링을 활용하는 웹 개발자, 중급 이상의 CSS 이해도를 가진 개발자
핵심 요약
calc()
,abs()
,sign()
함수를 조합하여 숫자 비교(===
,>
,<
)를 구현 가능- CSS 변수(--isNotEqual, --isGreaterThan 등) 생성으로 이진 조건 로직 구현 가능
- Safari, Firefox만 지원되는
abs()
/sign()
함수로 인해 브라우저 호환성 고려 필요
섹션별 세부 요약
1. 문제 상황
- CSS에서
@when
/@else
지원 없음 0
/1
외의 숫자를 사용하는 CSS 변수에 대한 조건 로직 필요- JS의
if-else
구조와의 차이점 강조
2. 해결 방법
calc(var(--a) - var(--b))
로 차이 계산 후abs()
로 절대값 처리sign()
함수로 0/1/-1 값 도출 (예:--isNotEqual: sign(abs(calc(...)))
)--isEqual
은1 - var(--isNotEqual)
로 계산
3. 비교 연산자 구현 예시
--isLessThan
:sign(max(0, calc(var(--b) - var(--a))))
--isGreaterThan
:sign(max(0, calc(var(--a) - var(--b))))
--isLessThanOrEqual
:calc(1 - var(--isGreaterThan))
4. 데모 및 한계
- CodePen 데모 링크 제공 (fallback 지원 포함)
abs()
/sign()
은 Safari 14+, Firefox 85+ 지원 (Chrome, Edge 미지원)
결론
calc()
+abs()
+sign()
조합으로 CSS 내 숫자 비교 가능- 브라우저 호환성을 위해 polyfill 또는 fallback 구현 권장
- CSS 변수 기반 조건 로직은 복잡한 UI 동적 스타일링에 유용함