2026년 8월 Baseline 월간 요약

원문: August 2026 Baseline monthly digest
— web.dev 원문은 CC-BY-4.0
라이선스로 제공되며, 이 글은 한국어로 번역한 2차 저작물입니다.

토큰 기술의 시작점으로 현대 웹 가이드라인 활용

Brecht De Ruyte는 Google의 현대 웹 가이드라인(Modern Web Guidance) 기술 세트가 AI 코딩 에이전트가 오래된 패턴에 의존하는 대신 최신 Baseline 인식 CSS 및 HTML을 작성하도록 어떻게 돕는지 분석했습니다. 이 게시물에서는 현대 웹 가이드라인과 사용자 정의 디자인 토큰 기술을 페어링하여 최신 플랫폼 표준을 존중하면서 디자인 시스템의 일관성을 유지하는 방법을 살펴봅니다. 더 자세한 내용은 토큰 기술을 위한 현대 웹 가이드라인 시작점으로 에이전트가 더 나은 CSS를 작성하도록 만들기

를 참조하십시오.

Baseline 신규 사용 가능 기능

다음 기능들은 2026년 8월에 모든 핵심 브라우저 엔진에서 지원되기 시작했으며, 이제 Baseline 신규 사용 가능 상태가 되었습니다.

:paused

CSS 의사 클래스

:paused

의사 클래스는

<audio>

및

<video>

와 같은 재생 가능한 미디어 요소를 재생이 일시 중지된 경우 매칭합니다. 또한 로드되었지만 아직 재생되지 않은 미디어 요소도 매칭합니다. 이는 버퍼링 또는 탐색과 같은 전환 상태와 일시 중지된 재생을 구분하여 미디어 플레이어 컨트롤 및 주변 UI가 CSS에서 직접 재생 상태를 반영할 수 있도록 합니다. 더 자세한 내용은 MDN

:paused

문서

를 참조하십시오.

sibling-count()

CSS 함수

sibling-count()

함수는 부모 요소를 공유하는 총 형제 요소(요소 자체 포함) 수를 나타내는 정수를 반환합니다. 생성된 콘텐츠에 대해 형식이 지정된 문자열을 반환하는

counter()

와 달리,

sibling-count()

는

calc()

와 함께 수학 계산에 직접 사용할 수 있는 정수로 해결됩니다. 이를 통해 자식 요소는 JavaScript 또는 고정 스타일 없이 총 형제 수를 기반으로 열 너비와 같은 비례 레이아웃 치수를 계산할 수 있습니다. 더 자세한 내용은 MDN

sibling-count()

문서

를 참조하십시오.

Baseline 널리 사용 가능 기능

다음 기능은 2026년 8월에 Baseline 널리 사용 가능 상태에 도달했습니다. 이는 30개월 동안 모든 핵심 브라우저 엔진에서 지원되었으며 폴리필 없이 안전하게 사용할 수 있음을 의미합니다.

선언적 Shadow DOM

선언적 Shadow DOM을 사용하면

shadowrootmode

속성을

open

또는

closed

로 설정한

<template>

요소를 사용하여 HTML 마크업에서 직접 Shadow Root를 정의할 수 있습니다. 이를 통해

Element.attachShadow()

를 통해 JavaScript로 Shadow Root를 연결할 필요가 없어집니다. 서버 렌더링된 웹 컴포넌트가 JavaScript 없이 초기 로드 시 캡슐화된 스타일로 렌더링될 수 있도록 하며, 스타일이 적용되지 않은 콘텐츠(FOUC)의 깜박임 없이 검색 엔진 및 JavaScript 없이 클라이언트에서 파싱 가능하게 유지됩니다. 더 자세한 내용은 MDN