2026년 모던 CSS 테크닉 총정리

CSS의 르네상스

최근 몇 년간 CSS는 역사상 가장 빠른 진화를 겪고 있습니다. 과거에는 전처리기(Sass, Less)나 CSS-in-JS 없이는 불가능했던 기능들이 이제 네이티브 CSS로 가능해졌습니다. 2026년 현재, 모든 주요 브라우저에서 지원하는 핵심 기술들을 살펴봅니다.

1. CSS Nesting

더 이상 Sass가 필요 없습니다. 네이티브 CSS 중첩이 모든 브라우저에서 지원됩니다.

/* 네이티브 CSS Nesting */
.card {
  padding: 1.5rem;
  border-radius: 1rem;
  background: white;

  & .title {
    font-size: 1.25rem;
    font-weight: 700;

    &:hover {
      color: var(--primary);
    }
  }

  & .description {
    color: oklch(0.5 0 0);
    line-height: 1.6;
  }

  @media (width < 768px) {
    padding: 1rem;
  }
}

2. Container Queries

반응형 디자인의 게임 체인저. 뷰포트가 아닌 컨테이너 크기에 따라 스타일을 변경합니다.

/* 컨테이너 선언 */
.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

/* 컨테이너 쿼리 */
@container sidebar (width > 300px) {
  .widget {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@container sidebar (width <= 300px) {
  .widget {
    display: flex;
    flex-direction: column;
  }
}

실전 활용: 카드 컴포넌트

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

.card {
  display: grid;
  gap: 1rem;
}

/* 좁은 컨테이너: 세로 레이아웃 */
@container (width < 400px) {
  .card {
    grid-template-columns: 1fr;
  }

  .card-image {
    aspect-ratio: 16 / 9;
  }
}

/* 넓은 컨테이너: 가로 레이아웃 */
@container (width >= 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }

  .card-image {
    aspect-ratio: 1;
  }
}

3. View Transitions API

페이지 전환 애니메이션을 CSS만으로 구현할 수 있습니다.

/* 기본 페이지 전환 */
@view-transition {
  navigation: auto;
}

/* 전환 애니메이션 커스터마이징 */
::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: scale-down 0.4s ease-out;
}

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

4. OKLCh 컬러 스페이스

인간의 시각에 더 가까운 색 공간으로, 일관된 밝기와 채도 조절이 가능합니다.

:root {
  /* OKLCh: Lightness, Chroma, Hue */
  --primary: oklch(0.6 0.2 260);
  --primary-light: oklch(0.8 0.15 260);
  --primary-dark: oklch(0.4 0.25 260);

  /* 같은 밝기의 다른 색상 - 시각적으로 동일한 밝기! */
  --blue: oklch(0.6 0.2 260);
  --green: oklch(0.6 0.2 145);
  --red: oklch(0.6 0.2 25);
}

/* 다크모드 전환이 간단해짐 */
.dark {
  --primary: oklch(0.8 0.15 260);
}

5. Scroll-Driven Animations

JavaScript 없이 스크롤에 연동된 애니메이션을 구현합니다.

/* 스크롤 진행률 표시 바 */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary);
  transform-origin: left;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 요소가 뷰포트에 들어올 때 애니메이션 */
.fade-in-section {
  animation: fade-slide-up auto ease-out both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

6. @layer와 Cascade Layers

CSS 우선순위를 명시적으로 제어합니다.

/* 레이어 순서 선언 (낮은 순위 → 높은 순위) */
@layer reset, base, components, utilities;

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
  }
}

@layer components {
  .btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .mt-4 { margin-top: 1rem; }
}

7. Subgrid

부모 그리드의 트랙을 자식 요소가 그대로 사용할 수 있습니다.

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

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* header, body, footer */
}

/* 모든 카드의 헤더, 본문, 푸터가 정확히 정렬됨 */

마치며

모던 CSS는 이미 충분히 강력합니다. 새 프로젝트를 시작한다면, CSS 전처리기나 CSS-in-JS 도입 전에 네이티브 CSS만으로 충분한지 먼저 검토해보세요. Tailwind CSS 같은 유틸리티 프레임워크와 함께 사용하면 개발 속도와 유지보수성을 모두 잡을 수 있습니다.

핵심은 브라우저가 이미 지원하는 기능을 최대한 활용하는 것입니다.