CSS 2026 완벽 가이드 - JavaScript 없이 Customizable Select·scroll-marker·Container Scroll-State로 만드는 인터랙티브 UI

CSS 2026이 바꾸는 프론트엔드 개발 - JavaScript 없이 만드는 인터랙티브 UI

프론트엔드 개발자라면 누구나 한 번쯤 이런 경험이 있을 것이다. 스크롤에 따라 헤더가 고정되는 효과를 만들기 위해 IntersectionObserver를 설정하고, 커스텀 셀렉트 박스를 만들기 위해 수백 줄의 JavaScript를 작성하고, 캐러셀 내비게이션 점(pagination dot)을 위해 이벤트 리스너를 줄줄이 달았던 경험. 하지만 2026년 CSS는 이 모든 것을 바꾸고 있다.

이 글에서는 2026년 주요 브라우저에 새롭게 안착한 CSS 기능들을 살펴보고, 어떻게 JavaScript 의존도를 줄이면서도 더 풍부한 사용자 경험을 만들 수 있는지 알아본다.

1. Customizable Select — 드디어 완전한 <select> 스타일링

웹 개발자들이 오랫동안 요청해온 기능이 마침내 현실이 됐다. 기존 <select> 요소는 CSS로 스타일링하기가 극히 제한적이었기 때문에 대부분의 팀이 JavaScript 기반의 커스텀 드롭다운을 만들어 쓰거나 서드파티 라이브러리를 도입했다.

2026년에는 appearance: base-select를 사용하여 네이티브 <select>를 완전히 커스터마이즈 가능한 모드로 전환할 수 있다.

select {
  appearance: base-select;
  font-family: 'Pretendard', sans-serif;
  border: 2px solid #4f46e5;
  border-radius: 12px;
  padding: 8px 16px;
}

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

option {
  padding: 8px 12px;
}

option:hover {
  background-color: #eef2ff;
  color: #4f46e5;
}

::picker(select)는 드롭다운 패널 자체를 가리키는 의사 요소(pseudo-element)로, 배경색·테두리·그림자를 자유롭게 스타일링할 수 있다. 접근성도 네이티브 수준을 유지하면서 디자인 자유도를 얻는 셈이다.

2. Container Scroll-State — JavaScript 없는 스크롤 인식 스타일링

스티키 헤더가 실제로 '붙었을 때'만 그림자를 추가하려면 기존에는 IntersectionObserver나 scroll 이벤트가 필요했다. 이제는 CSS만으로 가능하다.

/* 컨테이너를 스크롤 상태 쿼리 가능하도록 설정 */
.header-wrapper {
  container-type: scroll-state;
}

/* 헤더가 뷰포트 상단에 붙었을 때만 그림자 추가 */
@container scroll-state(stuck: top) {
  .sticky-header {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
  }
}

스냅 캐러셀에도 활용할 수 있다. 현재 스냅된 슬라이드가 어떤 것인지 CSS가 알 수 있기 때문에, 슬라이드 인디케이터 하이라이트 처리도 JavaScript 없이 가능하다.

@container scroll-state(snapped: x) {
  .slide {
    scale: 1;
    opacity: 1;
  }
}

.slide {
  scale: 0.95;
  opacity: 0.7;
  transition: scale 0.3s, opacity 0.3s;
}

3. ::scroll-marker와 ::scroll-marker-group — CSS로 만드는 캐러셀 페이지네이션

슬라이드쇼나 탭 인터페이스의 '점(dot)' 내비게이터를 만들 때 보통 각 항목에 대응하는 버튼 요소를 DOM에 추가하고 JavaScript로 활성 상태를 관리했다. 이제 CSS가 이 역할을 대신한다.

.carousel {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

/* 각 슬라이드에 대한 마커 점 자동 생성 */
.slide::scroll-marker {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
}

.slide::scroll-marker:target-current {
  background: #4f46e5;
  scale: 1.3;
}

/* 마커들을 감싸는 컨테이너 스타일 */
.carousel::scroll-marker-group {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 12px 0;
}

브라우저가 자동으로 각 슬라이드 요소에 마커를 생성하고, 현재 스냅된 슬라이드의 마커에 :target-current 상태를 부여한다. 완전히 CSS만으로 작동하는 캐러셀 인디케이터가 완성된다.

4. ::scroll-button — 스크롤 컨테이너용 네이티브 버튼

수평 스크롤 컨테이너에 '이전/다음' 버튼을 추가할 때도 이제 CSS로 처리할 수 있다.

.product-list {
  overflow-x: scroll;
}

/* 왼쪽/오른쪽 스크롤 버튼 자동 생성 */
.product-list::scroll-button(left) {
  content: '◀';
  position: absolute;
  left: 0;
  background: white;
  padding: 8px;
  cursor: pointer;
}

.product-list::scroll-button(right) {
  content: '▶';
  position: absolute;
  right: 0;
  background: white;
  padding: 8px;
  cursor: pointer;
}

클릭하면 브라우저가 자동으로 해당 방향으로 스크롤을 처리한다. JavaScript zero, 접근성 내장.

5. sibling-index()와 sibling-count() — CSS 반복 패턴의 혁신

n번째 요소에 다른 스타일을 적용하기 위해 :nth-child()를 구구단처럼 외우던 시절은 지나가고 있다. sibling-index()는 각 요소의 형제 순서를 CSS 변수처럼 활용할 수 있게 해준다.

.timeline-item {
  /* 순서에 따라 색상이 점진적으로 변화 */
  background: hsl(
    calc(sibling-index() * 30),
    70%,
    85%
  );
  
  /* 순서에 따라 등장 애니메이션 딜레이 */
  animation-delay: calc(sibling-index() * 0.1s);
}

이전에는 이런 패턴을 위해 JavaScript로 인라인 스타일을 추가하거나 Sass 루프를 사용해야 했다. 이제 순수 CSS로 처리된다.

6. View Transitions API — 페이지 전환의 새로운 기준

View Transitions는 2025년부터 주목받았지만, 2026년에는 Conditional View Transitions가 더욱 정교해졌다. 특정 조건에서만 전환 애니메이션을 활성화하거나, 전환 타입에 따라 다른 애니메이션을 적용할 수 있다.

/* 뒤로가기 시 슬라이드 방향 반전 */
@view-transition {
  navigation: auto;
}

@keyframes slide-in-right {
  from { translate: 100% 0; }
  to { translate: 0 0; }
}

@keyframes slide-in-left {
  from { translate: -100% 0; }
  to { translate: 0 0; }
}

::view-transition-new(root):only-child {
  animation: slide-in-right 0.4s ease;
}

/* 뒤로가기 navigation 타입 감지 */
html:active-view-transition-type(back) {
  &::view-transition-new(root) {
    animation-name: slide-in-left;
  }
}

지금 당장 쓸 수 있나? — 브라우저 호환성 현실

솔직히 말하면, 2026년 현재 이 기능들은 여전히 초기 단계다. Chrome/Edge는 대부분 지원하지만, Firefox와 Safari는 일부 기능을 아직 구현 중이다. 프로덕션 적용에는 @supports를 활용한 점진적 향상(Progressive Enhancement) 전략이 필요하다.

/* Customizable Select 지원 여부 확인 */
@supports (appearance: base-select) {
  select {
    appearance: base-select;
    /* 커스텀 스타일 적용 */
  }
}

/* 미지원 시 폴백 */
@supports not (appearance: base-select) {
  .custom-select-wrapper {
    /* JavaScript 기반 커스텀 드롭다운 표시 */
    display: block;
  }
}

2026년 CSS가 의미하는 것

이번 CSS 업데이트들의 공통점은 브라우저가 더 많은 것을 '이해'하기 시작했다는 점이다. 스크롤 상태, 스냅 위치, 형제 순서, 페이지 전환 방향 — 이 모든 것이 이제 CSS의 영역이 됐다.

JavaScript는 앞으로도 비즈니스 로직과 복잡한 인터랙션을 담당하겠지만, 상태에 따른 시각적 표현은 CSS가 더 잘할 수 있는 영역이다. 성능도 더 좋고, 코드도 더 읽기 쉽고, 유지보수도 쉽다.

2026년 CSS를 배우는 것은 단순히 새 문법을 익히는 것이 아니라, 브라우저와 더 자연스럽게 협력하는 방법을 배우는 것이다.

---

📎 참고 자료

• CSS in 2026: The new features reshaping frontend development - LogRocket Blog
• Container queries in 2026: Powerful, but not a silver bullet - LogRocket Blog
• CSS Updates: Discover the Latest Trends and Features for 2026 - Medianic
• Most Awaited CSS Features Coming in 2026 - Medium