CSS의 최신 20가지 기능들

 

지난 몇 년은 CSS에게 정말 놀라운 정말 많은 새로운 기능이 출시되었고, 이것들은 CSS 작성 방식을 완전히 바꾸어 놓았다.

이 글에서는 가장 좋아하는 20가지 CSS 기능을 빠르게 공유한다. 더 깊이 알아보고 싶다면 MDN 문서를 확인하는 것이 좋다. 거의 모든 기능이 배울 가치가 있다.

 

1. @layer

@layer는 가장 좋아하는 CSS 기능 중 하나이다. 출시된 지 꽤 되었지만 많은 사람들이 사용하지 않는데, 정말 사용해야 한다. CSS에서 특이성 계층을 만들 수 있다. 다음과 같이 정의할 수 있다.

@layer reset, theme, defaults, layout, components, utils;

@layer reset {
  * { margin: 0; padding: 0; }
}
@layer theme {
  :root {
    --accent: #4f46e5;
  }
}
@layer utils {
  * {
    color: red;
  }
}

utils가 components (또는 다른 어떤 것) 다음에 오기 때문에, 선택자가 기술적으로 덜 구체적이더라도 항상 우선 적용된다. 다음과 같이 레이어로 직접 가져올 수도 있다.

@import url("theme.css") layer(theme);

정말 강력하고, 정말 과소평가되었다.

2. text-wrap: balance

제목 한 줄에 어색하게 한 단어만 있는 경우가 있다. text-wrap: balance가 한 줄로 해결해 준다.

h1 {
  text-wrap: balance;
}

텍스트를 여러 줄에 걸쳐 최대한 균등하게 분배한다.

그래서 다음과 같은 대신에:

한 단어만 있는 매우 긴 제목

다음과 같이 된다:

매우 긴 제목 한 단어만 있음

더 깔끔하고, 더 예쁘고, 읽기 쉽다.

3. CSS Nesting

전처리기 없이도 드디어 CSS에서 중첩을 사용할 수 있다. 더 깨끗하고 구조적인 스타일을 작성할 수 있다.

.main-title {
  font-size: 2rem;

  @media (min-width: 800px) {
    font-size: 3rem;
  }

  &.red {
    color: red;
  }

  .subtitle {
    font-size: 1.25rem;
  }
}

SCSS와 같지만 네이티브이다.

4. Container Queries

컨테이너 쿼리는 큰 문제를 해결한다: 페이지가 아닌 컨테이너의 크기에 따라 구성 요소의 스타일을 지정할 수 있다.

.card {
  container-type: inline-size;
}

@container (min-width: 450px) {
  .card {
    flex-direction: row;
  }
}
@container (max-width: 449px) {
  .card {
    flex-direction: column;
  }
}

React와 같은 구성 요소 기반 프레임워크에 적합하다. 더 이상 미디어 쿼리 혼란은 없다.

5. Relative Colors

상대 색상을 사용하면 기존 색상을 기반으로 새 색상을 계산할 수 있다.

.button {
  --bg: oklch(70% 0.2 250);
  background: var(--bg);
  border: 2px solid color-mix(in oklch, var(--bg) 85%, black);
}

.button:hover {
  background: color-mix(in oklch, var(--bg) 92.5%, black);
}

색상 공간(예: hsl → oklch) 간에 즉시 변환할 수도 있다. 테마 시스템에 매우 유용하다.

6. :has() (Parent Selector)

:has()는 기본적으로 우리가 항상 원했던 부모 선택자이다.

.input-group:has(input:valid) {
  border-color: green;
}

.input-group:has(input:invalid) {
  border-color: red;
}

이를 통해 자식 요소를 기반으로 부모 요소의 스타일을 지정할 수 있다. 정말 좋고, 이제 모든 주요 브라우저에서 지원된다.

7. @property

사용자 지정 속성은 훌륭하지만 기본적으로 애니메이션되지 않는다. @property는 유형, 상속 및 기본값을 정의하여 이 문제를 해결한다.

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.box {
  --my-color: red;
  background: var(--my-color);
  transition: --my-color 0.5s;
}
.box:hover {
  --my-color: green;
}

이렇게 하면 사용자 지정 속성이 유형에 안전하고 애니메이션 가능해진다.

8. Subgrid

Subgrid가 나오기까지 오랜 시간이 걸렸지만 드디어 출시되었고 정말 놀랍다. 자식 그리드가 부모 그리드의 트랙을 상속받을 수 있다.

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
  gap: inherit;
}

더 이상 트랙 크기를 수동으로 동기화할 필요가 없다.

9. Multi-Value display

이제 외부 및 내부 display를 별도로 정의할 수 있다.

.box {
  display: inline flex;
}

inline = 자체 레이아웃 방식 (외부) flex = 자식 레이아웃 방식 (내부)

앞으로 레이아웃 동작을 결합하는 깔끔한 방법이다.

10. display: contents

이것은 까다롭지만 매우 유용한 기능이다. 래퍼 요소의 스타일은 유지하면서 시각적으로 사라지게 만든다.

.wrapper {
  display: contents;
}

래퍼의 자식이 flex/grid 부모의 직계 자식처럼 동작하게 하여 이상한 flexbox gap 문제를 해결하는 데 적합하다.

11. Logical Properties

논리적 속성은 물리적 속성의 방향 인식 버전일 뿐이다.

.box {
  padding-inline-start: 1rem; /* padding-left 대신 */
  margin-block-end: 2rem;    /* margin-bottom 대신 */
}

쓰기 모드와 언어 방향을 존중하므로 사이트가 RTL 또는 세로 텍스트에서 자동으로 작동한다.

12. ::backdrop

::backdrop 의사 요소를 사용하면 <dialog>의 배경 스타일을 지정할 수 있다.

dialog::backdrop {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

페이드 애니메이션을 추가하면 아름다운 모달을 만들 수 있다.

13. transition-behavior: allow-discrete and 14. @starting-style

이 두 가지는 일반적으로 애니메이션할 수 없는 display와 같은 것을 애니메이션하기 위해 함께 작동한다.

@starting-style {
  dialog[open] {
    opacity: 0;
    scale: 0.8;
  }
}

dialog[open] {
  transition: opacity .3s, scale .3s;
  transition-behavior: allow-discrete;
  opacity: 1;
  scale: 1;
}

아직 Firefox에서는 지원되지 않지만 점진적 향상에 좋다.

15. field-sizing: content

이것은 정말 멋진 기능이다. JS 없이도 textarea가 내용에 따라 커지도록 한다.

textarea {
  field-sizing: content;
}

현재 Chromium에서만 지원하지만 다른 곳에서는 아무것도 망가뜨리지 않는다. 훌륭한 작은 점진적 향상이다.

16. @scope

@scope를 사용하면 CSS 모듈과 같이 특정 하위 트리에 스타일 범위를 지정할 수 있다.

@scope (.article) to (figure) {
  h2 {
    color: rebeccapurple;
  }
}

또는 <style> 태그에 인라인으로:

<section>
  <style scoped>
    h2 { color: rebeccapurple; }
  </style>
  <h2>이것만 보라색입니다</h2>
</section>

구성 요소 라이브러리에 매우 편리하다. (아직 Firefox에서는 지원되지 않음)

17. anchor() Positioning

이것은 가장 기대하는 기능 중 하나이다. 실제 앵커처럼 다른 요소를 기준으로 요소를 배치할 수 있다.

.anchor {
  anchor-name: --my-anchor;
}

.tooltip {
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(right);
}

브라우저가 모든 계산을 처리한다. 아직 최첨단 기술이지만(아직 Firefox나 Safari에서는 지원되지 않음) 판도를 바꿀 것이다.

18. Container Style Queries

앞서 크기 기반 컨테이너 쿼리를 보았다. 이것은 비슷하지만 컨테이너 내부의 스타일 값을 쿼리할 수 있다.

@container style(--accent: blue) {
  .card {
    border-color: var(--accent);
  }
}

틈새 기능이지만 나중에 테마 기반 레이아웃에 강력할 수 있다.

19. interpolate-size: allow-keywords

드디어 auto나 max-content에서 애니메이션할 수 있다!

:root {
  interpolate-size: allow-keywords;
}

.panel {
  height: 2.5rem;
  transition: height .4s;
}
.panel:hover {
  height: max-content;
}

보통은 즉시 점프하지만 이제는 부드럽게 애니메이션된다. 정말 만족스럽다.

20. CSS의 미래는 여기에 있습니다

이상으로 CSS 작성을 다시 재미있게 만드는 20가지 최신 CSS 기능이었다. 그 중 일부는 지금 바로 프로덕션에 사용할 수 있으며 다른 일부는 점진적 향상에 적합하다.

어느 쪽이든 실험해 볼 가치가 있다. 왜냐하면 이 기능들은 정말 많은 새로운 가능성을 열어주기 때문이다.