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

Una Kravets

Bramus

Adam Argyle

지난 몇 달 동안 웹 UI의 황금기가 시작되었습니다. 그 어느 때보다 많은 웹 기능과 맞춤설정 기능을 지원하는 새로운 플랫폼 기능이 브라우저 간 철저한 도입과 함께 착수했습니다.

최근 출시되었거나 곧 출시될 20가지의 가장 흥미롭고 영향력 있는 기능은 다음과 같습니다.

• 컨테이너 쿼리
• 쿼리 스타일 지정
• :has() 선택기
• n번째 마이크로 문법
• text-wrap: balance
• initial-letter
• 동적 표시 영역 단위
• 넓어진 색 공간
• color-mix()
• 수집
• 계층 계단식
• 범위 지정 스타일
• 삼각 함수
• 개별 변환 속성
• 팝오버
• 앵커 위치 지정
• 메뉴 선택
• 개별 속성 전환
• 스크롤 기반 애니메이션
• 전환 보기

새 반응형 광고

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

컨테이너 쿼리

브라우저 지원

• 105
• 105
• 110
• 16

소스

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

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

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

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

스타일 쿼리

브라우저 지원

• 111
• 111
• x
• x

소스

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

브라우저 지원

• 105
• 105
• 121
• 15.4

소스

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

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

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

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

:has()에 대한 자세한 내용은 이 블로그 게시물에서 자세히 알아보고 더 많은 데모를 살펴보세요.

n번째 구문

브라우저 지원

• 111
• 111
• 113
• 9

이제 웹 플랫폼에서는 더욱 고급 nth-child를 선택할 수 있습니다. 고급 n번째 하위 구문은 새로운 키워드 ('of')를 제공하므로, A+B의 기존 마이크로 구문을 사용할 수 있고 보다 구체적인 하위 구문을 검색할 수 있습니다.

특수 클래스에서 :nth-child(2)와 같은 일반 n번째 하위 요소를 사용하면 브라우저에서 클래스 특수가 적용된 요소를 선택하고, 동시에 두 번째 하위 요소이기도 합니다. 이는 먼저 모든 .special 요소를 사전 필터링한 후 목록에서 두 번째 요소를 선택하는 :nth-child(2 of .special)와 대조됩니다.

n번째 구문에 관한 도움말에서 이 기능을 더 자세히 살펴보세요.

text-wrap: balance

선택기와 스타일 쿼리만이 스타일 내에 로직을 삽입할 수 있는 것은 아닙니다. 서체는 또 하나의 서체입니다. Chrome 114부터 balance 값과 함께 text-wrap 속성을 사용하여 제목에 텍스트 줄바꿈 분산을 사용할 수 있습니다.

데모 사용해 보기

텍스트의 균형을 맞추기 위해 브라우저는 추가 선을 생성하지 않는 최소 너비에 대해 사실상 바이너리 검색을 수행하고, 픽셀이 아닌 한 CSS 픽셀에서 중지합니다. 바이너리 검색에서 단계를 더 최소화하기 위해 브라우저는 평균 선 너비의 80% 로 시작합니다.

데모 사용해 보기

참고: 지금 바로 사용해 볼 수 있는 훌륭한 점진적 개선사항이지만, 이 API는 최대 4줄의 텍스트에서만 작동하므로 제목과 헤드라인에는 유용하지만 긴 콘텐츠를 사용할 때는 적합하지 않을 수 있습니다.

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

initial-letter

브라우저 지원

• 110
• 110
• x
• 9

소스

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

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

여기에서 intial-letter 사용에 대해 자세히 알아보세요.

동적 표시 영역 단위

브라우저 지원

• 108
• 108
• 101
• 15.4

오늘날 웹 개발자들이 직면하는 일반적인 문제 중 하나는 특히 휴대기기에서 정확하고 일관된 전체 표시 영역 크기 조정입니다. 개발자는 100vh (표시 영역 높이의 100%)이 '표시 영역 높이와 같은 높이'를 의미하기를 원하지만 vh 단위는 모바일의 탐색 메뉴 철회와 같은 사항을 고려하지 않기 때문에 너무 길어서 스크롤이 발생하는 경우가 있습니다.

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

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

참고: 동적 표시 영역 단위는 가상 키보드의 존재를 고려하지 않습니다. Chrome 108부터 메타 태그를 설정하여 이 동작을 변경할 수 있습니다.

이러한 새 단위에 관한 자세한 내용은 대형, 소형 및 동적 표시 영역 단위를 참고하세요.

넓어진 색 공간

브라우저 지원

• 111
• 111
• 113
• 15.4

소스

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

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

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

그러면 DevTools에서 색 범위가 어떻게 확장되었는지 즉시 확인할 수 있습니다. 흰색 선으로 srgb 범위가 끝나는 곳과 더 넓은 색 범위가 시작되는 곳이 표시됩니다.

색상을 위한 도구를 더 많이 사용할 수 있습니다. 멋진 그라데이션 개선사항도 놓치지 마세요. 새로운 웹 색상 선택 도구와 그래디언트 빌더를 사용해 볼 수 있도록 새롭게 개발된 Adam Argyle이라는 도구도 있습니다. gradient.style에서 사용해 보세요.

color-mix()

브라우저 지원

• 111
• 111
• 113
• 16.2

소스

펼쳐진 색상 공간을 펼치는 것은 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);

데모 사용해 보기

color-mix() 함수는 오랫동안 요청된 기능을 제공합니다. 이 기능은 불투명 색상 값을 유지하면서 투명도를 더하는 기능입니다. 이제 다른 불투명도에서 이러한 색상의 변형을 만들 때 브랜드 색상 변수를 사용할 수 있습니다. 이렇게 하는 방법은 색상과 투명을 혼합하는 것입니다. 브랜드 색상의 파란색과 10% 투명을 혼합하면 90% 불투명한 브랜드 색상을 얻게 됩니다. 이를 통해 색상 시스템을 빠르게 빌드할 수 있는 방법을 확인할 수 있습니다.

현재 Chrome DevTools에서 스타일 창에 있는 멋진 미리보기 벤 다이어그램 아이콘을 통해 실제 동작을 확인할 수 있습니다.

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

CSS 기초

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

중첩

브라우저 지원

• 120
• 120
• 117
• 17.2

소스

CSS 중첩은 사람들이 Sass에서 애용하고 몇 년 동안 가장 많이 요구했던 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 중첩에 관한 게시물을 참고하세요.

레이어 캐스케이드

브라우저 지원

• 99
• 99
• 97
• 15.4

소스

개발자의 또 다른 고충은 스타일이 다른 스타일보다 우선시되는 일관성을 보장한다는 것이며, 이 문제를 해결하는 과정 중 하나는 CSS 캐스케이드를 더 잘 제어할 수 있다는 점입니다.

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

Codepen에서 프로젝트를 살펴보세요.

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

범위가 지정된 CSS

브라우저 지원

• 118
• 118
• x
• 17.4

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

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

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

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

확인하기

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

삼각 함수

브라우저 지원

• 111
• 111
• 108
• 15.4

소스

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

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

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

개별 변환 속성

브라우저 지원

• 104
• 104
• 72시간
• 14.1

소스

개발자 에르고노믹스는 개별 변환 함수를 통해 계속 개선되고 있습니다. 지난번 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 커뮤니티 그룹과 협력하고 있으며 다음과 같은 3가지 솔루션을 개발했습니다.

1. 이벤트 핸들러, 선언적 DOM 구조 및 액세스 가능한 기본값을 포함하는 팝업 기능이 기본 제공됩니다.
2. 앵커 배치를 사용 설정하기 위해 두 요소를 서로 테더링하는 CSS API입니다.
3. 선택 항목 내에서 콘텐츠의 스타일을 지정하려는 경우에 사용할 수 있는 맞춤설정 가능한 드롭다운 메뉴 구성요소입니다.

팝오버

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

• 최상위 레이어를 지원하므로 z-index를 관리할 필요가 없습니다. 팝오버나 대화상자를 열면 해당 요소가 페이지 상단의 특수 레이어로 승격됩니다.
• auto 팝오버에서 무료로 라이트 닫기 동작을 사용할 수 있으므로 요소 외부를 클릭하면 팝오버가 닫히고 접근성 트리에서 삭제되고 포커스가 적절하게 관리됩니다.
• 팝오버 대상의 연결 조직과 팝오버 자체에 대한 기본 접근성입니다.

즉, 이 모든 기능을 생성하고 이러한 모든 상태를 추적하기 위해 작성해야 하는 JavaScript가 줄어듭니다.

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

<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에서 확인할 수 있습니다.

앵커 위치 지정

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

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

하지만 팝오버가 배치된 방식에 따라 표시 영역에 맞지 않으면 어떻게 될까요?

이 문제를 해결하기 위해 앵커 배치 API에는 맞춤설정할 수 있는 대체 위치가 포함되어 있습니다. 다음 예에서는 '상단-순-하단'이라는 대체 게재위치를 만듭니다. 브라우저는 먼저 도움말을 상단에 배치하려고 합니다. 도움말이 표시 영역에 맞지 않으면 브라우저에서는 하단 앵커링 요소 아래에 도움말을 배치합니다.

.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>
  <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 간 애니메이션과 같이 일반적으로 이전에는 애니메이션 처리가 불가능했던 속성입니다.

팝오버, 선택 메뉴, 심지어 대화상자나 사용자설정 구성 요소와 같은 기존 요소에 멋진 전환을 가능하게 하는 작업의 일부로, 브라우저는 이러한 애니메이션을 지원하기 위한 새로운 연결 기능을 지원하고 있습니다.

다음 팝오버 데모에서는 열림 상태에 :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도 있습니다.

스크롤 기반 애니메이션

브라우저 지원

• 115
• 115
• x

소스

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

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

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

이러한 새 API는 기존 웹 애니메이션 및 CSS Animations API와 함께 작동하므로 API의 이점을 활용할 수 있습니다. 여기에는 이러한 애니메이션이 기본 스레드를 벗어나 실행되도록 하는 기능이 포함됩니다. 예, 올바르게 읽어 보세요. 이제 단 몇 줄의 추가 코드만으로 스크롤로 구동되고 기본 스레드에서 실행되고 매끄러운 애니메이션을 만들 수 있습니다. 마음에 들지 않는 것은 무엇인가요?

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

전환 보기

브라우저 지원

• 111
• 111
• x
• x

소스

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

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

뷰 전환은 현재 Chrome 111의 단일 페이지 앱 (SPA)에서 작동합니다. 다중 페이지 앱 지원을 위해 노력하고 있습니다. 자세한 내용은 보기 전환 가이드의 전체 내용을 확인하세요.

결론

developer.chrome.com에서 바로 CSS 및 HTML과 관련된 모든 최신 기능을 확인하고 I/O 동영상에서 더 많은 웹 방문 페이지를 확인하세요.