2026년 6월 기준 월간 요약

Jeremy Wagner

게시일: 2026년 7월 17일

Baseline 월간 요약에 다시 오신 것을 환영합니다. 2026년 6월에 field-sizing이 Baseline 새로 사용 가능하게 되어 양식 컨트롤이 콘텐츠에 맞게 자동으로 조정될 수 있게 되었습니다. 한편, 다양한 CSS, HTML, 웹 API 기능이 개발자 커뮤니티의 중요한 업데이트와 함께 Baseline 널리 사용 가능 상태에 도달했습니다.

웹 플랫폼 상태에 관한 Baseline 알림

이제 웹 플랫폼 상태 대시보드의 Baseline 알림을 통해 웹 기능이 상호 운용 가능하게 되는 시점을 더 쉽게 추적할 수 있습니다. GitHub로 로그인하면 기능이 Baseline 새로 사용 가능하게 되거나 널리 사용 가능하게 되거나 새로운 브라우저 구현을 수신할 때 알림을 구독할 수 있습니다. 구독은 월별, 주간 또는 즉시 일정에 따라 이메일 업데이트 또는 맞춤 RSS 피드를 전송하도록 구성할 수 있습니다. 저장된 검색(예: 모든 HTML 기능)으로 알림 범위를 지정하거나, 맞춤 뉴스레터를 만들거나, 공유 가능한 기능 목록을 생성하거나, Slack 웹훅을 구성하여 엔지니어링팀에 알릴 수 있습니다.

Baseline 알림 소개에서 자세히 알아보세요.

Baseline 새로 사용 가능한 기능

이 섹션의 기능은 2026년 6월부터 핵심 브라우저 세트에서 지원되며 이제 Baseline 새로 사용 가능합니다.

field-sizing

field-sizing CSS 속성은 기본적으로 고정된 치수를 갖는 양식 요소(예: <textarea>, <input>, <select>)의 크기 조정 동작을 제어합니다. field-sizing: content 양식 컨트롤을 사용하면 콘텐츠에 맞게 자동으로 확장되거나 축소되어 맞춤 JavaScript 자동 크기 조정 스크립트가 필요하지 않습니다.

field-sizing의 MDN 참조 페이지에서 자세히 알아보세요.

Baseline 널리 사용 가능한 기능

다음 기능이 Baseline 널리 사용 가능하게 되었습니다. 즉, 이제 프로젝트에서 널리 호환되고 사용할 수 있습니다.

:has() 의사 클래스

:has() CSS 상위 선택기를 사용하면 하위 요소 또는 후속 형제 요소를 기반으로 요소의 스타일을 지정할 수 있습니다. 이 함수형 의사 클래스를 사용하면 JavaScript를 사용하여 DOM 구조를 검사하지 않고도 CSS에서 직접 조건부 레이아웃 패턴을 사용할 수 있습니다.

:has 의사 클래스의 MDN 페이지에서 자세히 알아보세요.

HTMLIFrameElement.loading의 MDN 참조에서 세부정보를 확인하세요.

CanvasRenderingContext2D.reset()

2D 캔버스 컨텍스트의 reset() 메서드는 변환, 클리핑 경로, 선 스타일, 채우기 스타일과 같은 속성을 기본값으로 재설정하여 그리기 컨텍스트 상태를 지웁니다. 이렇게 하면 수동 속성 정리 없이 캔버스 컨텍스트를 깨끗하게 재사용할 수 있습니다.

CanvasRenderingContext2D.reset의 MDN 문서에서 자세히 알아보세요.

cap 길이 단위

cap 글꼴 상대 단위는 요소 글꼴의 명목상 대문자 높이에 해당합니다. 대문자 높이를 기준으로 요소를 정렬하고 크기를 조정하여 정확한 타이포그래피 레이아웃을 사용할 수 있습니다.

길이 단위의 MDN 참조에서 자세히 알아보세요.

counter-set 속성

counter-set CSS 속성은 counter-reset 및 counter-increment를 보완하여 CSS 카운터를 지정된 값으로 설정합니다. 번호가 매겨진 목록, 문서 윤곽선 또는 맞춤 카운터 시퀀스를 조작할 때 제어 기능을 제공합니다.

counter-set의 MDN 페이지에서 세부정보를 읽어보세요.

createImageBitmap()

createImageBitmap() 정적 메서드는 <img>, <canvas>, Blob, ImageData를 비롯한 다양한 이미지 소스에서 비동기 비트맵 이미지를 만듭니다. 기본 스레드에서 이미지를 디코딩하므로 복잡한 캔버스 그래픽을 처리할 때 UI 성능이 차단되지 않습니다.

createImageBitmap의 MDN 문서에서 구현 세부정보를 확인하세요.

<easing-function> 데이터 유형

<easing-function> CSS 데이터 유형은 전환 및 애니메이션의 수학적 변화율 곡선을 설명합니다. ease-in 또는 cubic-bezier()와 같은 표준 키워드 외에도 linear()와 같은 함수를 지원하여 맞춤 스프링 또는 바운스 효과를 구성합니다.

easing-function의 MDN 참조에서 사용 방법을 알아보세요.

& 중첩 선택기

& 중첩 선택기는 기본 제공 CSS 중첩을 사용할 때 하위 규칙 선택기를 상위 선택기에 명시적으로 고정합니다. 중첩된 호버, 포커스 또는 의사 클래스 상태를 정의할 때 명확성과 올바른 특수성 규칙을 보장합니다.

중첩 선택기의 MDN 가이드에서 세부정보를 읽어보세요.

rel="preload"를 사용한 반응형 사전 로드

<link rel="preload"> 요소의 media 속성을 사용하면 주요 애셋의 반응형 사전 로드를 사용할 수 있습니다. rel="preload"를 미디어 쿼리와 결합하면 브라우저가 로드 수명 주기의 초기에 사용자 표시 영역 너비 또는 디스플레이 특성과 일치하는 애셋만 다운로드합니다.

rel="preload"의 MDN 문서에서 사용 방법을 알아보세요.

HTMLMediaElement.preservesPitch

<audio> 및 <video> 요소의 preservesPitch 속성은 playbackRate를 변경할 때 브라우저가 오디오 피치를 조정하는지 여부를 제어합니다. false로 설정하면 미디어 재생 속도를 높이거나 낮출 때 피치 이동이 허용됩니다.

HTMLMediaElement.preservesPitch의 MDN 페이지에서 세부정보를 확인하세요.

:dir() 의사 클래스

:dir() CSS 의사 클래스는 텍스트 방향성 (예: ltr 또는 rtl)을 기반으로 요소를 일치시키고 HTML 속성(예: dir 또는 계산된 텍스트 컨텍스트)에서 상속된 방향을 일치시킵니다.

:dir 의사 클래스의 MDN 페이지에서 자세히 알아보세요.

pow() 수학 함수

pow() CSS 함수는 CSS 선언 내에서 직접 지수 거듭제곱 값을 계산하여 밑수를 지수로 올립니다 (예: pow(2, 3)). 이렇게 하면 반응형 크기 조정과 수학적 그리드 관계가 간소화됩니다.

pow function 함수의 MDN 참조에서 세부정보를 읽어보세요.

mask 속성의 MDN 페이지에서 mask 속성에 대해 자세히 알아보세요.

@media (scripting)

scripting 미디어 기능은 브라우저 컨텍스트에서 클라이언트 측 스크립팅 (예: JavaScript)이 사용 설정되어 있고 사용 가능한지 테스트합니다. 이렇게 하면 점진적 개선 스타일이 활성 JavaScript가 있는 환경 또는 없는 환경을 타겟팅할 수 있습니다.

scripting 미디어 기능의 MDN 참조에서 자세히 알아보세요.

URL.canParse의 MDN 문서에서 구현 세부정보를 확인하세요.

Storage Access API

Storage Access API는 서드 파티 <iframe> 내에 삽입된 크로스 사이트 콘텐츠가 파티션을 나누지 않은 쿠키 및 저장소 액세스를 요청할 수 있는 메커니즘을 제공하여 도메인 경계 전반에서 인증 및 상태 저장 상호작용을 지원합니다.

Storage Access API의 MDN 페이지에서 세부정보를 읽어보세요.

마무리

Baseline 관련 누락된 사항이 있으면 알려주세요. 향후 버전에서 반영하도록 하겠습니다. Baseline에 관해 궁금한 점이 있거나 의견을 제공하려면 문제 추적기에서 문제를 제출하세요.