CSS의 조건문: 대안적 접근법

현대 웹 개발에서는 동적 변수를 기반으로 사용자 경험을 원활하게 조정하는 것이 필수적입니다. CSS는 스타일링에 강력하지만 if/else와 같은 전통적인 조건문이 부족합니다. 그러나 여러 대안을 통해 유사한 기능을 구현할 수 있습니다.

한 가지 접근 방식은 클래스를 활용하는 것입니다. 특정 클래스로 HTML 요소를 조작하면 해당 클래스의 유무에 따라 다양한 스타일을 적용할 수 있습니다. 다음 예를 고려해보세요.

Text
Text

p.normal {
  background-position: 150px 8px;
}
p.active {
  background-position: 4px 8px;
}

Sass와 같은 CSS 전처리기는 조건문에 대한 고급 기능도 제공합니다. 포함된 조건문은 보다 복잡한 논리를 허용합니다:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  }
  @else if $type == matador {
    color: red;
  }
  @else if $type == monster {
    color: green;
  }
  @else {
    color: black;
  }
}

최신 CSS에 도입된 맞춤 속성은 동적 스타일을 위한 유용한 도구를 제공합니다. 변수처럼 동작하며 런타임에 평가됩니다.

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

서버 측 제어의 경우 PHP와 같은 언어로 스타일시트를 전처리하면 동적 수정이 가능합니다.

p {
  background-position: = (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

CSS에는 전통적인 if/else 구문이 없지만 이러한 대안은 동적이고 반응이 빠른 사용자 인터페이스를 만드는 유연하고 효과적인 방법을 제공합니다.