웹 UI의 새로운 기능

Bramus
Una Kravets

게시일: 2026년 7월 1일

Google I/O 2026에서 웹 UI 플랫폼에 적용되는 다양한 업데이트를 공유했습니다. 사용자 환경 존중부터 자연스러운 상호작용 구현, 탐색 안내, 클러터 감소, 다양한 폼 팩터에 적응까지, 최신 웹은 개발자가 고품질의 촉각적 사용자 환경을 빌드할 수 있는 매우 강력한 도구를 제공합니다.

'웹 UI의 새로운 기능' 세션에서 언급된 모든 기능을 핵심 UX 원칙에 따라 정리한 종합 요약입니다.

파트 1: 사용자 환경설정 존중

맞춤설정은 웹 유용성의 기본 요소입니다. 최신 웹 API를 사용하면 사용자 시스템 수준 선택에 자동으로 적응하기가 더 쉬워집니다. 이러한 개념은 기본적인 것처럼 느껴지고 수년 동안 이에 대해 이야기해 왔지만, 실제로 이러한 동적 맞춤설정을 더 쉽게 빌드할 수 있는 몇 가지 새로운 API와 패턴이 있습니다.

1. contrast-color()

contrast-color() CSS 함수는 입력 색상을 사용하고 WCAG AA 최소 대비 알고리즘에 따라 입력 색상에 대한 대비가 더 높은 black 또는 white를 자동으로 반환합니다. 이렇게 하면 텍스트-배경색 쌍을 수동으로 유지하지 않아도 가독성을 보장할 수 있습니다.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

contrast-color()에 관해 자세히 알아보기

2. light-dark()

light-dark() CSS 함수를 사용하면 단일 선언 내에서 속성에 대해 두 가지 다른 값 (색상 또는 이미지)을 지정할 수 있습니다. 하나는 밝은 모드용이고 다른 하나는 어두운 모드용입니다. 브라우저는 활성 color-scheme (:root 또는 상위 요소에서 light, dark 또는 light dark로 설정해야 함)에 따라 올바른 대비 색상을 자동으로 선택합니다.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

light-dark()의 새로운 기능은 색상 값으로만 제한되지 않는다는 점입니다. Chrome 150부터는 이미지 값 두 개도 허용됩니다.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. CSS 맞춤 함수 (@function)

@function at-rule을 사용하면 네이티브 CSS 내에서 재사용 가능한 맞춤 함수를 직접 정의할 수 있습니다. 로컬 범위의 맞춤 속성을 인수로 허용하고, 계산을 실행하고, result 설명자를 사용하여 값을 반환하여 전처리기의 필요성을 줄일 수 있습니다.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

컨테이너 스타일 쿼리 및 CSS if() 함수와 결합하면 이 데모에 표시된 것처럼 모든 유형의 값과 작동하는 맞춤 --light-dark() 함수를 만들 수 있습니다.

4. 컨테이너 스타일 쿼리

CSS 컨테이너 쿼리의 일부인 스타일 쿼리를 사용하면 개발자가 상위 컨테이너의 계산된 맞춤 속성 값을 기반으로 하위 요소에 스타일을 적용하여 명시적인 크기 포함 없이 동적 구성요소를 사용할 수 있습니다.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

이 데모에서는 스타일 쿼리를 사용하여 --theme 맞춤 속성을 기반으로 색상을 설정합니다.

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

스타일 쿼리에 대해 자세히 알아보기

5. CSS if() 함수

if() CSS 함수는 인라인 조건부 로직을 CSS 속성 값에 직접 적용합니다. 세미콜론으로 구분된 일련의 조건 (스타일 쿼리, 미디어 쿼리 또는 기능 쿼리)을 평가하고, 첫 번째 true 조건과 연결된 값을 설정할 수 있으며, 선택적으로 else 대체 값을 사용할 수 있습니다.

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

이전 데모에서는 if() 함수를 사용하여 contrast-color() 함수의 출력을 기반으로 테마가 적용된 대비 색상을 만듭니다.

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

@supports과 함께 사용할 수 있는 CSS at-rule() 함수를 사용하면 개발자가 브라우저가 @starting-style 또는 @view-transition과 같은 특정 at-rule을 인식하는지 기능 감지할 수 있습니다.

예를 들어 @function 지원을 확인하려면 다음과 같이 사용합니다.

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

at-rule()를 사용하면 at-rule 자체의 기본 지원만 확인할 수 있으며 특정 설명자, 서곡 또는 전체 at-rule 블록을 테스트하는 데는 사용할 수 없습니다. 고정된 질문이나 스타일 질문과 같은 항목을 감지하는 데 사용할 수 있는 해결 방법이 있습니다.

@supports at-rule에 관해 자세히 알아보기

7. <meta name="text-scale">

text-scale HTML 메타 태그는 페이지가 OS 및 브라우저 수준 텍스트 크기 설정에 비례하여 <html> 루트 요소의 초기 글꼴 크기를 조정하도록 선택합니다. 이는 특히 모바일 플랫폼에 중요합니다.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

이제 적용되면 html 요소의 글꼴 크기가 운영체제에 의해 결정되므로 기본 font-size를 설정할 필요가 없습니다. 그런 다음 em 및 rem과 같은 상대 단위로 길이를 사용하면 계산된 픽셀 값은 해당 기본 글꼴 크기를 기반으로 합니다.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

DevTools의 렌더링 탭에서 선호하는 글꼴 크기를 에뮬레이션할 수 있습니다. 드롭다운을 사용하여 값을 변경합니다.

<meta name=text-scale>에 관해 자세히 알아보기

2부: 자연스러운 상호작용 구현

직관적인 물리적 동작과 자연스러운 동작은 웹 환경을 네이티브 애플리케이션만큼 촉각적으로 만드는 데 중요합니다. 최신 CSS를 사용하면 이를 더 쉽게 달성할 수 있습니다.

8. linear() 이징 함수

linear() 이징 함수를 사용하면 지정된 진행률 포인트 사이를 무제한으로 선형 보간하여 복잡한 맞춤 전환 곡선 (예: 바운스, 스프링, 탄성 오버슈트)을 만들 수 있습니다.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

다음 데모에서는 linear()를 사용하여 대화상자가 표시되거나 숨겨질 때 자연스러운 이징을 제공합니다.

linear()에 관해 자세히 알아보기

9. @starting-style

@starting-style CSS @규칙은 요소가 DOM에서 처음 렌더링되거나 display가 none에서 표시되는 값으로 변경될 때 부드러운 진입 전환을 사용 설정하기 위해 전환하려는 요소의 속성에 대한 시작 값을 정의합니다.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

이전 데모에서는 <dialog>가 처음 표시될 때 애니메이션으로 표시하는 데 사용됩니다.

10. transition-behavior: allow-discrete

transition-behavior 속성 (transition 약식에서 allow-discrete로 자주 사용됨)을 사용하면 display 또는 overlay와 같은 개별 속성을 전환하여 요소가 숨겨지기 전에 종료 애니메이션 중에 계속 표시되도록 할 수 있습니다.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() 및 sibling-count()

sibling-index() 및 sibling-count() CSS 함수는 각각 형제 요소 간의 1 기반 위치와 총 형제 요소 수를 나타내는 정수를 반환합니다. JavaScript 없이 CSS에서 지연된 애니메이션 지연을 동적으로 계산하는 데 적합합니다.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

이 데모에서는 animation-delay에서 sibling-index()를 사용하여 대화상자의 콘텐츠가 번갈아 표시됩니다.

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. 대화상자 가벼운 닫기 (closedby 속성)

<dialog> 요소 (값이 any)의 closedby 속성을 사용하면 맞춤 JavaScript 없이 모달 대화상자 외부를 클릭하거나 ESC를 누를 때 자동으로 모달 대화상자를 닫는 선언적 '가벼운 닫기' 동작을 사용할 수 있습니다.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

이전 데모에서 사용해 볼 수 있습니다.

13. corner-shape

실험용 corner-shape 약식 속성을 사용하면 개발자가 border-radius에서 둥근 모서리를 수정하여 bevel, scoop, notch, squircle과 같은 맞춤 시각적 모양을 만들 수 있습니다(superellipse() 사용). 테두리, 그림자, 포커스 윤곽선은 모양에 자동으로 맞춰집니다.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

3부: 안내 탐색 제공

사용자 여정을 안내하면 컨텍스트를 유지하고 애플리케이션의 흐름을 이해하여 혼란스러운 새로고침을 방지할 수 있습니다. 최근 업데이트된 뷰 전환을 비롯한 몇 가지 방법으로 이 작업을 수행할 수 있습니다.

14. 동일 문서 보기 전환

View Transition API의 일부인 동일 문서 전환은 스냅샷을 캡처하고 CSS를 사용하여 전환함으로써 단일 페이지 애플리케이션 (SPA)에서 DOM 상태 간에 애니메이션을 적용하는 메커니즘을 제공합니다.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

동일한 문서 보기 전환에 대해 자세히 알아보기

15. 교차 문서 보기 전환

다중 페이지 애플리케이션 (MPA)으로 뷰 전환 API를 확장하여 페이지 간에 동일한 view-transition-name를 가진 요소를 일치시켜 다양한 문서 간에 이동할 때 원활한 애니메이션 전환을 만들 수 있습니다.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

교차 문서 보기 전환에 대해 자세히 알아보기

16. 요소 범위 뷰 전환

Chrome 147에서 도입된 요소 범위 뷰 전환을 사용하면 페이지의 나머지 부분을 활성 상태로 유지하고 상호작용이 가능하도록 하면서 특정 DOM 하위 트리에서만 뷰 전환을 실행할 수 있습니다 (element.startViewTransition() 사용).

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

요소 범위 뷰 전환을 시작하면 격리된 상태로 실행됩니다. view-transition-name가 있는 요소에 대해서만 하위 트리를 스캔하고 ::view-transition 의사 요소가 범위 루트 자체에 삽입됩니다. view-transition-scope: all이 자동으로 적용되므로 격리가 가능합니다.

이렇게 하면 여러 뷰 전환을 동시에 실행할 수 있을 뿐만 아니라 뷰 전환을 중첩할 수도 있습니다. 이러한 목록의 항목이 셔플되는 동안 목록 자체를 바꿀 수도 있습니다.

또한 그룹 의사 요소는 자동으로 중첩되며, 필요한 경우 래핑 그룹-자식 의사 요소의 오버플로가 잘립니다.

범위가 지정된 뷰 전환은 마이크로 상호작용과 페이지 내 상태 기반 모핑에 적합하며, 시각적 변경이 있을 때 사용자에게 더 많은 컨텍스트를 제공합니다. 이는 애플리케이션의 사용성을 개선하는 동시에 디자인과 느낌을 향상하는 좋은 방법입니다. 이러한 작은 변화가 큰 차이를 만듭니다.

요소 범위 뷰 전환에 대해 자세히 알아보기

17. 2단계 뷰 전환

이는 새로운 DOM이 준비될 때까지 기다리지 않고 즉시 교차 문서 뷰 전환을 시작하는 실험적 기능으로, 먼저 중간 스켈레톤 화면이나 로드 UI로 전환한 후 교차 문서 뷰 전환을 계속합니다.

2단계 뷰 전환에 대해 자세히 알아보기

18. 스크롤 기반 애니메이션

스크롤 기반 애니메이션은 CSS 애니메이션의 진행률을 스크롤 컨테이너의 스크롤 위치에 직접 연결하여 개발자가 효율적인 시차 효과 및 스크롤 표시기와 같은 스크롤 기반 인터페이스를 빌드할 수 있도록 합니다.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. 스크롤 트리거 애니메이션

Chrome의 새로운 기능은 스크롤 트리거 애니메이션입니다. 스크롤 트리거 애니메이션은 스크롤 경계가 교차될 때 표준 시간 기반 CSS 애니메이션을 트리거하여 (timeline-trigger를 사용하여 트리거를 정의하고 animation-trigger를 사용하여 재생) IntersectionObserver에 대한 선언적 대안을 제공합니다.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

스크롤 트리거 애니메이션의 기본 메커니즘은 활성 또는 비활성 상태인 타임라인 트리거입니다.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

다음 데모에서 시각화 도구를 켜서 어떤 일이 일어나는지 확인하세요. 첫 번째 범위는 활성화 범위로, 트리거가 활성화되는 시점을 결정합니다. 두 번째 범위는 활성 범위로, 활성 상태를 유지해야 하는 기간을 결정합니다.

스크롤 트리거 애니메이션에 대해 자세히 알아보기

20. scroll-target-group: auto

이제 사용자의 스크롤 위치에 따라 탐색 링크를 자동으로 강조 표시하는 네이티브 CSS 스크롤 스파이를 빌드할 수 있습니다. 탐색 목록에 scroll-target-group: auto를 설정하면 브라우저가 자동으로 aria-current="true"를 설정하고 활성 링크에 :target-current 의사 클래스를 적용합니다. 그런 다음 :target-current을 사용하여 활성 링크의 스타일을 추가로 지정할 수 있습니다.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

scroll-target-group을 사용한 CSS 스크롤 스파이 자세히 알아보기

21. scrollIntoView() 컨테이너 옵션

scrollIntoView() 메서드에 container 옵션이 추가됩니다. target.scrollIntoView({container: 'nearest'})를 설정하면 스크롤이 최상위까지 버블링되는 대신 가장 가까운 상위 스크롤러로 제한되어 방향 감각을 잃게 하는 페이지 수준 스크롤을 방지할 수 있습니다.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

이 데모에서 체크박스를 사용하여 옵션을 사용 설정 및 중지합니다.

container: "nearest"에 관해 자세히 알아보기

22. 대기 가능한 프로그래매틱 스크롤

이제 모든 프로그래매틱 스크롤 메서드 (예: scroll(), scrollTo(), scrollIntoView())가 프로미스를 반환합니다. 이를 통해 개발자는 후속 로직 (예: 강조 효과 추가)을 실행하기 전에 부드러운 스크롤 애니메이션의 완료를 await할 수 있습니다.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

다음 데모에서 작동 방식을 확인할 수 있습니다. 먼저 요소가 뷰로 스크롤된 후 강조 표시 효과가 추가됩니다.

4부: 콘텐츠 극대화, 노이즈 감소

가장 짜증 나는 웹 환경 중 하나는 콘텐츠를 볼 것으로 예상했는데 방해가 되는 팝업이나 배너로 인해 차단되는 것입니다. 시각적 혼란과 애플리케이션 테두리를 없애고 보조 작업을 레이어 UI 뒤로 이동하여 콘텐츠 영역에 우선순위를 부여합니다.

23. 스크롤 상태 쿼리 (scrolled)

CSS 컨테이너 쿼리의 일부인 scroll-state 쿼리를 사용하면 container-type: scroll-state를 사용하여 컨테이너의 스크롤 상태에 따라 하위 요소를 스타일 지정할 수 있습니다. scrolled 쿼리(예: scroll-state(scrolled: bottom))는 가장 최근의 상대 스크롤 방향을 감지하여 'Hidey Bar'와 같은 패턴을 지원합니다.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

'Hidey Bar' 패턴에 대해 자세히 알아보기

24. 고정된 컨테이너 쿼리

CSS 앵커 포지셔닝에는 앵커 컨테이너 쿼리가 포함되어 있어 앵커 포지셔닝 요소에서 현재 활성 상태인 대체 위치 (예: fallback: bottom 또는 fallback: flip-block)를 확인할 수 있으므로 앵커 포지셔닝 요소 (예: 도움말 화살표)의 스타일을 동적으로 업데이트할 수 있습니다.

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

다음 데모에서는 앵커가 지정된 컨테이너 쿼리를 사용하여 대체 위치와 표시 영역의 위치에 따라 앵커가 지정된 팝오버가 자체적으로 위치를 변경합니다. 툴팁이 호출기 위에 열리면 소스에서 아래쪽에서 위쪽으로 애니메이션이 적용됩니다. 호출기 아래에 있으면 위에서 아래로 애니메이션이 적용됩니다.

25. CSS border-shape

border-shape 속성을 사용하면 clip-path과 동일한 모양 구문을 사용하여 비직사각형 테두리를 정의할 수 있습니다. 클리핑과 달리 border-shape를 사용하면 테두리, 윤곽선, 그림자가 맞춤 모양과 시각적으로 정렬됩니다. 또한 border-shape은 훨씬 더 유연하므로 corner-shape의 기능을 넘어섭니다.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. CSS shape() 함수

CSS shape() 함수를 사용하면 CSS에서 복잡한 기하학적 경로를 인라인으로 정의할 수 있습니다. clip-path, border-shape, shape-outside과 같은 속성과 함께 사용하여 콘텐츠가 떠다닐 수 있는 유기적이고 비직사각형 모양을 만들 수 있습니다.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. 축별 고정 위치

컨테이너가 단일 축의 스크롤러가 될 수 있도록 하는 오버플로 사양의 최근 변경사항 덕분에 이제 고정 위치 지정이 두 개의 서로 다른 스크롤 컨테이너 (축당 하나)를 동시에 추적할 수 있습니다. 이렇게 하면 단일 축 스크롤 컨테이너 내에서도 테이블의 고정된 첫 번째 열과 상단 행이 예상대로 작동합니다.

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

이 기능은 실험용 웹 플랫폼 기능 플래그가 사용 설정된 Chrome 148에서 테스트할 수 있습니다.

축별 position: sticky 자세히 알아보기

5부: 폼 팩터에 맞게 조정

웹의 가장 가치 있는 특징 중 하나는 유연성입니다. 사용자는 다양한 기기에서 웹을 탐색할 수 있으며 각 기기에는 자체 상호작용 메커니즘이 있습니다. 레이아웃은 가상 키보드가 열려 있는지 또는 터치 타겟이 활성 상태인지에 관계없이 기기와 입력 방식에 맞게 기본적으로 적응해야 합니다. 웹을 디자인할 때 폼 팩터를 염두에 두면 사이트나 웹 앱에 세련미를 더하고 사용자 기대치에 부합할 수 있습니다.

28. 오버스크롤 동작 (스와이프 가능 영역)

폼 팩터에 적응하는 한 가지 예는 모바일 웹에서 스와이프 및 동작 기반 상호작용을 사용할 수 있다는 것입니다. 스크롤러를 사용하여 이러한 효과를 일부 구현할 수 있지만 항상 직관적인 접근 방식은 아닙니다.

Chrome팀은 OpenUI 커뮤니티 그룹과 논의하여 overscrollcontainer 및 명령 호출기를 사용하여 터치와 스크롤에서 자연스럽게 작동하는 네이티브, 동작 기반 스와이프 가능 영역 (예: 스와이프 가능한 Gmail 목록 또는 스와이프하여 닫을 수 있는 측면 메뉴)을 만들 수 있는 선언적 솔루션을 제안하고 있습니다.

오버스크롤 동작 자세히 알아보기

29. HTML-in-Canvas

HTML-in-Canvas API는 개발자가 layoutsubtree 속성을 사용하여 <canvas> 내부에 실제 DOM 요소를 배치할 수 있도록 하는 주요 패러다임 전환입니다. 이러한 요소는 완전히 검색 가능하고 액세스 가능하며 자동 완성과 같은 브라우저 기능을 지원하는 동시에 WebGL/WebGPU 셰이더가 기본적으로 상호작용할 수 있도록 합니다.

라이트닝 라운드

웹을 발전시키는 다른 강력한 기능을 빠르게 살펴봅니다.

30. DOM 상태 보존 이동 (moveBefore())

moveBefore() DOM 메서드를 사용하면 상태를 삭제하거나 다시 로드를 트리거하지 않고 DOM 노드 (예: 동영상, iframe 또는 포커스가 있는 입력)의 상위 요소를 변경할 수 있습니다.

즉, 레이아웃에서 동영상이 계속 재생되고, iframe이 다시 로드되지 않고, CSS 애니메이션이 다시 시작되지 않으며, 입력 필드가 포커스를 유지합니다.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

moveBefore()에 관해 자세히 알아보기

31. CSS text-fit

text-fit는 텍스트 줄이 포함 요소 (예: text-fit: grow per-line-all)의 정확한 너비에 정확하게 맞도록 글꼴 크기를 동적으로 조정하는 실험적인 CSS 속성입니다.

text-fit에 관해 자세히 알아보기

32. CSS text-box (text-box-trim 및 text-box-edge)

text-box 속성 (및 긴 형식 text-box-trim 및 text-box-edge)은 텍스트 위아래의 세로 공간 (리딩)을 잘라내 완벽한 세로 정렬과 중앙 정렬을 보장합니다.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

text-trim에 관해 자세히 알아보기

33. CSS 간격 장식

CSS 간격 장식은 그리드와 Flexbox에 column-rule를 가져오고 새로운 row-rule 속성을 도입하여 개발자가 행과 열 사이의 거터 스타일을 지정할 수 있습니다. 더 이상 테두리나 가상 요소를 사용하여 행과 열 사이의 규칙을 스타일링하지 않아도 됩니다.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

CSS Gap Decorations 자세히 알아보기

34. 스크롤바 인식 뷰포트 단위 (vw, vh 등)

vw 및 vh과 같은 뷰포트 단위는 스크롤 막대의 크기를 자동으로 빼므로 (:root에 선언된 overflow-y: scroll 또는 scrollbar-gutter: stable을 사용하여 표시되도록 보장된 경우) 요소를 100vw로 설정할 때 실수로 수평 오버플로가 발생하는 것을 방지합니다.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

스크롤 막대 인식 뷰포트 단위에 대해 자세히 알아보기

35. 의사 요소에 대한 JavaScript 액세스

이제 웹 API가 CSS 가상 요소 (예: ::before 또는 ::after)를 JavaScript에 노출합니다.

Element.pseudo(type)를 사용하여 CSSPseudoElement 인스턴스를 검색하고 Event.pseudoTarget를 사용하여 이벤트를 트리거한 의사 요소를 확인할 수 있습니다.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

CSSPseudoElement에 관해 자세히 알아보기

결론

지금까지 Web UI의 새로운 기능을 살펴봤습니다. 이러한 기능을 활용하여 멋진 인터페이스를 구축해 보세요. 그럼 내년에 다시 뵙겠습니다.