CSS 2026 최신 기능 완벽 가이드 — JavaScript 없이 커스텀 Select·스크롤 캐러셀·인터랙티브 UI 구현하기

CSS 2026이 바꾸는 프론트엔드 개발의 판도

오랫동안 웹 개발자들은 암묵적인 규칙을 따라왔습니다. "디자인은 CSS, 인터랙션은 JavaScript." 하지만 2026년, 이 공식이 빠르게 무너지고 있습니다. 브라우저에 새롭게 탑재되는 CSS 기능들 덕분에 수백 줄의 JavaScript 없이도 복잡한 UI를 구현할 수 있는 시대가 열렸습니다. 이 글에서는 2026년 주목해야 할 최신 CSS 기능들을 실전 예제와 함께 완벽히 파헤칩니다.

1. 드디어 완전 커스텀 가능해진 <select> 요소

웹 개발자라면 누구나 한 번쯤은 <select>의 한계에 절망해봤을 것입니다. 브라우저마다 다른 기본 스타일, 제한적인 커스터마이징, 그래서 결국 JavaScript로 처음부터 다시 만드는 패턴. 2026년에는 이 고통이 드디어 끝납니다.

appearance: base-select

appearance: base-select 속성 하나면 <select> 요소를 완전히 커스터마이징 가능한 모드로 전환할 수 있습니다. 네이티브 접근성과 동작은 유지하면서, 원하는 스타일을 자유롭게 적용할 수 있습니다.

select {
  appearance: base-select;
  border: 2px solid #6366f1;
  border-radius: 8px;
  padding: 8px 12px;
  background: white;
  font-size: 1rem;
}

select::picker(select) {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  padding: 8px 0;
}

select::picker(select) 의사 요소는 드롭다운 패널 자체를 스타일링할 수 있게 해줍니다. 그림자, 테두리, 둥근 모서리 등 디자인 시스템에 맞는 스타일을 완벽하게 적용할 수 있습니다.

2. JavaScript 없이 구현하는 스크롤 캐러셀 — ::scroll-button과 ::scroll-marker

캐러셀 컴포넌트는 프론트엔드에서 가장 흔히 구현하는 UI 중 하나입니다. 하지만 지금까지는 scrollLeft 계산, 이벤트 리스너 등록, 인디케이터 동기화 등 상당한 JavaScript 코드가 필요했습니다. 이제 CSS만으로 가능합니다.

::scroll-button() — 스크롤 버튼 생성

.carousel::scroll-button(left) {
  content: "←";
  background: #6366f1;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.carousel::scroll-button(right) {
  content: "→";
  background: #6366f1;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

::scroll-marker와 ::scroll-marker-group — 페이지네이션 도트

.carousel-item::scroll-marker {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
}

.carousel-item::scroll-marker:target-current {
  background: #6366f1;
  transform: scale(1.4);
}

.carousel::scroll-marker-group {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}

브라우저가 자동으로 스크롤 위치를 감지하여 현재 활성화된 도트를 업데이트합니다. JavaScript 없이 완전한 캐러셀을 구현할 수 있습니다.

3. 스크롤 상태 컨테이너 쿼리 — container-type: scroll-state

컨테이너 쿼리가 크기 기반 반응형 컴포넌트를 가능하게 했다면, scroll-state 컨테이너 쿼리는 스크롤 위치에 따른 동적 스타일링을 가능하게 합니다.

.sticky-header {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

@container scroll-state(stuck: top) {
  .sticky-header {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 8px 16px;
  }
}

헤더가 sticky 상태로 상단에 붙었을 때 자동으로 배경색과 그림자가 추가됩니다. 스크롤 이벤트 리스너를 JavaScript로 작성할 필요가 없습니다.

4. 동적 레이아웃을 위한 sibling-index()와 sibling-count()

CSS 함수 sibling-index()와 sibling-count()는 형제 요소의 순서와 개수를 CSS에서 직접 참조할 수 있게 해줍니다. 이를 활용하면 animation-delay를 동적으로 계산하거나 색상 그라디언트를 자동으로 생성할 수 있습니다.

.card {
  animation-delay: calc(sibling-index() * 0.1s);
  background: hsl(calc(sibling-index() * 30deg), 70%, 60%);
}

카드가 몇 개든 자동으로 순차적인 애니메이션과 무지개 색상이 적용됩니다. JavaScript로 index를 계산하여 인라인 스타일을 주입하는 번거로움이 사라집니다.

5. 향상된 attr() 함수 — 데이터 속성으로 스타일 제어

기존 attr() 함수는 content 속성에서만 제한적으로 사용할 수 있었습니다. 2026년 새 스펙에서는 타입이 지정된 attr()를 통해 데이터 속성 값을 색상, 길이 등 다양한 CSS 값으로 활용할 수 있습니다.

<div class="progress-bar" data-color="#6366f1" data-width="75"></div>

.progress-bar {
  background: attr(data-color color);
  width: calc(attr(data-width number) * 1%);
}

HTML 속성만 변경하면 JavaScript 없이도 동적으로 스타일이 바뀝니다. 컴포넌트 기반 개발에서 매우 강력한 패턴입니다.

6. @starting-style — 진입 애니메이션의 새 표준

요소가 처음 DOM에 삽입될 때 애니메이션을 적용하는 것은 CSS만으로는 어려운 작업이었습니다. @starting-style을 사용하면 이제 CSS만으로 부드러운 진입 애니메이션을 구현할 수 있습니다.

.modal {
  transition: opacity 0.3s, transform 0.3s;
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .modal {
    opacity: 0;
    transform: translateY(-20px);
  }
}

dialog 요소나 popover 요소의 표시 애니메이션에 특히 유용합니다.

브라우저 지원 현황 및 활용 전략

2026년 초 기준으로 이 기능들은 Chrome 및 Edge 최신 버전에서 실험적으로 지원되고 있으며, Firefox와 Safari도 순차적으로 도입 중입니다. 현재 프로덕션 환경에서 바로 사용하기에는 이르지만, 다음과 같은 전략으로 점진적 활용이 가능합니다.

• @supports 쿼리로 브라우저 지원 여부 확인 후 적용
• JavaScript 폴백(fallback)을 유지하면서 CSS 기능을 점진적 향상으로 적용
• Chrome DevTools의 Experimental Features 탭에서 미리 테스트
• Chrome Canary 버전에서 최신 기능 선행 체험

정리 — CSS가 JavaScript를 대체하는 시대

2026년 CSS는 단순한 스타일링 언어를 넘어 상태 관리, 인터랙션, 애니메이션을 포괄하는 강력한 UI 언어로 진화하고 있습니다. 커스텀 select, 스크롤 캐러셀, sticky 헤더 애니메이션, 진입 효과 — 이 모든 것이 JavaScript 없이 CSS만으로 구현 가능해집니다. 이제 "CSS는 스타일, JS는 로직"이라는 오래된 공식을 다시 써야 할 때입니다.

---

📎 참고 자료

• CSS in 2026: The new features reshaping frontend development — LogRocket Blog
• CSS Wrapped 2025 — Chrome DevRel
• The 8 trends that will define web development in 2026 — LogRocket Blog