CSS 2026: JavaScript 없이 인터랙티브 UI를 만드는 시대가 왔다
웹 개발을 하다 보면 "디자인은 CSS, 인터랙션은 JavaScript"라는 공식이 당연하게 느껴졌을 것이다. 스크롤 이벤트 감지, 커스텀 드롭다운, 페이지 전환 애니메이션 — 이런 작업들은 언제나 JS의 영역이었다. 그런데 2026년 현재, CSS는 그 경계를 빠르게 허물고 있다. 이 글에서는 2026년 브라우저에 새롭게 안착하거나 안착 중인 CSS 핵심 기능들을 정리해 본다.
1. @container scroll-state — 스크롤 상태를 CSS로 감지하라
기존에는 스티키 헤더가 화면 상단에 "달라붙었는지"를 알기 위해 IntersectionObserver를 사용했다. 이제는 CSS만으로 가능하다.
기본 개념
container-type: scroll-state를 선언하면 해당 요소가 스크롤 컨테이너의 상태(고정됨, 스냅됨 등)를 기반으로 쿼리를 받을 수 있게 된다.
.sticky-header {
container-type: scroll-state;
position: sticky;
top: 0;
}
@container scroll-state(stuck: top) {
.sticky-header {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
backdrop-filter: blur(8px);
}
}
스냅 캐러셀 인디케이터
스크롤 스냅이 적용된 캐러셀에서 현재 활성 슬라이드를 CSS만으로 감지하고 점 인디케이터를 업데이트할 수 있다:
.carousel {
scroll-snap-type: x mandatory;
container-type: scroll-state;
}
@container scroll-state(snapped: x) {
.slide-indicator {
opacity: 1;
transform: scale(1.2);
}
}JavaScript로 scroll 이벤트를 리스닝하고, 스로틀링 처리하고, DOM을 업데이트하던 과정이 CSS 몇 줄로 대체된다.
2. 커스텀 <select> — 드롭다운을 완전히 디자인하라
개발자들이 오랫동안 요청해 온 기능이 드디어 왔다. appearance: base-select를 선언하면 네이티브 <select>를 완전히 커스터마이징할 수 있다.
주요 신규 기능
| 속성/가상요소 | 역할 |
|---|---|
appearance: base-select |
커스텀 모드 활성화 (네이티브 동작 유지) |
select::picker(select) |
드롭다운 패널 스타일링 (그림자, 테두리 등) |
selectedcontent |
선택된 옵션 표시 영역 스타일 |
select {
appearance: base-select;
border: 2px solid #6366f1;
border-radius: 8px;
padding: 8px 12px;
background: white;
cursor: pointer;
}
select::picker(select) {
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
padding: 8px 0;
}
option:hover {
background: #f1f5f9;
}기존에는 이를 구현하려면 <div>로 가짜 드롭다운을 만들고, 키보드 접근성을 직접 구현하고, aria 속성을 수동으로 관리해야 했다. 이제 네이티브 접근성은 유지하면서 완전한 디자인 자유를 얻게 된다.
3. ::scroll-button()과 ::scroll-marker — JS 없는 스크롤 UI
수평 스크롤 컨테이너에 "이전/다음" 버튼과 페이지 인디케이터를 추가하는 작업, 예전엔 JS가 필수였다. 이제 CSS만으로 된다.
::scroll-button() — 생성된 스크롤 버튼
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.carousel::scroll-button(left) {
content: "◀";
position: absolute;
left: 8px;
background: white;
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
}
.carousel::scroll-button(right) {
content: "▶";
position: absolute;
right: 8px;
}::scroll-marker — 페이지 인디케이터 점
.carousel::scroll-marker-group {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 12px;
}
.carousel > *::scroll-marker {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #cbd5e1;
}
.carousel > *::scroll-marker:target-current {
background: #6366f1;
transform: scale(1.3);
}4. View Transitions API — 페이지 전환을 CSS로
싱글 페이지 앱(SPA)에서 부드러운 페이지 전환을 구현하려면 리액트 라이브러리나 복잡한 애니메이션 로직이 필요했다. View Transitions API는 이를 획기적으로 단순화한다.
/* 전환 전후 공유 요소에 이름 부여 */
.hero-image {
view-transition-name: hero;
}
/* 전환 애니메이션 커스텀 */
@keyframes slide-in {
from { transform: translateX(100%); }
}
::view-transition-new(root) {
animation: slide-in 0.3s ease-out;
}2026년 현재 View Transitions는 Chrome, Edge에서 안정적으로 지원되며, Firefox와 Safari도 지원을 확대하고 있다. 사용자 약 83~85%의 브라우저에서 작동하므로, 프로그레시브 인핸스먼트 방식으로 적용하면 안전하다.
5. :target-current — 현재 스크롤 섹션 하이라이트
긴 문서에서 현재 보이는 섹션에 해당하는 목차 항목을 강조하는 "스크롤 스파이" 기능, 이것도 이제 CSS로 가능하다.
.toc {
scroll-target-group;
}
.toc a:target-current {
color: #6366f1;
font-weight: bold;
border-left: 3px solid #6366f1;
padding-left: 8px;
}브라우저 지원 현황 (2026년 3월)
| 기능 | Chrome | Firefox | Safari | 권장 사용 |
|---|---|---|---|---|
| View Transitions | ✅ 111+ | ⚠️ 부분 지원 | ⚠️ 18+ | 프로그레시브 |
| @container scroll-state | ✅ 최신 | 🔜 개발 중 | 🔜 예정 | 실험적 |
| appearance: base-select | ✅ 최신 | 🔜 개발 중 | 🔜 예정 | 실험적 |
| ::scroll-button/marker | ✅ 최신 | 🔜 개발 중 | 🔜 예정 | 실험적 |
실무 적용 전략
1. 프로그레시브 인핸스먼트 원칙
브라우저 지원이 완전하지 않은 기능은 @supports로 감싸서 안전하게 적용하자:
@supports (container-type: scroll-state) {
.sticky-nav {
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
.sticky-nav {
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
}
}2. JS 폴백 유지
새 기능이 없는 브라우저를 위해 기존 JS 로직은 남겨두되, CSS 지원이 있으면 JS를 건너뛰도록 구성한다.
3. Chrome Canary로 미리 실험
아직 stable 브라우저에서 지원하지 않는 기능은 Chrome Canary 또는 실험적 플래그로 미리 체험하고 준비하는 것이 좋다.
결론: CSS는 이미 프레임워크 수준의 도구가 됐다
2026년의 CSS는 단순한 스타일 언어가 아니다. 스크롤 상태 감지, 커스텀 UI 컴포넌트, 페이지 전환 애니메이션, 실시간 레이아웃 반응 — 이 모든 것이 CSS의 영역이 되고 있다. 당장 프로덕션에 모두 적용하기는 이르지만, 지금부터 학습하고 실험해두면 6개월~1년 후 브라우저 지원이 확대될 때 발 빠르게 적용할 수 있다.
프론트엔드 개발자라면 CSS의 진화를 결코 무시할 수 없는 시대가 됐다.
