"이젠 CSS로 충분" - 팝오버·스크롤 애니메이션·masonry가 네이티브로 (Baseline 2026)

한 줄 요약 - 예전엔 JS 라이브러리가 필요했던 기능들(팝오버, 스크롤에 맞춘 애니메이션, masonry 레이아웃)을 이제 브라우저가 기본으로 처리합니다.

무슨 일이에요?

'Baseline'은 주요 브라우저에 충분히 퍼진 기능을 표시하는 기준인데, 2026 기준으로 위 기능들이 안정권에 들어왔습니다. 그만큼 자바스크립트를 덜 써도 됩니다.

핵심 코드

팝오버: 버튼과 패널만 연결하면 열고 닫힘이 동작합니다(JS 0줄).

<button popovertarget="menu">메뉴</button>
<div id="menu" popover>
  <a href="/profile">프로필</a>
</div>

스크롤 진행바: 스크롤 위치에 애니메이션을 연결합니다.

@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.progress {
  transform-origin: left;
  animation: grow linear;
  animation-timeline: scroll(root); /* 스크롤에 맞춰 진행 */
}

masonry(벽돌형) 그리드:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry; /* 높이가 제각각인 타일 정렬 */
}

왜 중요해요?

번들 크기와 JS 의존이 줄어 성능/접근성이 기본으로 좋아집니다.
새 기능은 브라우저 지원을 확인하고 @supports로 폴백을 두면 안전합니다.

무슨 일이에요?

핵심 코드

왜 중요해요?

댓글