새 if() 함수를 사용한 CSS 조건문

Una Kravets

게시일: 2025년 7월 1일

Chrome 137부터 if() 함수를 사용하여 CSS 인라인 조건문을 사용해 볼 수 있습니다. if()는 스타일 쿼리 및 미디어 쿼리와 같은 동적 스타일을 위한 더 깔끔한 개발자 인터페이스를 제공하며, 이 포스트에서 몇 가지 주요 차이점을 알아볼 수 있습니다.

CSS if() 함수는 다음과 같이 구성된 일련의 조건-값 쌍을 사용하여 작동합니다.

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

다른 조건이 충족되지 않는 경우에 사용되는 else 문을 제공할 수 있습니다.

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

현재 if()는 다음과 같은 세 가지 유형의 쿼리와 함께 작동합니다.

• style(): 스타일 쿼리
• media(): 미디어 쿼리
• supports(): 쿼리를 지원합니다.

몇 가지 예를 들어 설명해 보겠습니다.

데모: 인라인 미디어 쿼리

if()를 사용하면 스타일에 인라인 미디어 쿼리를 포함할 수 있습니다. 예를 들어 사용자의 테마 설정 (밝은 모드 또는 어두운 모드)을 확인하거나 뷰포트 너비에 관한 인라인 미디어 쿼리를 실행할 수 있습니다. 다음 예는 포인터 기기의 미디어 쿼리를 보여줍니다. 버튼의 기본 크기는 마우스와 같이 정밀한 포인터가 있는 기기에서는 30px이지만, 대략적인 포인터가 있는 기기와 같은 터치 스크린 기기의 경우 버튼 크기는 액세스가 더 쉬워지도록 적절한 터치 간격을 위해 권장 최소 크기인 44px입니다.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

위의 코드는 다음 미디어 쿼리와 동일한 결과를 제공합니다.

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

if() 형식을 사용하면 두 가지 위치에서 스타일 지정 로직을 사용할 필요 없이 로직을 인라인으로 가져올 수 있습니다.

데모: 인라인 지원 쿼리

if()를 사용하는 또 다른 방법은 인라인 지원 쿼리를 만드는 것입니다. 예를 들어 OKLCH와 같은 넓은 색상 영역 지원을 확인하려면 다음을 사용할 수 있습니다.

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

이 코드를 사용하면 브라우저가 oklch 색상 공간을 지원하는 경우 사용자에게 더 선명한 색상이 표시되고 ::after 가상 콘텐츠에 '브라우저에서 OKLCH를 지원합니다'라는 메시지도 표시됩니다.

rgb와 고급 색상 공간의 차이점을 자세히 알아보려면 oklch.com에서 색상 선택 도구와 리소스를 확인하세요.

데모: UI 상태 시각화

상태 기반 스타일 지정에도 if()를 사용할 수 있습니다. 예를 들어 UI 상태 (대기 중 또는 완료됨)에 따라 진행률 카드의 스타일을 지정합니다. 상태를 데이터 속성 또는 맞춤 속성에 직접 저장한 다음 if()를 사용하여 속성에 인라인으로 스타일을 적용합니다.

<div class="card" data-status=>"c<ompl>ete"
  ...
/div

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

if() 함수 내에 style()를 사용하면 CSS 스타일 쿼리에서 요구하는 상위 요소가 필요하지 않고 타겟팅하는 요소의 스타일을 직접 지정할 수 있습니다.

이 데모에서는 if()를 사용하여 CSS에 대한 새로운 아키텍처 접근 방식을 지원하는 방법의 기본 사례를 보여줍니다. 클래스 대신 CSS 맞춤 속성을 사용하는 한 가지 이점은 CSS에서 쉽게 업데이트할 수 있다는 것입니다. 예를 들어 미디어 쿼리 또는 :hover와 같은 가상 상태를 사용하여 업데이트할 수 있습니다.

다음 단계

if()를 추가하면 CSS 개발자에게 새로운 아키텍처 기회가 제공됩니다. 스타일 쿼리와 같은 기술이 발전함에 따라 if() 함수 내에서 범위 쿼리가 가능해질 수 있으며, 향후 맞춤 함수 제안서 (CSS @function)와 결합할 때도 유용합니다.

이러한 기능에 대해 자세히 알아보려면 다음을 확인하세요.

• 데모 3의 3분 길이 동영상 둘러보기
• Lea Verou의 도움말