2026년 프론트엔드 개발자가 알아야 할 CSS 기능 5가지

CSS가 이렇게 빠르게 진화하고 있다는 사실, 알고 있었는가? 불과 2~3년 전만 해도 JavaScript 없이는 불가능했던 기능들이 이제 순수 CSS만으로 가능해졌다. 프론트엔드 개발자라면 2026년에 반드시 알아야 할 CSS 신기능 5가지를 정리했다.

실무에서 바로 적용할 수 있는 기능 위주로 골랐고, 브라우저 호환성과 대체 방법까지 함께 다뤘다.

목차

• 1. CSS Nesting: 전처리기 없이 중첩 스타일
• 2. Container Queries: 반응형의 새 기준
• 3. :has() 셀렉터: 부모 선택의 시대
• 4. View Transitions API: 페이지 전환 애니메이션
• 5. Subgrid: 중첩 그리드 레이아웃
• 기능별 비교표
• 마무리

1. CSS Nesting: 전처리기 없이 중첩 스타일

Sass나 Less를 쓰던 가장 큰 이유 중 하나가 중첩 문법이었다. 이제 네이티브 CSS에서 중첩을 지원한다. 2026년 기준 모든 주요 브라우저에서 사용 가능하다.

기본 문법

.card {
  padding: 1rem;

  & .title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  @media (max-width: 768px) {
    padding: 0.5rem;
  }
}

실무에서 느낀 장점은 파일 크기가 줄어드는 것보다 가독성 향상이 훨씬 크다는 점이다. 컴포넌트 단위로 스타일을 묶어서 관리할 때 어떤 스타일이 어디에 속하는지 한눈에 보인다. 다만 3단계 이상 중첩하면 오히려 읽기 어려워지니 2단계까지만 쓰는 걸 권장한다.

2. Container Queries: 반응형의 새 기준

미디어 쿼리는 뷰포트 기준이다. 하지만 컴포넌트 기반 개발에서는 부모 컨테이너 크기에 따라 레이아웃이 바뀌어야 할 때가 많다. 사이드바에 들어간 카드와 메인 영역에 들어간 카드가 같은 뷰포트에서도 다르게 보여야 하는 상황 말이다.

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

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

내가 실제로 대시보드 프로젝트에서 Container Queries를 도입했을 때, 위젯 컴포넌트의 반응형 코드가 절반으로 줄었다. 미디어 쿼리로는 위젯이 놓이는 위치마다 분기 처리를 해야 했는데, Container Queries 하나로 해결됐다.

3. :has() 셀렉터: 부모 선택의 시대

CSS에서 오랫동안 불가능했던 것이 "자식의 상태에 따라 부모를 스타일링"하는 것이었다. :has() 셀렉터가 이 문제를 해결했다.

/* 체크된 체크박스가 있는 폼 그룹 강조 */
.form-group:has(input:checked) {
  background-color: #e8f5e9;
  border-left: 3px solid #4caf50;
}

/* 이미지가 있는 카드만 다르게 레이아웃 */
.card:has(img) {
  grid-template-rows: 200px 1fr;
}

/* 빈 입력 필드 옆 라벨 스타일 */
label:has(+ input:placeholder-shown) {
  color: #999;
}

이전에는 JavaScript로 클래스를 토글해야 했던 UI 패턴을 순수 CSS로 구현할 수 있게 됐다. 폼 유효성 표시, 조건부 레이아웃, 상태 기반 스타일링에서 특히 유용하다. 다만 복잡한 :has() 셀렉터는 성능에 영향을 줄 수 있으니, 필요한 범위에서만 사용하자.

4. View Transitions API: 페이지 전환 애니메이션

SPA에서 페이지 전환 시 자연스러운 애니메이션을 넣으려면 Framer Motion 같은 라이브러리가 필요했다. View Transitions API는 브라우저 네이티브로 이 기능을 제공한다.

/* 기본 전환 애니메이션 */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

/* 특정 요소에 이름 부여 */
.hero-image {
  view-transition-name: hero;
}

/* 해당 요소만 별도 전환 */
::view-transition-old(hero) {
  animation: slide-out 0.4s ease;
}

::view-transition-new(hero) {
  animation: slide-in 0.4s ease;
}

아직 Firefox에서 완전 지원되지 않는 점은 아쉽지만, Chrome과 Safari에서는 안정적으로 동작한다. 프로그레시브 인핸스먼트 방식으로 적용하면 지원하지 않는 브라우저에서는 전환 없이 동작하니 안전하다. 개인 프로젝트에서 먼저 시도해보고, 프로덕션 적용은 브라우저 지원 현황을 확인하고 결정하길 권한다.

5. Subgrid: 중첩 그리드 레이아웃

CSS Grid를 쓸 때 가장 불편했던 점은 중첩된 그리드가 부모의 트랙을 상속하지 못한다는 것이었다. 카드 리스트에서 각 카드 내부의 제목, 설명, 버튼 영역을 일렬로 맞추려면 꼼수가 필요했다.

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* 제목, 설명, 버튼 3줄 */
}

Subgrid를 쓰면 자식 그리드가 부모의 행/열 트랙을 그대로 사용한다. 별도의 고정 높이 지정 없이도 카드 내부 요소들이 자연스럽게 정렬된다. 2026년 기준 모든 주요 브라우저에서 지원하며, 실무에서 카드형 레이아웃을 만들 때 체감 효과가 크다.

기능별 비교표

기능	대체하는 기존 방식	브라우저 지원 (2026)	실무 도입 난이도	체감 효과
CSS Nesting	Sass/Less 전처리기	모든 주요 브라우저	낮음	가독성 향상
Container Queries	미디어 쿼리 + JS	모든 주요 브라우저	중간	반응형 코드 감소
:has() 셀렉터	JS 클래스 토글	모든 주요 브라우저	낮음	JS 의존도 감소
View Transitions	Framer Motion 등	Chrome, Safari (Firefox 부분)	중간	번들 크기 감소
Subgrid	고정 높이, flexbox 꼼수	모든 주요 브라우저	낮음	정렬 코드 간소화

마무리

CSS는 더 이상 "스타일만 입히는 언어"가 아니다. 컴포넌트 단위 반응형, 상태 기반 스타일링, 네이티브 애니메이션까지 CSS만으로 가능한 시대다.

5가지를 한꺼번에 도입할 필요는 없다. 추천하는 순서는 이렇다. 먼저 CSS Nesting과 :has()부터 기존 프로젝트에 적용해보자. 빌드 설정 변경 없이 바로 쓸 수 있고, 효과가 즉각적이다. 그다음 새 프로젝트에서 Container Queries와 Subgrid를 도입하면 된다. View Transitions는 브라우저 지원이 안정되면 적용해도 늦지 않다.

중요한 건 새 기능을 아는 것보다 어떤 상황에서 쓸지 판단하는 능력이다. 새 CSS 기능이 기존 JS 솔루션보다 나은 점이 명확할 때만 도입하자.