게시일: 2026년 6월 3일
Baseline 월간 요약에 오신 것을 환영합니다. 2026년 5월에는 여러 가지 새로운 CSS 기능, 이벤트 속성, API 추가사항이 Baseline 새로 사용 가능하게 되었으며, CSS 단위, 사용자 상호작용 속성, 가상 클래스가 개발자 커뮤니티의 중요한 업데이트와 함께 Baseline 널리 사용 가능하게 되었습니다.
2026년 CSS 현황 설문조사
웹 커뮤니티의 연례 설문조사인 2026년 CSS 현황 설문조사가 시작되었습니다. 올해 주최자는 AI 지원 코딩 시대에 개발자에게 가장 중요한 기능에 중점을 두고 설문조사를 개선하기 위해 의식적인 노력을 기울였습니다. 브라우저 공급업체는 엔지니어링 로드맵의 우선순위를 정하고 개발자의 문제점을 해결하는 데 도움이 되도록 이러한 결과를 면밀히 모니터링합니다. 7월 1일에 마감되기 전에 의견을 내고 진화하는 CSS 환경에 대한 경험을 공유하세요.
Baseline 새로 사용 가능한 기능
이 섹션의 기능은 2026년 5월부터 핵심 브라우저 세트에서 지원되며 이제 Baseline 새로 사용 가능합니다.
컨테이너 스타일 쿼리
컨테이너 쿼리는 더 이상 크기로 제한되지 않습니다. 이제 스타일 쿼리를 사용하면 상위 컨테이너의 맞춤 속성을 기반으로 요소에 스타일을 적용할 수 있습니다. 이를 통해 복잡한 클래스 구조에 의존하지 않고 문맥 게재위치에 따라 테마 또는 스타일을 조정할 수 있는 고도로 모듈화된 구성요소를 빌드할 수 있습니다.
@container의 MDN 참조 페이지에서 자세히 알아보세요.
:open 가상 클래스
이전에는 <dialog> 및 <details>와 같이 열린 상태와 닫힌 상태가 있는 요소를 스타일 지정하려면 속성을 확인하거나 클래스를 관리해야 했습니다. :open 가상 클래스는 현재 열린 상태에 있는 경우에만 이러한 요소와 일치시켜 이를 간소화하므로 더 깔끔하고 선언적인 CSS를 사용할 수 있습니다.
:open 가상 클래스의 MDN 페이지에서 자세히 알아보세요.
ToggleEvent.source
팝오버 API를 사용할 때는 상태 변경에 반응하는 것이 중요합니다. ToggleEvent 인터페이스의 source 속성은 팝오버 전환 작업을 트리거한 컨트롤 요소를 반환합니다. 이를 통해 이벤트의 출처를 식별하고 복잡한 UI 상호작용을 조정할 수 있습니다.
ToggleEvent.source의 MDN 문서에서 자세히 알아보세요.
image-rendering 속성
image-rendering CSS 속성을 사용하면 이미지 크기를 조정할 때 사용되는 조정 알고리즘을 제어할 수 있습니다. 흐릿한 보간을 방지하고 조정이 선명하고 픽셀화된 상태를 유지하는 것이 중요한 픽셀 아트, 저해상도 이미지 또는 QR 코드에 특히 유용합니다.
image-rendering의 MDN 페이지에서 사용 방법을 알아보세요.
text-decoration-skip-ink: all
하강자를 통과하는 밑줄은 때때로 어수선해 보일 수 있습니다. text-decoration-skip-ink: auto는 교차할 때만 잉크를 건너뛰지만 all로 설정하면 교차 여부에 관계없이 밑줄이 모든 글리프를 건너뛰도록 하여 타이포그래피 미학을 더 세밀하게 제어할 수 있습니다.
text-decoration-skip-ink의 MDN 가이드에서 세부정보를 읽어보세요.
SharedWorker
SharedWorker API는 동일한 출처의 여러 브라우징 컨텍스트(예: 서로 다른 창, 탭 또는 iframe)에서 액세스할 수 있는 특수 백그라운드 작업자를 제공합니다. 이는 상태를 공유하거나, 연결을 관리하거나, 탭 경계에서 백그라운드 작업을 조정하는 데 유용합니다.
SharedWorker의 MDN 문서를 확인하세요.
Baseline 널리 사용 가능한 기능
다음 기능은 Baseline 널리 사용 가능하게 되었습니다. 즉, 이제 프로젝트에서 광범위하게 호환되고 사용할 수 있습니다.
lh 길이 단위
lh 상대 단위는 사용되는 요소의 계산된 줄 높이에 해당합니다. 이렇게 하면 아이콘 배지 또는 배경 강조표시와 같은 요소의 크기를 텍스트 줄의 높이와 완벽하게 일치하도록 더 간단하게 조정할 수 있습니다.
길이 단위의 MDN 참조에서 자세히 알아보세요.
rlh 길이 단위
lh와 마찬가지로 rlh 단위는 줄 높이를 나타내지만 특히 루트 요소 (<html>)의 줄 높이를 나타냅니다. 이를 통해 로컬 글꼴 크기 또는 줄 높이 재정의에 관계없이 전체 페이지에서 일관된 세로 리듬을 설정할 수 있습니다.
길이 단위의 MDN 참조에서 자세히 알아보세요.
Navigator.userActivation
많은 웹 API (예: 동영상 재생, 팝업 또는 클립보드 액세스)는 트리거되기 전에 사용자 상호작용이 필요합니다. Navigator.userActivation 속성은 창에서 사용자의 현재 및 이전 활성화 상태에 관한 정보가 포함된 객체를 반환하므로 스크립트에서 사용자 동작이 발생했는지 확인할 수 있습니다.
Navigator.userActivation의 MDN 페이지에서 사용 방법을 알아보세요.
clip-path
clip-path CSS 속성을 사용하면 요소의 어느 부분이 표시되어야 하는지 정의하는 클리핑 영역을 만들 수 있습니다. 기본 도형 (예: 원, 타원 또는 다각형) 또는 SVG 경로를 사용하여 오버플로를 숨기지 않고도 매력적인 레이아웃 디자인과 전환을 만들 수 있습니다.
clip-path의 MDN 페이지에서 구현 세부정보를 확인하세요.
:user-invalid 가상 클래스
페이지가 로드되는 즉시 스타일을 적용하여 UX가 저하되는 경우가 많은 :invalid와 달리 :user-invalid 가상 클래스는 사용자가 상호작용한 후에만 잘못된 양식 요소와 일치합니다. 즉, 사용자가 필드를 벗어난 후 양식 유효성 검사 의견을 표시할 수 있습니다.
:user-invalid의 MDN 문서에서 작동 방식을 알아보세요.
마무리
Baseline과 관련된 누락된 사항이 있으면 알려주세요. 향후 버전에 포함되도록 하겠습니다. Baseline에 관해 궁금한 점이 있거나 의견을 제공하려면 Issue Tracker에서 문제를 신고하세요.