이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS 및 UI의 새로운 기능: I/O 2023 에디션

Una Kravets

Bramus

Adam Argyle

지난 몇 개월 동안 웹 UI의 황금기가 도래했습니다. 새로운 플랫폼 기능은 이전보다 더 많은 웹 기능과 맞춤설정 기능을 지원하는 긴밀한 교차 브라우저 채택과 함께 제공됩니다.

최근 출시되었거나 곧 출시될 예정인 가장 흥미롭고 영향력 있는 기능 20가지를 소개합니다.

컨테이너 쿼리
스타일 쿼리
:has() 선택기
nth-of 마이크로 문법
text-wrap: balance
initial-letter
동적 표시 영역 단위
넓어진 색 영역 색상 공간
color-mix()
중첩
캐스케이드 레이어
범위 지정 스타일
삼각 함수
개별 변환 속성
popover
앵커 포지셔닝
selectmenu
불연속 속성 전환
스크롤 기반 애니메이션
전환 보기

새로운 반응형

새로운 반응형 디자인 기능부터 살펴보겠습니다. 새로운 플랫폼 기능을 사용하면 반응형 스타일 지정 정보를 소유한 구성요소로 논리적 인터페이스를 빌드하고, 시스템 기능을 활용하여 더 네이티브한 느낌의 UI를 제공하는 인터페이스를 빌드하고, 사용자가 완전한 맞춤설정을 위한 사용자 환경설정 쿼리를 통해 디자인 프로세스에 참여할 수 있습니다.

컨테이너 쿼리

Browser Support

Source

최근 모든 최신 브라우저에서 컨테이너 쿼리가 안정화되었습니다. 이를 통해 상위 요소의 크기와 스타일을 쿼리하여 하위 요소에 적용해야 하는 스타일을 결정할 수 있습니다. 미디어 쿼리는 표시 영역의 정보에만 액세스하고 이를 활용할 수 있으므로 페이지 레이아웃의 매크로 뷰에서만 작동할 수 있습니다. 반면 컨테이너 쿼리는 레이아웃 내에서 원하는 수의 레이아웃을 지원할 수 있는 더 정확한 도구입니다.

다음 받은편지함 예시에서 기본 받은편지함과 즐겨찾기 사이드바는 모두 컨테이너입니다. 이메일은 사용 가능한 공간에 따라 그리드 레이아웃을 조정하고 이메일 타임스탬프를 표시하거나 숨깁니다. 페이지 내의 동일한 구성요소이지만 다른 뷰에 표시됩니다.

컨테이너 쿼리가 있으므로 이러한 구성요소의 스타일은 동적입니다. 페이지 크기와 레이아웃을 조정하면 구성요소가 개별적으로 할당된 공간에 반응합니다. 사이드바가 더 많은 공간이 있는 상단 바로 바뀌고 레이아웃이 기본 받은편지함과 더 비슷해집니다. 공간이 부족하면 두 항목 모두 축약된 형식으로 표시됩니다.

이 게시물에서 컨테이너 쿼리 및 논리적 구성요소 빌드에 대해 자세히 알아보세요.

스타일 쿼리

Browser Support

컨테이너 쿼리 사양을 사용하면 상위 컨테이너의 스타일 값을 쿼리할 수도 있습니다. 현재 Chrome 111에서 부분적으로 구현되어 있으며, 여기서는 CSS 맞춤 속성을 사용하여 컨테이너 스타일을 적용할 수 있습니다.

다음 예에서는 비, 맑음, 흐림과 같은 맞춤 속성 값에 저장된 날씨 특성을 사용하여 카드의 배경과 표시기 아이콘의 스타일을 지정합니다.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

날씨 카드 데모

스타일 쿼리는 이제 시작에 불과합니다. 향후 맞춤 속성 값이 존재하는지 확인하고 코드 반복을 줄이는 불리언 쿼리가 제공될 예정이며, 현재 값 범위에 따라 스타일을 적용하는 범위 쿼리가 논의되고 있습니다. 이렇게 하면 강수 확률 또는 구름량에 백분율 값을 사용하여 여기에 표시된 스타일을 적용할 수 있습니다.

스타일 쿼리에 관한 블로그 게시물에서 자세히 알아보고 데모를 확인하세요.

`:has()`

Browser Support

Source

강력한 동적 기능에 관해 말하자면 :has() 선택자는 최신 브라우저에 도입되는 가장 강력한 새로운 CSS 기능 중 하나입니다. :has()를 사용하면 상위 요소에 특정 하위 요소가 포함되어 있는지 또는 하위 요소가 특정 상태에 있는지 확인하여 스타일을 적용할 수 있습니다. 즉, 이제 기본적으로 상위 선택기가 있습니다.

컨테이너 쿼리 예시를 기반으로 :has()를 사용하여 구성요소를 더욱 동적으로 만들 수 있습니다. 여기에서 '별' 요소가 있는 항목에는 회색 배경이 적용되고 체크된 체크박스가 있는 항목에는 파란색 배경이 적용됩니다.

데모 스크린샷

하지만 이 API는 상위 선택에만 국한되지 않습니다. 상위 요소 내의 하위 요소를 스타일 지정할 수도 있습니다. 예를 들어 항목에 별표 요소가 있으면 제목이 굵게 표시됩니다. 이 작업은 .item:has(.star) .title를 사용하여 실행합니다. :has() 선택기를 사용하면 상위 요소, 하위 요소, 심지어 형제 요소에도 액세스할 수 있으므로 이는 매우 유연한 API이며 매일 새로운 사용 사례가 등장합니다.

참고: 대규모 DOM 트리에서 렌더링 성능이 저하되지 않도록 이 선택기의 범위를 최대한 좁히는 것이 좋습니다. 예를 들어 :has()를 사용하여 루트 html 요소의 일치 항목을 확인하는 것은 더 작은 트리가 있는 탐색 메뉴나 카드 요소에서 일치 항목을 확인하는 것보다 느립니다.

자세히 알아보고 데모를 더 살펴보려면 이 블로그 게시물에서 :has()에 관해 알아보세요.

nth-of 문법

Browser Support

이제 웹 플랫폼에서 더 고급 nth-child 선택을 사용할 수 있습니다. 고급 nth-child 구문은 새 키워드 ('of')를 제공하므로 검색할 더 구체적인 하위 집합과 함께 기존 An+B 마이크로 구문을 사용할 수 있습니다.

특수 클래스에 :nth-child(2)와 같은 일반 nth-child를 사용하면 브라우저에서 특수 클래스가 적용되고 두 번째 자식인 요소를 선택합니다. 이는 먼저 모든 .special 요소를 사전 필터링한 다음 해당 목록에서 두 번째 요소를 선택하는 :nth-child(2 of .special)와는 대조적입니다.

nth-of 구문에 관한 도움말에서 이 기능을 자세히 알아보세요.

`text-wrap: balance`

선택기와 스타일 쿼리는 스타일 내에 로직을 삽입할 수 있는 유일한 위치가 아닙니다. 서체도 마찬가지입니다. Chrome 114부터 balance 값을 사용하여 text-wrap 속성을 사용하여 텍스트 줄바꿈 균형을 제목에 적용할 수 있습니다.

데모 사용해 보기

텍스트의 균형을 맞추기 위해 브라우저는 추가 줄을 발생시키지 않는 가장 작은 너비를 효과적으로 이진 검색하여 CSS 픽셀 (디스플레이 픽셀 아님)에서 중지합니다. 이진 검색의 단계를 더욱 최소화하기 위해 브라우저는 평균 선 너비의 80% 로 시작합니다.

데모 사용해 보기

자세한 내용은 이 도움말을 참고하세요.

`initial-letter`

Browser Support

Source

웹 서체의 또 다른 유용한 개선사항은 initial-letter입니다. 이 CSS 속성을 사용하면 인셋 드롭캡 스타일을 더 효과적으로 제어할 수 있습니다.

:first-letter 가상 요소에 initial-letter를 사용하여 다음을 지정합니다. 글자가 차지하는 줄 수에 따른 글자 크기 글자가 배치될 위치의 글자 블록 오프셋 또는 '싱크'입니다.

intial-letter 사용에 대해 자세히 알아보려면 여기를 참고하세요.

동적 뷰포트 단위

Browser Support

오늘날 웹 개발자가 직면하는 일반적인 문제 중 하나는 특히 휴대기기에서 정확하고 일관된 전체 뷰포트 크기 조정입니다. 개발자는 100vh (표시 영역 높이의 100%)가 '표시 영역만큼 높음'을 의미하기를 원하지만 vh 단위는 모바일에서 탐색 메뉴를 접는 것과 같은 요소를 고려하지 않으므로 때로는 너무 길어져 스크롤이 발생합니다.

스크롤바가 너무 많이 표시됨

이 문제를 해결하기 위해 이제 웹 플랫폼에 다음과 같은 새로운 단위 값이 있습니다. - 소형 뷰포트 높이 및 너비 (또는 svh 및 svw): 가장 작은 활성 뷰포트 크기를 나타냅니다. - 가장 큰 크기를 나타내는 큰 표시 영역 높이와 너비 (lvh 및 lvw) - 동적 표시 영역 높이 및 너비 (dvh 및 dvw)

동적 뷰포트 단위는 상단의 주소 또는 하단의 탭 표시줄과 같은 추가 동적 브라우저 툴바가 표시될 때와 표시되지 않을 때 값이 변경됩니다.

새로운 표시 영역 단위 시각화

이러한 새 단위에 대한 자세한 내용은 대형, 소형, 동적 뷰포트 단위를 참고하세요.

넓어진 색 영역 색상 공간

Browser Support

Source

웹 플랫폼에 새로 추가된 또 다른 주요 기능은 넓은 색역 색상 공간입니다. 웹 플랫폼에서 넓은 색 영역을 사용할 수 있기 전에는 최신 기기에서 볼 수 있는 선명한 색상으로 사진을 찍을 수 있었지만 버튼, 텍스트 색상 또는 배경을 이러한 선명한 값과 일치시킬 수는 없었습니다.

일련의 이미지가 넓은 색상 영역과 좁은 색상 영역 사이에서 전환되는 모습이 표시되어 색상 선명도와 그 효과를 보여줍니다.
직접 사용해 보기

하지만 이제 웹 플랫폼에는 REC2020, P3, XYZ, LAB, OKLAB, LCH, OKLCH 등 다양한 새로운 색상 공간이 있습니다. HD 색상 가이드에서 새로운 웹 색상 공간 등을 확인하세요.

새 색상 공간의 관계와 크기를 설명하기 위해 다양한 색상의 삼각형 5개가 겹쳐 있습니다.

DevTools에서 색상 범위가 확장된 것을 바로 확인할 수 있습니다. 흰색 선은 sRGB 범위가 끝나는 지점과 넓은 색 영역 색상 범위가 시작되는 지점을 구분합니다.

색상 선택 도구에 색역 선이 표시된 DevTools

색상에 사용할 수 있는 도구가 훨씬 더 많습니다. 그라데이션 개선사항도 놓치지 마세요. 새로운 웹 색상 선택 도구와 그라데이션 빌더를 사용해 볼 수 있도록 Adam Argyle이 새로 만든 도구도 있습니다. gradient.style에서 사용해 보세요.

color-mix()

Browser Support

Source

확장된 색상 공간을 확장하는 기능은 color-mix() 함수입니다. 이 함수는 두 색상 값을 혼합하여 혼합된 색상의 채널을 기반으로 새 값을 만드는 것을 지원합니다. 혼합하는 색상 공간이 결과에 영향을 미칩니다. oklch와 같은 더 지각적인 색상 공간에서 작업하면 srgb와 같은 색상 범위와는 다른 색상 범위가 표시됩니다.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

7가지 색상 공간 (srgb, linear-srgb, lch, oklch, lab, oklab, xyz)이 각각 다른 결과를 보여줍니다. 많은 부분이 분홍색이나 보라색이며, 실제로 파란색인 부분은 거의 없습니다. — 데모 사용해 보기

color-mix() 함수는 오랫동안 요청된 기능을 제공합니다. 즉, 불투명한 색상 값에 투명도를 추가하면서 값을 보존할 수 있습니다. 이제 다양한 불투명도로 색상의 변형을 만드는 동안 브랜드 색상 변수를 사용할 수 있습니다. 이를 수행하는 방법은 색상을 투명도와 혼합하는 것입니다. 브랜드 색상 파란색을 10% 투명도와 혼합하면 90% 불투명한 브랜드 색상이 됩니다. 이를 통해 색상 시스템을 빠르게 빌드할 수 있습니다.

Chrome DevTools의 스타일 창에 있는 멋진 미리보기 벤 다이어그램 아이콘을 통해 이 기능을 직접 확인할 수 있습니다.

벤 다이어그램 color-mix 아이콘이 있는 DevTools 스크린샷

color-mix에 관한 블로그 게시물에서 더 많은 예시와 세부정보를 확인하거나 이 color-mix() 플레이그라운드를 사용해 보세요.

CSS 기초

명확한 사용자 이점이 있는 새로운 기능을 빌드하는 것은 방정식의 한 부분이지만 Chrome에 도입되는 많은 기능은 개발자 환경을 개선하고 더 안정적이고 체계적인 CSS 아키텍처를 만드는 것을 목표로 합니다. 이러한 기능에는 CSS 중첩, 캐스케이드 레이어, 범위가 지정된 스타일, 삼각 함수, 개별 변환 속성이 포함됩니다.

중첩

Browser Support

Source

CSS 중첩은 사람들이 Sass에서 좋아하는 기능이며 수년 동안 CSS 개발자가 가장 많이 요청한 기능 중 하나로, 드디어 웹 플랫폼에 도입됩니다. 중첩을 사용하면 개발자가 중복을 줄이는 더 간결한 그룹화된 형식으로 작성할 수 있습니다.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

미디어 쿼리를 중첩할 수도 있으며, 이는 컨테이너 쿼리를 중첩할 수 있다는 의미이기도 합니다. 다음 예에서는 컨테이너에 충분한 너비가 있는 경우 카드가 세로 레이아웃에서 가로 레이아웃으로 변경됩니다.

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

컨테이너에 480px 이상의 인라인 공간이 있으면 레이아웃이 flex로 조정됩니다. 조건이 충족되면 브라우저에서 새 디스플레이 스타일을 적용합니다.

자세한 내용과 예시는 CSS 중첩에 관한 게시물을 참고하세요.

캐스케이드 레이어

Browser Support

Source

Google에서 파악한 또 다른 개발자 불만사항은 다른 스타일보다 우선하는 스타일의 일관성을 보장하는 것입니다. 이 문제를 해결하는 한 가지 방법은 CSS 캐스케이드에 대한 제어 기능을 개선하는 것입니다.

캐스케이드 레이어는 사용자가 다른 레이어보다 우선순위가 높은 레이어를 제어할 수 있도록 하여 이 문제를 해결합니다. 즉, 스타일이 적용되는 시기를 더 세밀하게 제어할 수 있습니다.

캐스케이드 삽화

Codepen 프로젝트의 스크린샷 — CodePen에서 프로젝트를 살펴봅니다.

이 도움말에서 캐스케이드 레이어를 사용하는 방법을 자세히 알아보세요.

범위가 지정된 CSS

Browser Support

Source

CSS 범위 지정 스타일을 사용하면 개발자가 특정 스타일이 적용되는 경계를 지정하여 기본적으로 CSS에 네이티브 네임스페이스를 만들 수 있습니다. 이전에는 개발자가 서드 파티 스크립트를 사용하여 클래스 이름을 변경하거나 특정 명명 규칙을 사용하여 스타일 충돌을 방지했지만, 곧 @scope를 사용할 수 있습니다.

여기서는 .title 요소를 .card로 범위 지정합니다. 이렇게 하면 블로그 게시물 제목이나 기타 제목과 같은 페이지의 다른 .title 요소와 제목 요소가 충돌하지 않습니다.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

이 라이브 데모에서 범위 지정 제한이 있는 @scope와 @layer를 함께 확인할 수 있습니다.

데모의 카드 스크린샷

css-cascade-6 사양에서 @scope에 대해 자세히 알아보세요.

삼각 함수

Browser Support

Source

새로운 CSS 파이프라인의 또 다른 부분은 기존 CSS 수학 함수에 추가되는 삼각 함수입니다. 이러한 함수는 이제 모든 최신 브라우저에서 안정적이며 웹 플랫폼에서 더 유기적인 레이아웃을 만들 수 있습니다. 좋은 예로 이 방사형 메뉴 레이아웃을 들 수 있습니다. 이제 sin() 및 cos() 함수를 사용하여 디자인하고 애니메이션을 적용할 수 있습니다.

아래 데모에서 점은 중앙 지점을 중심으로 회전합니다. 각 점을 자체 중심을 기준으로 회전한 다음 바깥쪽으로 이동하는 대신 각 점이 X축과 Y축에서 변환됩니다. X축과 Y축의 거리는 각각 --angle의 cos()와 sin()을 고려하여 결정됩니다.

이 주제에 관한 자세한 내용은 삼각 함수에 관한 도움말을 참고하세요.

개별 변환 속성

Browser Support

Source

개별 변환 함수를 통해 개발자 인체공학이 계속 개선됩니다. 마지막 I/O 이후 개별 변환이 모든 최신 브라우저에서 안정화되었습니다.

이전에는 변환 함수를 사용하여 하위 함수를 적용하여 UI 요소를 확장, 회전, 변환했습니다. 이 방법은 반복이 많았고 애니메이션에서 서로 다른 시간에 여러 변환을 적용할 때 특히 답답했습니다.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

이제 변환 유형을 분리하고 개별적으로 적용하여 CSS 애니메이션에서 이 모든 세부정보를 확인할 수 있습니다.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

이를 통해 애니메이션 중에 서로 다른 시간에 서로 다른 변화율로 변환, 회전 또는 크기 조절이 동시에 발생할 수 있습니다.

자세한 내용은 개별 변환 함수에 관한 게시물을 참고하세요.

맞춤설정 가능한 구성요소

웹 플랫폼을 통해 주요 개발자 요구사항을 해결하기 위해 Google은 OpenUI 커뮤니티 그룹과 협력하고 있으며, 우선 시작할 수 있는 세 가지 솔루션을 확인했습니다.

이벤트 핸들러, 선언적 DOM 구조, 접근 가능한 기본값이 있는 내장 팝업 기능
앵커 포지셔닝을 사용 설정하기 위해 두 요소를 서로 연결하는 CSS API입니다.
select 내부의 콘텐츠에 스타일을 지정하려는 경우에 사용할 수 있는 맞춤설정 가능한 드롭다운 메뉴 구성요소입니다.

팝오버 API는 요소에 다음과 같은 몇 가지 내장 브라우저 지원 기능을 제공합니다.

상위 레이어 지원으로 z-index를 관리할 필요가 없습니다. 팝오버나 대화상자를 열면 페이지 상단의 특수 레이어로 해당 요소가 승격됩니다.
auto 팝오버에서 무료로 제공되는 라이트 디스미스 동작을 사용하면 요소를 클릭하지 않을 때 팝오버가 닫히고 접근성 트리에서 삭제되며 포커스가 올바르게 관리됩니다.
팝오버 타겟과 팝오버 자체의 결합 조직에 대한 기본 접근성입니다.

이 모든 것은 이러한 모든 기능을 만들고 이러한 모든 상태를 추적하기 위해 작성해야 하는 JavaScript가 적다는 것을 의미합니다.

팝오버의 예

팝오버의 DOM 구조는 선언적이며 팝오버 요소에 id 및 popover 속성을 부여하는 것만큼 명확하게 작성할 수 있습니다. 그런 다음 popovertarget 속성이 있는 버튼과 같이 팝오버를 여는 요소에 해당 ID를 동기화합니다.

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover은 popover=auto의 줄임말입니다. popover=auto가 있는 요소는 열릴 때 다른 팝오버를 강제 종료하고, 열릴 때 포커스를 받으며, 가볍게 닫을 수 있습니다. 반대로 popover=manual 요소는 다른 요소 유형을 강제 종료하지 않고, 포커스를 즉시 받지 않으며, 가볍게 닫지 않습니다. 전환 버튼이나 기타 닫기 작업을 통해 닫힙니다.

현재 팝오버에 관한 최신 문서는 MDN에서 확인할 수 있습니다.

앵커 위치 지정

팝오버는 일반적으로 특정 요소에 고정해야 하는 대화상자 및 도움말과 같은 요소에도 자주 사용됩니다. 이 이벤트 예시를 살펴보겠습니다. 캘린더 일정을 클릭하면 클릭한 일정 근처에 대화상자가 표시됩니다. 캘린더 항목은 앵커이고 팝오버는 일정 세부정보를 표시하는 대화상자입니다.

anchor() 함수를 사용하여 가운데 정렬된 도움말을 만들 수 있습니다. 앵커의 너비를 사용하여 앵커의 x 위치의 50% 에 도움말을 배치합니다. 그런 다음 기존 위치 지정 값을 사용하여 나머지 배치 스타일을 적용합니다.

하지만 팝오버가 배치된 방식에 따라 뷰포트에 맞지 않으면 어떻게 될까요?

팝오버가 표시 영역에서 튀어나옴

이 문제를 해결하기 위해 앵커 위치 지정 API에는 맞춤설정할 수 있는 대체 위치가 포함되어 있습니다. 다음 예시에서는 'top-then-bottom'이라는 대체 위치를 만듭니다. 브라우저는 먼저 툴팁을 상단에 배치하려고 시도하며, 뷰포트에 맞지 않으면 브라우저가 앵커링 요소 아래쪽 하단에 배치합니다.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

이 블로그 게시물에서 앵커 위치에 대해 자세히 알아보세요.

`<selectmenu>`

팝오버와 앵커 위치 지정을 모두 사용하여 완전히 맞춤설정 가능한 선택 메뉴를 빌드할 수 있습니다. OpenUI 커뮤니티 그룹은 이러한 메뉴의 기본 구조를 조사하고 메뉴 내의 콘텐츠를 맞춤설정할 수 있는 방법을 모색해 왔습니다. 다음 시각적 예시를 참고하세요.

selectmenu의 예

캘린더 일정 내에 표시되는 색상에 해당하는 색상 점이 있는 가장 왼쪽의 selectmenu 예시를 빌드하려면 다음과 같이 작성하면 됩니다.

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

불연속 속성 전환

이 모든 것이 팝오버를 부드럽게 전환하려면 웹에서 불연속 속성을 애니메이션으로 처리할 방법이 필요합니다. 이러한 속성은 과거에 일반적으로 애니메이션이 적용되지 않았습니다(예: 최상위 레이어로 애니메이션 적용 및 최상위 레이어에서 애니메이션 적용, display: none로 애니메이션 적용 및 display: none에서 애니메이션 적용).

팝오버, 선택 메뉴, 심지어 대화상자나 맞춤 구성요소와 같은 기존 요소의 멋진 전환을 지원하기 위해 브라우저에서는 이러한 애니메이션을 지원하는 새로운 파이프라인을 사용 설정하고 있습니다.

다음 팝오버 데모에서는 열린 상태에 :popover-open, 열기 전 상태에 @starting-style를 사용하여 팝오버가 애니메이션으로 표시되고 사라지며, 열린 후 닫힌 상태에는 변환 값이 요소에 직접 적용됩니다. 디스플레이에서 이 모든 작업을 실행하려면 다음과 같이 transition 속성에 추가해야 합니다.

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

상호작용 수

이제 웹 UI 기능 둘러보기의 마지막 정거장인 상호작용으로 넘어가겠습니다.

이산 속성 애니메이션에 관해 이미 이야기했지만, 스크롤 기반 애니메이션과 뷰 전환에 관한 매우 흥미로운 API도 Chrome에 제공됩니다.

스크롤 기반 애니메이션

Browser Support

Source

스크롤 기반 애니메이션을 사용하면 스크롤 컨테이너의 스크롤 위치를 기반으로 애니메이션 재생을 제어할 수 있습니다. 즉, 위 또는 아래로 스크롤하면 애니메이션이 앞뒤로 스크러빙됩니다. 또한 스크롤 기반 애니메이션을 사용하면 스크롤 컨테이너 내의 요소 위치를 기반으로 애니메이션을 제어할 수도 있습니다. 이를 통해 시차 배경 이미지, 스크롤 진행률 표시줄, 시야에 들어올 때 드러나는 이미지와 같은 흥미로운 효과를 만들 수 있습니다.

이 API는 선언적 스크롤 기반 애니메이션을 쉽게 만들 수 있는 JavaScript 클래스 및 CSS 속성 집합을 지원합니다.

스크롤로 CSS 애니메이션을 실행하려면 새로운 scroll-timeline, view-timeline, animation-timeline 속성을 사용하세요. JavaScript Web Animations API를 실행하려면 ScrollTimeline 또는 ViewTimeline 인스턴스를 Element.animate()에 timeline 옵션으로 전달합니다.

이러한 새 API는 기존 웹 애니메이션 및 CSS 애니메이션 API와 함께 작동하므로 이러한 API의 장점을 활용할 수 있습니다. 여기에는 이러한 애니메이션을 기본 스레드에서 실행할 수 있는 기능이 포함됩니다. 맞습니다. 이제 몇 줄의 추가 코드로 스크롤에 의해 구동되고 기본 스레드에서 실행되는 부드러운 애니메이션을 만들 수 있습니다. 마음에 쏙 드실 거예요.

이러한 스크롤 기반 애니메이션을 만드는 방법에 관한 자세한 가이드는 스크롤 기반 애니메이션에 관한 이 도움말을 참고하세요.

전환 보기

Browser Support

Source

뷰 전환 API를 사용하면 두 상태 간에 애니메이션 전환을 만드는 동시에 한 단계로 DOM을 쉽게 변경할 수 있습니다. 뷰 간의 간단한 페이드일 수도 있지만 페이지의 개별 부분이 전환되는 방식을 제어할 수도 있습니다.

뷰 전환은 점진적 개선으로 사용할 수 있습니다. 어떤 방법으로든 DOM을 업데이트하는 코드를 가져와 기능을 지원하지 않는 브라우저를 위한 대체와 함께 뷰 전환 API로 래핑하세요.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

전환의 모양은 CSS를 통해 제어됩니다.

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Maxi Ferreira의 이 멋진 데모에서 볼 수 있듯이 동영상 재생과 같은 다른 페이지 상호작용은 뷰 전환이 진행되는 동안 계속 작동합니다.

현재 View Transitions는 Chrome 111부터 단일 페이지 앱 (SPA)에서 작동합니다. 여러 페이지 앱 지원이 준비 중입니다. 자세한 내용은 전체 뷰 전환 가이드를 참고하여 모든 내용을 살펴보세요.

결론

developer.chrome.com에서 CSS 및 HTML의 최신 기능을 확인하고 I/O 동영상에서 더 많은 웹 기능을 살펴보세요.

CSS 및 UI의 새로운 기능: I/O 2023 에디션 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

새로운 반응형

컨테이너 쿼리

스타일 쿼리

:has()

nth-of 문법

text-wrap: balance

initial-letter

동적 뷰포트 단위

넓어진 색 영역 색상 공간

color-mix()

CSS 기초

중첩

캐스케이드 레이어

범위가 지정된 CSS

삼각 함수

개별 변환 속성

맞춤설정 가능한 구성요소

팝오버

앵커 위치 지정

<selectmenu>

불연속 속성 전환

상호작용 수

스크롤 기반 애니메이션

전환 보기

결론

CSS 및 UI의 새로운 기능: I/O 2023 에디션

`:has()`

`text-wrap: balance`

`initial-letter`

`<selectmenu>`