css 인라인 조건문 🅸🅵

CSS 인라인 조건문은 2024년에 CSS 언어 사양에 추가된 혁신적인 기능 중 하나인데, CSS 코드 안에서 논리적인 조건식을 직접 작성할 수 있게 해주는 기능이다.

기존에는 CSS에서 조건부 스타일링을 하려면 JavaScript, CSS 변수, 또는 특정 클래스 토글 등을 사용해야 했는데, 이제는 CSS 자체에서 이걸 어느 정도 처리할 수 있게 된 것이다.

 

CSS 인라인 조건문이란?

인라인 조건문은 CSS 속성 값 안에서 if(), else, case() 등의 조건 구문을 사용할 수 있도록 스타일을 적용할 때 조건을 CSS 코드 내에서 직접 지정할 수 있다.
브라우저 렌더링 엔진이 CSS를 계산할 때 이 조건식을 평가하고, 그에 맞는 값을 적용하는 방식이다.

즉, CSS 변수, 환경 값 (env()), container queries, prefers-color-scheme 같은 컨텍스트에 따라 조건적으로 값을 반환할 수 있다.

 

 

기본 문법

1️⃣ if() 함수

property: if(<조건>, <참일 때 값>, <거짓일 때 값>);

 

 

2️⃣ case() 함수 (다중 조건)

property: case(
  when <조건1> then <값1>,
  when <조건2> then <값2>,
  ...
  else <기본 값>
);

여러 조건을 순차적으로 검사, 처음 참인 조건의 값을 반환

 

 

사용 예시

// prefers-color-scheme에 따른 색상 지정
// 시스템 테마가 light면 글자색은 검정, 아니면 흰색
color: if(prefers-color-scheme() = light, black, white);

// container query 값 기반 조건
// 컨테이너 폭이 600px 이상이면 글자 크기 2rem, 아니면 1rem
font-size: if(container-width() > 600px, 2rem, 1rem);

// case()로 다중 조건
// 컨테이너 폭에 따라 다른 padding 값을 적용
padding: case(
  when container-width() > 1200px then 4rem,
  when container-width() > 800px then 2rem,
  else 1rem
);

 

 

장점

• 반응형 디자인을 더 간결하게 작성
• 다크 모드 / 라이트 모드 스타일을 CSS 안에서 처리
• CSS 변수와 조합해 유연한 테마 지정
• container query + 조건문으로 컴포넌트 기반 디자인 강화

 

주의사항

1️⃣ 브라우저 지원:
2024년 이후 최신 브라우저부터 순차적으로 지원되고 있으며, Chrome, Edge, Safari 최신 버전에서는 실험적 플래그나 최신 릴리스에서 점차 사용 가능해지고 있다. 레거시 브라우저는 지원하지 않으므로, 폴백(fallback) 스타일을 함께 작성하는 것이 좋다.

 

2️⃣ 성능 이슈:
조건문이 너무 복잡하거나 중첩되면 CSS 계산 비용이 늘어날 수 있기 때문에 필요 최소한으로 사용하는 것이 바람직하다.

 

3️⃣ JS/HTML과의 협업 고려:
조건이 브라우저 환경값/컨테이너 값에 국한되므로, 사용자 상호작용에 따라 실시간 변경되는 동적 조건은 JS와 함께 쓰는 것이 더 적절하다.

 

 

마무리하며

CSS 인라인 조건문은 스타일을 CSS 코드 내에서 논리적으로 제어할 수 있게 하여 더 간결하고, 유지보수가 쉬운 CSS를 작성할 수 있게 돕는다.

기존 CSS 변수, container queries, media queries의 한계를 보완하는 강력한 도구가 될 수 있다고 생각한다.

 

 

이상 스텔라였습니다. ✍️