WeniVooks

검색

HTML/CSS 베이스캠프

최신 CSS 기술

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

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

1. CSS Variables (2017)

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

브라우저 지원 여부

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

위니브 디자인 시스템
2. :is() and :where() Pseudo-Classes (2020)

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

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

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

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

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

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

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

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

브라우저 지원 여부

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

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

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

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

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

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

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

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

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

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

브라우저 지원 여부
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;
}
.navbar {
  background-color: #4267B2;
}
.navbar ul {
  list-style-type: none;
}
.navbar ul li {
  display: inline-block;
  color: white;
}

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

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

8장 부록