CSS if() 함수 완벽 가이드 — 조건부 스타일링의 혁명

CSS if() 함수 완벽 가이드 — 조건부 스타일링의 혁명

CSS에서 JavaScript 없이 조건 판단이 가능해졌습니다. Chrome 137에서 정식 출시된 if() 함수는 CSS 역사상 가장 혁신적인 기능 중 하나입니다. 이 글에서는 CSS if() 함수의 기본 문법부터 실전 활용법까지 상세하게 다룹니다.

원문 출처: yayujs.com/blog — 번역 및 기술 보강: 공치파(Genyboa)

CSS if() 함수란?

CSS if() 함수는 CSS 속성 값을 조건에 따라 동적으로 변경할 수 있는 새로운 CSS 함수입니다. 이전에는 JavaScript나 CSS 클래스 전환을 통해서만 가능했던 조건부 스타일링을 이제 순수 CSS만으로 구현할 수 있습니다.

이것은 단순한 문법 설탕(Syntax Sugar)이 아닙니다. CSS의 패러다임을 근본적으로 바꾸는 기능입니다. 더 이상 간단한 스타일 변경을 위해 JavaScript를 작성할 필요가 없어졌습니다.

기본 문법

if() 함수는 순서대로 조건을 확인하고, 첫 번째로 일치하는 값을 적용합니다:

/* 기본 구문 */property: if(  condition-1: value-1;  condition-2: value-2;  condition-3: value-3;  else: default-value);

JavaScript의 if...else if...else와 유사하지만, CSS 속성 값 컨텍스트에서 동작합니다. 어떤 조건도 일치하지 않으면 else 값이 적용됩니다.

지원되는 조건 유형

if() 함수는 3가지 종류의 조건을 지원합니다:

• style() — CSS 커스텀 프로퍼티(변수)의 값을 확인합니다. style(--theme: "dark")
• media() — 미디어 쿼리 조건을 확인합니다. media(width >= 768px)
• supports() — 브라우저 기능 지원 여부를 확인합니다. supports(color: lch(0 0 0))

활용 사례 1: 다크 모드 구현

이전에는 다크 모드를 구현하려면 JavaScript로 클래스를 전환하거나 prefers-color-scheme 미디어 쿼리와 함께 두 벌의 스타일을 작성해야 했습니다. CSS if()를 사용하면 CSS 변수 하나로 전체 테마를 제어할 수 있습니다:

/* CSS if()를 사용한 다크 모드 */:root {  --theme: "light"; /* 또는 "dark" */}body {  background: if(    style(--theme: "dark"): #1a1a1a;    else: #ffffff  );  color: if(    style(--theme: "dark"): #e4e4e4;    else: #333333  );}.card {  background: if(    style(--theme: "dark"): rgba(255, 255, 255, 0.05);    else: rgba(0, 0, 0, 0.02)  );  border-color: if(    style(--theme: "dark"): rgba(255, 255, 255, 0.1);    else: rgba(0, 0, 0, 0.1)  );  box-shadow: if(    style(--theme: "dark"): 0 4px 20px rgba(0, 0, 0, 0.5);    else: 0 2px 10px rgba(0, 0, 0, 0.08)  );}

JavaScript 비교: 이전에는 document.body.classList.toggle('dark')으로 클래스를 전환하고, .dark .card { ... } 형태로 별도의 스타일을 작성해야 했습니다. CSS if()를 사용하면 하나의 속성 선언 안에서 모든 것이 해결됩니다.

테마를 전환하려면 JavaScript에서 단 한 줄만 변경하면 됩니다:

// 한 줄로 테마 전환document.documentElement.style.setProperty('--theme', '"dark"');

활용 사례 2: 반응형 레이아웃

기존 방식에서는 여러 개의 @media 쿼리 블록을 작성해야 했습니다. CSS if()를 사용하면 하나의 속성 선언에서 모든 브레이크포인트를 처리할 수 있습니다:

/* 기존 방식 — 여러 미디어 쿼리 필요 */.container { width: 100%; }@media (min-width: 576px) { .container { width: 540px; } }@media (min-width: 768px) { .container { width: 720px; } }@media (min-width: 992px) { .container { width: 960px; } }@media (min-width: 1200px) { .container { width: 1140px; } }@media (min-width: 1400px) { .container { width: 1320px; } }/* CSS if() 방식 — 한 줄로 해결 */.container {  width: if(    media(width >= 1400px): 1320px;    media(width >= 1200px): 1140px;    media(width >= 992px): 960px;    media(width >= 768px): 720px;    media(width >= 576px): 540px;    else: 100%  );  padding-inline: if(    media(width >= 768px): 2rem;    else: 1rem  );}

코드가 6개의 미디어 쿼리 블록에서 2줄로 줄었습니다. 유지보수도 훨씬 간편해집니다. 브레이크포인트를 추가하거나 수정할 때 한 곳만 변경하면 됩니다.

활용 사례 3: 점진적 향상 (Progressive Enhancement)

최신 CSS 기능을 사용하면서도 구형 브라우저에서 자연스럽게 폴백하는 점진적 향상 패턴을 if()로 우아하게 구현할 수 있습니다:

/* 최신 색상 함수 사용 + 자동 폴백 */.element {  border-color: if(    supports(color: lch(0 0 0)): lch(50% 100 150);    supports(color: lab(0 0 0)): lab(50 100 -50);    else: rgb(200, 100, 50)  );}/* 최신 레이아웃 기능 사용 + 폴백 */.grid {  display: if(    supports(display: subgrid): subgrid;    supports(display: grid): grid;    else: flex  );}

이전에는 @supports 블록을 중첩하거나 별도로 작성해야 했지만, if()를 사용하면 한 줄의 속성 선언으로 모든 폴백 로직을 처리할 수 있습니다.

실전 활용: 버튼 컴포넌트

CSS 커스텀 프로퍼티와 if()를 결합하면 JavaScript 없이 다양한 버튼 변형을 만들 수 있습니다:

.btn {  --variant: "primary"; /* primary, secondary, danger, ghost */    padding: 12px 24px;  border-radius: 8px;  font-weight: 600;  border: 2px solid transparent;    background: if(    style(--variant: "primary"): #7c3aed;    style(--variant: "secondary"): #e2e8f0;    style(--variant: "danger"): #ef4444;    style(--variant: "ghost"): transparent;    else: #7c3aed  );    color: if(    style(--variant: "secondary"): #1a1a2e;    style(--variant: "ghost"): #7c3aed;    else: #ffffff  );    border-color: if(    style(--variant: "ghost"): #7c3aed;    else: transparent  );}/* 사용법 *//* 삭제 */

브라우저 지원 현황 (2025년 8월 기준)

브라우저	지원 여부	버전
Chrome / Edge	✅	137+
Chrome Android	✅	139+
Firefox	🔨	개발 중
Safari	📋	로드맵에 포함
Opera	❌	미지원

현재는 Chromium 기반 브라우저에서만 지원되므로, 프로덕션에서는 @supports를 사용한 폴백을 반드시 함께 적용하세요.

기존 방식과의 비교

CSS if()가 기존 방식을 얼마나 개선하는지 비교해봅시다:

• 미디어 쿼리 vs if(media()) — 여러 @media 블록이 하나의 속성 선언으로 통합. 코드량 80% 감소.
• @supports vs if(supports()) — 중첩된 @supports 블록이 인라인 조건으로 간소화. 가독성 대폭 향상.
• JavaScript 클래스 전환 vs if(style()) — DOM 조작 없이 CSS 변수만으로 스타일 전환. 성능 향상.

주의사항

• CSS if()는 속성 값 컨텍스트에서만 사용 가능합니다. 선택자나 속성 이름에는 사용할 수 없습니다.
• 중첩된 if()는 현재 지원되지 않습니다.
• 프로덕션에서 사용할 때는 반드시 폴백 스타일을 함께 작성하세요.
• 성능 면에서 CSS if()는 미디어 쿼리와 동등한 수준이므로 걱정할 필요가 없습니다.

마무리: 새로운 가능성

CSS if() 함수는 프론트엔드 개발의 판도를 바꿀 잠재력을 가진 기능입니다. 순수 CSS만으로 조건부 스타일링이 가능해지면서, JavaScript 의존도가 줄고 성능이 향상되며 코드가 간결해집니다.

새로운 CSS 기능을 접할 때 “반드시 지금 당장 배워야 한다”고 조급해할 필요는 없습니다. “이런 방법도 가능하다”는 가능성을 인식하는 것이 중요합니다. 프론트엔드 학습은 단거리 경주가 아닌 장거리 마라톤입니다.

👉 더 많은 CSS/프론트엔드 기술 글: 공치파(Genyboa)

관련 추천 도구

CSS if()로 다듬은 멋진 UI도 결국 누군가에게 보여줄 수 있어야 빛이 납니다. 작업한 프론트엔드 프로젝트를 빠르게 배포하고 싶다면 글로벌 SSD 기반 클라우드 서버인 DigitalOcean으로 몇 분 만에 정적 사이트나 데모 페이지를 올려 실제 환경에서 스타일을 검증해 보세요.

※ 제휴 링크가 포함되어 있으며, 가입 시 추가 비용은 없습니다.

👉 관련 가이드 더 보기