비교적 새롭게 적용된 CSS 기능들

CSS의 최신 기능들은 웹 디자인과 개발을 더욱 강력하고 유연하게 만들어 주고 있습니다. 이전에 Sass나 Less와 같은 CSS 전처리기를 사용해야 했던 기능들이 CSS 자체에 추가되면서 코드 작성과 유지보수가 더욱 편리해졌습니다. 이 챕터에서는 비교적 최근에 추가된 CSS 기능들을 소개하고, 이러한 기능들을 활용하는 방법을 알아보겠습니다.

1. CSS Variables (2017)

CSS에 변수를 사용하는 것은 Sass나 Less와 같은 CSS 전처리기에서 사용하던 기능 중 하나입니다. 최근에 자주 사용되어 처음부터 있던 기능이라 생각하시는 분들도 있으시지만 2017년에 나온 비교적 최신 CSS 기능입니다. CSS 변수는 --로 시작하는 이름을 가지며, var() 함수를 사용하여 값을 참조할 수 있습니다. 이를 통해 스타일을 더 쉽게 재사용하고 관리할 수 있습니다. 대부분의 브라우저에서 지원하지만 익스플로러에서는 지원이 되지 않으므로 프로젝트에 따라 주의하여 사용해야 합니다.

<p class="element">lorem ipsum dolor sit amet</p>

:root {
  --main-color: #06c;
}
.element {
  color: var(--main-color);
}

위니브에서는 아래와 같이 figma에서 회사 브랜드에 관련된 컬러, 그리드 시스템, 아이콘 등의 변수를 관리하고 있습니다. 개발할 때 이를 기본 세팅으로 가져갑니다.

2. :is() and :where() Pseudo-Classes (2020)

:is()와 :where()는 여러 개의 선택자를 한꺼번에 지정할 수 있는 간편한 방법을 제공합니다. :is()는 여러 개의 선택자를 지정할 때 사용하며, :where()는 :is()와 유사하지만, 우선순위가 낮습니다.

여러 개의 선택자를 선택하는 것은 기존에도 아래와 같은 방법으로 가능했습니다.

h1,
h2,
h3 {
  color: blue;
}

다만 만약 h1과 h2와 h3 안에 있는 요소를 선택하고 싶다면 아래와 같이 하나씩 선택자를 지정해야 했습니다.

h1 a,
h2 a,
h3 a {
  color: blue;
}

이러한 경우 :is()를 사용하면 아래와 같이 간단하게 표현할 수 있습니다.

:is(h1, h2, h3) a {
  color: blue;
}

역시 익스플로러를 제외하고 대부분의 브라우저에서 지원하고 있으므로 충분히 실무에서 사용할 수 있습니다.

<h1><a>hello</a></h1>
<h2><a>hello</a></h2>
<h3><a>hello</a></h3>
<h4><a>hello</a></h4>

:is(h1, h2, h3) a {
  color: blue;
}

where()는 :is()와 유사하지만, 우선순위가 낮습니다. 아래 예제를 보며 is()와 where()를 동시에 사용했을 경우 어떻게 처리되는지 확인해 보도록 하겠습니다. 확인이 되었다면 is()를 삭제해 보세요.

<h1><a>hello</a></h1>
<h2><a>hello</a></h2>
<h3><a>hello</a></h3>
<h4><a>hello</a></h4>

:is(h1, h2, h3) a {
  color: blue;
}
:where(h1, h2, h3) a {
  color: red;
}

3. :not() Pseudo-Class (2011)

:not()은 2011년도에 나온 의사 클래스로 이미 나온 지 10년이 넘었지만, 모르시는 분들이 많아 소개하게 되었습니다. 뒤에 has()와 결합하여 막강한 기능을 가집니다. 실무에서도 자주 사용하는 기능이므로 알아두시면 좋습니다.

:not()은 선택자에서 제외할 요소를 지정할 때 사용합니다. 이를 통해 특정 요소를 제외하고 스타일을 적용할 수 있습니다. 아래 예시에서는 h1 요소 중에서 h1 요소 안에 있는 a 요소를 제외하고 스타일을 적용합니다.

<p>lorem ipsum dolor sit amet</p>
<p class="test">lorem ipsum dolor sit amet</p>

<span><a>hello</a></span>
<span><a>hello</a></span>
<span><a>hello</a></span>
<span>hello</span>
<span>hello</span>

p:not(.test) {
  color: red;
}

span:not(:has(a)) {
  color: blue;
}

has()는 아래에서 소개하지만, 충분히 읽는 것만으로도 의미를 파악할 수 있기에 예제로 두었습니다.

아래와 같은 코드가 자주 사용됩니다.

<ul>
  <li>apple</li>
  <li>banana</li>
  <li>cherry</li>
</ul>

ul li:not(:last-of-type) {
  color: blue;
}

4. :has() Pseudo-Class (2022)

:has()는 2022년에 도입된 의사 클래스입니다. 이 의사 클래스는 특정 요소가 자식 요소를 포함하고 있는지를 검사할 수 있게 해주며, CSS 선택자의 강력한 기능을 제공합니다. 다른 요소 안에 특정 요소가 포함되어 있는지 여부에 따라 스타일을 적용할 수 있어 매우 유용합니다.

예를 들어, 특정 요소가 자식으로 링크를 포함하고 있는 경우에만 스타일을 적용하고 싶을 때 사용할 수 있습니다. 아래 예시에서는 div 요소가 a 요소를 포함하고 있는 경우에만 배경색을 변경합니다.

<div>
  <p>lorem ipsum</p>
</div>
<div>
  <a href="#">click me</a>
</div>

div:has(a) {
  background-color: lightblue;
}

익스플로러를 제외하고 대부분의 브라우저에서 사용할 수 있습니다.

5. CSS Nesting (2023)

CSS Nesting은 2023년에 도입된 기능으로, CSS 전처리기에서 제공하던 중첩 규칙을 CSS 자체에서 사용할 수 있게 해줍니다. 이 기능을 통해 CSS 코드를 더욱 간결하고 계층적으로 작성할 수 있습니다.

기존의 CSS에서는 자손 선택자를 사용할 때 중복되는 부분이 많았습니다. 예를 들어, 다음과 같은 스타일을 작성하려면 중복되는 선택자를 여러 번 써야 했습니다.

.navbar {
  background-color: #4267b2;
}
.navbar ul {
  list-style-type: none;
}
.navbar ul li {
  display: inline-block;
  color: white;
}

CSS Nesting을 사용하면 다음과 같이 중첩된 구조로 더 간결하게 작성할 수 있습니다.

<nav class="navbar">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

.navbar {
  background-color: #4267b2;

  ul {
    list-style-type: none;

    li {
      display: inline-block;
      color: white;
    }
  }
}

일반 요소의 네이스팅 뿐만 아니라 :hover와 같은 상태에 대한 네이스팅도 가능합니다. Sass처럼 &를 사용하여 부모 선택자를 참조할 수 있습니다.

<button>Click me</button>

button {
  background-color: blue;
  color: white;

  &:hover {
    background-color: green;
  }
}

이러한 방식은 코드의 가독성을 높이고 유지보수를 쉽게 만들어 줍니다. 익스플로러를 제외하고 대부분의 브라우저에서 사용할 수 있습니다.