이 페이지는 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()
중첩
계층 캐스케이딩
범위가 지정된 스타일
삼각 함수
개별 변환 속성
팝오버
앵커 위치
selectmenu
개별 속성 전환
스크롤 기반 애니메이션
전환 보기

새로운 반응형

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

컨테이너 쿼리

브라우저 지원

소스

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

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

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

을 참고하세요.

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

스타일 쿼리

브라우저 지원

소스

컨테이너 쿼리 사양을 사용하면 상위 컨테이너의 스타일 값을 쿼리할 수도 있습니다. 현재 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()`

브라우저 지원

소스

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

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

데모 스크린샷

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

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

:has()에 대한 자세한 내용과 데모는 이 블로그 게시물을 참조하세요.

nth-of 문법

브라우저 지원

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

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

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

`text-wrap: balance`

선택자와 스타일 쿼리 외에도 스타일 내에 로직을 삽입할 수 있는 위치가 있습니다. 서체도 그중 하나입니다. Chrome 114부터 text-wrap 속성을 balance 값으로 사용하여 제목에 텍스트 줄바꿈 균형을 사용할 수 있습니다.

데모 사용해 보기

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

데모 사용해 보기

이 도움말에서 자세히 알아보세요.

`initial-letter`

브라우저 지원

소스

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

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

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

동적 뷰포트 단위

브라우저 지원

오늘날 웹 개발자가 겪는 일반적인 문제 중 하나는 특히 휴대기기에서 전체 뷰포트 크기를 정확하고 일관되게 지정하는 것입니다. 개발자는 100vh(뷰포트 높이의 100%)가 '뷰포트 높이만큼'을 의미하도록 하려 하지만 vh 단위는 모바일에서 탐색 메뉴를 접는 등의 사항을 고려하지 않으므로 너무 길어져 스크롤이 발생하는 경우가 있습니다.

너무 많은 스크롤바 표시

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

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

새 표시 영역 단위 시각화됨

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

넓어진 색 공간

브라우저 지원

소스

웹 플랫폼에 새로 추가된 또 다른 핵심 사항은 넓어진 색 영역입니다. 웹 플랫폼에서 넓어진 색 영역을 사용할 수 있게 되기 전에는 최신 기기에서 볼 수 있는 선명한 색상의 사진을 찍을 수 있었지만 이러한 선명한 값에 맞는 버튼, 텍스트 색상 또는 배경을 가져올 수는 없었습니다.

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

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

각 새 색상 공간의 관계와 크기를 보여주는 데 도움이 되는 다양한 색상의 삼각형 5개가 쌓여 있습니다.

DevTools에서 색상 범위가 어떻게 확장되었는지 즉시 확인할 수 있습니다. 흰색 선이 srgb 범위가 끝나는 지점과 더 넓은 색상 범위가 시작되는 지점을 나타냅니다.

색상 선택 도구에 색 영역 선을 표시하는 DevTools

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

color-mix()

브라우저 지원

소스

확장된 색상 공간을 펼치는 것은 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의 스타일 창에서 멋진 미리보기 벤 다이어그램 아이콘을 통해 이 기능을 확인할 수 있습니다.

벤 다이어그램 색상 믹스 아이콘이 있는 DevTools 스크린샷

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

CSS 기초

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

중첩

브라우저 지원

소스

Sass에서 많은 사랑을 받은 CSS 중첩은 수년간 꾸준히 인기를 끌었던 CSS 개발자 요청 중 하나로, 드디어 웹 플랫폼에 도입됩니다. 중첩을 사용하면 개발자가 중복을 줄이는 더 간결한 그룹화된 형식으로 작성할 수 있습니다.

.card {}
.card:hover {}

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

  }
}

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

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

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

flex로의 레이아웃 조정은 컨테이너에 사용 가능한 인라인 공간이 480px보다 크거나 같은 경우에 발생합니다. 브라우저는 조건이 충족되면 새 디스플레이 스타일을 적용합니다.

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

계단식 레이어

브라우저 지원

소스

Google에서 확인한 또 다른 개발자 불만사항은 어떤 스타일이 다른 스타일보다 우선 적용되는지 일관성을 유지하는 것입니다. 이를 해결하는 한 가지 방법은 CSS 계층 구조를 더 효과적으로 제어하는 것입니다.

계단식 레이어는 사용자가 다른 레이어보다 우선순위가 높은 레이어를 제어할 수 있도록 하여 이 문제를 해결합니다. 즉, 스타일이 적용되는 시점을 더 세부적으로 제어할 수 있습니다.

캐스케이드 이미지

Codepen Project의 스크린샷 — Codepen 프로젝트를 살펴보세요.

이 도움말에서 계단식 레이어를 사용하는 방법을 자세히 알아보세요.

범위가 지정된 CSS

브라우저 지원

소스

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

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

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

이 실시간 데모에서 범위 제한이 있는 @scope를 @layer와 함께 확인할 수 있습니다.

을 참고하세요.

데모의 카드 스크린샷

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

삼각 함수

브라우저 지원

소스

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

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

를 참고하세요.

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

개별 변환 속성

브라우저 지원

소스

개발자의 에르고노믹스는 개별 변환 기능을 통해 지속적으로 개선되고 있습니다. 지난 I/O 이후 모든 최신 브라우저에서 개별 변환이 안정적으로 작동하게 되었습니다.

이전에는 transform 함수를 사용하여 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;
}

이를 통해 애니메이션 중에 다양한 시점에 다양한 변화율로 변환, 회전 또는 크기 변경이 동시에 발생할 수 있습니다.

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

맞춤설정 가능한 구성요소

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

이벤트 핸들러, 선언적 DOM 구조, 액세스 가능한 기본값이 포함된 팝업 기능이 내장되어 있습니다.
두 요소를 서로 연결하여 앵커 배치를 사용 설정하는 CSS API입니다.
선택 내 콘텐츠의 스타일을 지정하려는 경우 사용할 수 있는 맞춤설정 가능한 드롭다운 메뉴 구성요소입니다.

팝오버 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%에 배치합니다. 그런 다음 기존의 게재위치 값을 사용하여 나머지 게재위치 스타일을 적용합니다.

하지만 팝오버를 배치한 방식에 따라 뷰포트에 맞지 않으면 어떻게 해야 하나요?

뷰포트에서 팝오버가 튀어나옴

이 문제를 해결하기 위해 anchor Positioning 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>`

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

selectmenus의 예

캘린더 일정 내에 표시되는 색상에 해당하는 색상이 지정된 점으로 맨 왼쪽 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로의 애니메이션).

팝오버, selectmenu, 그리고 대화상자나 사용자설정 구성 요소와 같은 기존 요소들에 대해 멋진 전환을 가능하게 하는 작업의 일환으로, 브라우저는 이러한 애니메이션을 지원하는 새로운 배관을 활성화하고 있습니다.

다음 팝오버 데모는 :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 기능 둘러보기의 마지막 단계인 상호작용에 대해 알아보겠습니다.

이미 개별 속성의 애니메이션에 관해 말씀드렸지만 스크롤 기반 애니메이션 및 뷰 전환과 관련하여 Chrome에 출시되는 매우 흥미로운 API도 있습니다.

스크롤 기반 애니메이션

브라우저 지원

소스

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

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

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

이러한 새 API는 기존 Web Animations 및 CSS Animations API와 함께 작동하므로 이러한 API의 이점을 활용할 수 있습니다. 여기에는 이러한 애니메이션을 기본 스레드 외부에서 실행하는 기능이 포함됩니다. 예, 맞습니다. 이제 코드 몇 줄만 추가하면 스크롤에 의해 구동되고 기본 스레드에서 실행되는 부드럽고 매끄러운 애니메이션을 만들 수 있습니다. 좋아할 수밖에 없죠!

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

전환 보기

브라우저 지원

소스

View Transition 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;
}

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

보기 전환은 현재 Chrome 111부터 단일 페이지 앱 (SPA)에서 작동합니다. 여러 페이지 앱 지원이 진행 중입니다. 자세한 내용은 전체 보기 전환 가이드를 참고하세요.

결론

developer.chrome.com에서 CSS 및 HTML의 최신 방문 페이지를 확인하고 I/O 동영상에서 더 많은 웹 방문 페이지를 확인하세요.