CSS 래핑: 2023년
콘텐츠로 이동:
와우! 2023년은 CSS에게 큰 한 해였습니다.
#Interop2023부터 CSS 및 UI 공간에 새롭게 추가된 여러 기능에 이르기까지 개발자가 한때 웹 플랫폼에서 불가능하다고 생각했던 기능들을 지원합니다. 이제 모든 최신 브라우저에서 컨테이너 쿼리, 서브 그리드, :has() 선택기, 수많은 새로운 색상 공간 및 함수를 지원합니다. Chrome에서는 CSS 전용 스크롤 기반 애니메이션과 뷰 전환을 통한 웹 뷰 간 매끄러운 애니메이션을 지원합니다. 무엇보다도 CSS 중첩 및 범위 지정 스타일과 같은 더 나은 개발자 환경을 제공하는 새로운 프리미티브가 많이 출시되었습니다.
다사다난했던 한 해였습니다. 그리고 이 모든 것을 가능하게 해준 브라우저 개발자와 웹 커뮤니티의 모든 노고를 축하하고 감사의 마음을 전하는 의미 있는 한 해를 마무리하고자 합니다.
건축 기반
먼저 핵심 CSS 언어 및 기능의 업데이트부터 살펴보겠습니다. 이러한 지형지물은 스타일을 작성하고 정리하는 방법의 기초가 되며 개발자의 손에 큰 힘을 불어넣습니다.
삼각 함수
Chrome 111에서는 삼각 함수 sin(), cos(), tan(), asin(), acos(), atan(), atan2()에 관한 지원이 추가되어 모든 주요 엔진에서 사용할 수 있습니다. 이러한 함수는 애니메이션 및 레이아웃 용도로 매우 유용합니다. 예를 들어 이제 선택한 중심 주변의 원에 요소를 배치하는 것이 훨씬 쉬워졌습니다.
CSS의 삼각 함수에 대해 자세히 알아보세요.
복소수 n-* 선택
브라우저 지원
- 111
- 111
- 113
- 9
:nth-child() 의사 클래스 선택기를 사용하면 색인으로 DOM의 요소를 선택할 수 있습니다. An+B 마이크로 구문을 사용하면 선택하려는 요소를 세밀하게 제어할 수 있습니다.
기본적으로 :nth-*() 의사는 모든 하위 요소를 고려합니다. Chrome 111부터 원하는 경우 선택기 목록을 :nth-child() 및 :nth-last-child()에 전달할 수 있습니다. 이렇게 하면 An+B가 처리되기 전에 하위 요소 목록을 사전 필터링할 수 있습니다.
다음 데모에서 3n+1 로직은 of .small를 사용하여 인형을 사전 필터링하는 방식으로 작은 인형에만 적용됩니다. 드롭다운을 사용하여 사용된 선택기를 동적으로 변경하세요.
복잡한 n번째* 선택 항목에 대해 자세히 알아보세요.
범위
브라우저 지원
- 118
- 118
- x
- 17.4
Chrome 118에서는 문서의 특정 하위 트리와 일치하는 선택기의 범위를 지정할 수 있는 at 규칙인 @scope 지원이 추가되었습니다. 범위 지정 스타일 지정을 사용하면 지나치게 구체적인 선택기를 작성하거나 DOM 구조에 밀접하게 결합하지 않고도 선택하는 요소를 매우 구체적으로 지정할 수 있습니다.
범위가 지정된 하위 트리는 범위 지정 루트 (상한값) 및 선택적 범위 지정 한도 (하한값)로 정의됩니다.
@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/
범위 블록 내에 배치된 스타일 규칙은 잘라낸 하위 트리 내의 요소만 타겟팅합니다. 예를 들어 다음 범위가 지정된 스타일 규칙은 .card 요소와 [data-component] 선택기와 일치하는 중첩된 구성요소 사이에 있는 <img> 요소만 타겟팅합니다.
@scope (.card) to ([data-component]) {
img { … }
}
다음 데모에서 캐러셀 구성요소의 <img> 요소는 적용된 범위 지정 한도로 인해 일치하지 않습니다.
범위 데모 스크린샷
범위 라이브 데모
@scope 데모@scope에 대한 자세한 내용은 '@scope를 사용하여 선택기의 도달범위를 제한하는 방법' 도움말을 참고하세요. 이 도움말에서는 :scope 선택기, 특정성이 처리되는 방식, 프리루드 없는 범위, 캐스케이드에 @scope가 미치는 영향을 알아봅니다.
수집
중첩하기 전에 모든 선택기를 명시적으로 선언해야 했습니다. 이로 인해 반복이 발생하고, 스타일시트가 일괄 처리되며, 작성 환경이 분산됩니다. 이제 관련 스타일 규칙을 그룹화하여 선택기를 계속할 수 있습니다.
dl {
/* dt styles */
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
/* same as */
dt {
/* dt styles */
}
dl dt {
/* dl dt styles */
}
dl dd {
/* dl dd styles */
}
수습 기간 스크린캐스트
라이브 데모 중첩
중첩은 스타일시트의 무게를 줄이고 선택기 반복으로 인한 오버헤드를 줄이고 구성요소 스타일을 중앙화할 수 있습니다. 이 문법은 처음에는 다양한 위치에서 &를 사용해야 한다는 제한과 함께 출시되었지만 이후 중첩 완화된 문법 업데이트를 통해 삭제되었습니다.
중첩에 대해 자세히 알아보세요.
서브그리드
CSS subgrid를 사용하면 하위 레이아웃 간에 더 잘 정렬되도록 더 복잡한 그리드를 만들 수 있습니다. 이를 사용하면 다른 그리드 내에 있는 그리드가 subgrid를 그리드 행 또는 열의 값으로 사용하여 외부 그리드의 행과 열을 자체 채택할 수 있습니다.
Subgrid 스크린캐스트
Subgrid 라이브 데모
서브 그리드는 동위 요소를 서로의 동적 콘텐츠에 정렬하는 데 특히 유용합니다. 따라서 카피라이터, UX 작성자, 번역사는 레이아웃에 '맞는' 프로젝트 문구를 만들려고 하지 않아도 됩니다. 하위 그리드를 사용하면 콘텐츠에 맞게 레이아웃을 조정할 수 있습니다.
서브그리드에 대해 자세히 알아보기
서체
2023년 웹 서체에 몇 가지 주요 업데이트가 적용되었습니다. 특히 좋은 점진적 개선으로는 text-wrap 속성이 있습니다. 이 속성은 추가 스크립팅 없이 브라우저에서 작성되는 서체 레이아웃을 조정할 수 있도록 합니다. 이제 어색한 행 길이가 줄어들고 보다 예측 가능한 서체를 사용할 수 있습니다.
이니셜
연초 Chrome 110에 도입된 initial-letter 속성은 작지만 강력한 CSS 기능으로, 첫 글자를 배치할 때 스타일을 설정합니다. 문자를 떨어뜨리거나 튀긴 상태로 배치할 수 있습니다. 이 속성은 두 개의 인수를 허용합니다. 첫 번째 인수는 문자를 해당 단락에 얼마나 깊이 배치할지에 관한 인수이고, 두 번째 인수는 해당 단락 위에 문자를 얼마나 많이 올리는지를 나타냅니다. 다음 데모에서와 같이 둘을 조합하여 수행할 수도 있습니다.
첫 글자 스크린샷
첫 글자 데모
::first-letter 유사 요소의 initial-letter 값을 변경하여 이동을 확인합니다.initial-letter에 대해 자세히 알아보세요.
text-wrap: 균형과 예쁘게
개발자는 헤드라인이나 단락의 최종 크기나 글꼴 크기는 물론 언어까지도 알 수 없습니다. 텍스트 줄바꿈을 효과적이고 미학적으로 처리하는 데 필요한 모든 변수는 브라우저에 있습니다. 브라우저는 글꼴 크기, 언어, 할당된 영역과 같은 모든 요소를 알기 때문에 고급 및 고품질 텍스트 레이아웃을 처리하는 데 적합합니다.
이때 두 가지 새로운 텍스트 래핑 기술이 사용됩니다. 하나는 balance이고 다른 하나는 pretty입니다. balance 값은 조화로운 텍스트 블록을 만들고 pretty는 분리된 항목을 방지하고 건강한 하이픈 연결을 보장합니다. 이 두 작업은 전통적으로 수작업으로 이루어졌으며, 브라우저에 맡기고 모든 번역 언어에서 작동하도록 하는 것은 놀라운 일입니다.
텍스트 줄바꿈 스크린캐스트
텍스트 줄바꿈 라이브 데모
balance 및 pretty의 효과를 비교할 수 있습니다. 데모를 다른 언어로 번역해 보세요.text-wrap: balance에 대해 자세히 알아보세요.
색상
2023년은 웹 플랫폼에 컬러가 등장한 해였습니다. 동적 색상 테마 설정을 지원하는 새로운 색상 공간과 기능을 사용하여 사용자에게 필요한 생생하고 무성한 테마를 만들고 맞춤설정도 할 수 있습니다.
HD 색상 공간 (색상 수준 4)
하드웨어에서 소프트웨어, CSS, 깜박이는 표시등에 이르기까지 컴퓨터가 사람의 눈으로 볼 수 있는 수준의 색상을 표현하기 위해서는 많은 작업이 필요할 수 있습니다. 2023년에는 새로운 색상, 더 많은 색상, 새로운 색상 공간, 색상 함수와 새로운 기능을 선보입니다.
이제 CSS와 색상이 다음과 같은 작업을 할 수 있습니다.
- 사용자 화면 하드웨어가 넓은 색 영역 HDR 색상을 지원할 수 있는지 확인합니다.
- 사용자의 브라우저가 Oklch 또는 Display P3과 같은 색상 구문을 이해하는지 확인합니다.
- Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ 등에서 HDR 색상을 지정할 수 있습니다.
- HDR 색상으로 그래디언트를 만들 수 있습니다.
- 대체 색상 공간에서 그래디언트를 보간할 수 있습니다.
- color-mix()와 색상을 혼합합니다.
- 상대 색상 문법으로 색상 변형을 만듭니다.
색상 4 스크린캐스트
색상 4 데모
색상 4 및 색상 공간에 대해 자세히 알아보기
색상 믹스 함수
색상을 혼합하는 것은 전형적인 작업이며 2023년에는 CSS도 할 수 있게 되었습니다. 색상에 흰색이나 검은색뿐만 아니라 투명도도 혼합할 수 있으며, 이 모든 작업을 원하는 색상 공간에서 수행할 수 있습니다. 이는 기본 색상 기능이자 고급 색상 기능입니다.
color-mix() 스크린캐스트
color-mix() 데모
color-mix()를 그라데이션의 시간 순간이라고 생각하면 됩니다. 그라데이션은 파란색에서 흰색으로 전환하는 데 필요한 모든 단계를 표시하는 반면 color-mix()는 한 단계만 표시합니다. 색 공간을 고려하고 혼합된 색 공간이 결과에 얼마나 다른지 학습하기 시작하면 상황이 발전합니다.
color-mix()에 대해 자세히 알아보세요.
상대 색상 구문
상대 색상 문법 (RCS)은 색상 변형을 만드는 color-mix()를 보완하는 메서드입니다. color-mix()보다 약간 강력하지만 색상을 사용하기 위한 다른 전략이기도 합니다. color-mix()는 흰색을 혼합하여 색상을 밝게 할 수 있습니다. 여기서 RCS는 밝기 채널에 정밀하게 액세스하고 채널에서 calc()를 사용하여 프로그래매틱 방식으로 밝기를 줄이거나 높이는 기능을 제공합니다.
RCS 스크린캐스트
RCS 라이브 데모
RCS를 사용하면 색상을 상대 및 절대적으로 조작할 수 있습니다. 상대적 변경은 채도 또는 밝기의 현재 값을 가져와 calc()로 수정합니다. 절대 변경은 채널 값을 완전히 새로운 값으로 바꾸는 것입니다(예: 불투명도를 50%로 설정). 이 문법은 시간 변형에 맞추어 테마 설정을 위한 의미 있는 도구를 제공합니다.
상대적 색상 구문에 대해 자세히 알아보세요.
반응형 디자인
반응형 디자인은 2023년에 변경되었습니다. 이 획기적인 한 해는 반응형 웹 환경을 빌드하는 방식을 완전히 바꾸는 새로운 기능을 가능하게 했으며, 구성요소 기반 반응형 디자인의 새로운 모델을 촉발했습니다. 컨테이너 쿼리와 :has()의 조합은 상위 요소의 크기와 하위 요소의 존재 여부 또는 상태에 따라 반응형 및 논리적 스타일을 소유하는 구성요소를 지원합니다. 즉, 최종적으로 페이지 수준 레이아웃을 구성요소 수준 레이아웃에서 분리하고 로직을 한 번만 작성하여 모든 위치에서 구성요소를 사용할 수 있습니다.
컨테이너 쿼리 크기 조정
컨테이너 쿼리는 표시 영역의 전체 크기 정보를 사용하여 CSS 스타일을 적용하는 대신 페이지 내에서 상위 요소의 쿼리를 지원합니다. 즉, 여러 레이아웃과 뷰에서 구성요소의 스타일을 동적으로 지정할 수 있습니다. 올해 밸런타인데이 (2월 14일)에는 모든 최신 브라우저에서 크기에 대한 컨테이너 쿼리가 안정화되었습니다.
이 기능을 사용하려면 먼저 쿼리하는 요소에 포함을 설정한 다음 미디어 쿼리와 마찬가지로 크기 매개변수와 함께 @container를 사용하여 스타일을 적용합니다. 컨테이너 쿼리와 함께 컨테이너 쿼리 크기를 가져옵니다. 다음 데모에서는 컨테이너 쿼리 크기 cqi (인라인 컨테이너의 크기를 나타냄)가 카드 헤더의 크기를 지정하는 데 사용됩니다.
@container 스크린캐스트
@container 데모
컨테이너 쿼리 사용에 대해 자세히 알아보세요.
컨테이너 쿼리 스타일 지정
Chrome 111에서 스타일 쿼리가 부분적으로 구현되었습니다. 현재 스타일 쿼리를 사용하면 @container style() 사용 시 상위 요소의 맞춤 속성 값을 쿼리할 수 있습니다. 예를 들어 맞춤 속성 값이 있는지 또는 @container style(--rain: true)와 같은 특정 값으로 설정되어 있는지 쿼리합니다.
스타일 쿼리 스크린샷
스타일 쿼리 데모
CSS에서 클래스 이름을 사용하는 것과 비슷해 보이지만, 스타일 쿼리에는 몇 가지 장점이 있습니다. 첫 번째는 스타일 쿼리를 사용하면 유사 상태에 따라 CSS에서 값을 업데이트할 수 있다는 점입니다. 또한 구현의 향후 버전에서는 값 범위를 쿼리하여 적용된 스타일(예: style(60 <= --weather <= 70))과 속성-값 쌍(예: style(font-style: italic))에 기반한 스타일을 결정할 수 있습니다.
스타일 쿼리 사용에 대해 자세히 알아보기
:has() 선택기
거의 20년 동안 개발자들은 CSS에서 '상위 선택기'를 요청했습니다. 이제 Chrome 105에 제공된 :has() 선택기를 사용할 수 있습니다. 예를 들어 .card:has(img.hero)를 사용하면 하위 요소로 히어로 이미지가 있는 .card 요소가 선택됩니다.
:has() 데모 스크린샷
:has() 라이브 데모
:has() 데모: 이미지가 없는 카드와 이미지가 있는 카드:has()는 상대 선택기 목록을 인수로 허용하므로 상위 요소보다 훨씬 더 많은 항목을 선택할 수 있습니다. 다양한 CSS 컴비네이터를 사용하면 DOM 트리 위로 이동할 뿐만 아니라 가로 방향으로도 선택할 수 있습니다. 예를 들어 li:has(+ li:hover)는 현재 마우스 오버된 <li> 요소 앞에 있는 <li> 요소를 선택합니다.
:has() 스크린캐스트
:has() 데모
:has() 데모: 도크CSS :has() 선택자 자세히 알아보기
미디어 쿼리 업데이트
update 미디어 쿼리를 사용하면 기기의 새로고침 빈도에 맞게 UI를 조정할 수 있습니다. 이 기능은 다양한 기기의 기능과 관련된 fast, slow 또는 none 값을 보고할 수 있습니다.
디자인에 사용되는 대부분의 기기는 화면 재생 빈도가 빠를 가능성이 높습니다. 여기에는 데스크톱과 대부분의 휴대기기가 포함됩니다. 저전력 결제 시스템과 같은 e리더 및 기기에서는 화면 재생 빈도가 느릴 수 있습니다. 기기에서 애니메이션이나 잦은 업데이트를 처리할 수 없다는 것을 알면 배터리 사용량을 줄이거나 잘못된 뷰 업데이트를 받을 수 있습니다.
스크린캐스트 업데이트
데모 업데이트
@media (업데이트)에 대해 자세히 알아보세요.
미디어 쿼리 스크립팅
스크립팅 미디어 쿼리를 사용하여 JavaScript를 사용할 수 있는지 여부를 확인할 수 있습니다. 이는 점진적인 개선에 매우 좋습니다. 이 미디어 쿼리 이전에는 자바스크립트를 사용할 수 있는지 감지하는 전략으로 HTML에 nojs 클래스를 배치하고 자바스크립트로 이를 삭제했습니다. 이제 CSS에서 자바스크립트를 감지하고 그에 따라 조정할 방법을 제공하므로 이러한 스크립트는 삭제할 수 있습니다.
여기에서 Chrome DevTools를 통해 테스트할 페이지에서 자바스크립트를 사용 및 사용 중지하는 방법을 알아보세요.
스크립팅 스크린캐스트
스크립트 데모
웹사이트의 테마 전환을 고려해 보세요. 스크립팅 미디어 쿼리는 JavaScript를 사용할 수 없으므로 시스템 환경설정에서 전환되도록 하는 데 도움이 될 수 있습니다. 또는 스위치 구성요소를 고려해 보세요. JavaScript를 사용할 수 있는 경우 스위치를 켜고 끄는 대신 동작으로 스위치를 스와이프할 수 있습니다. 스크립팅을 사용할 수 있는 경우 UX를 업그레이드할 좋은 기회가 많으며, 스크립팅이 사용 중지된 경우에도 의미 있는 기반 환경을 제공할 수 있습니다.
스크립트에 대해 자세히 알아보세요.
투명성 저하 미디어 쿼리
불투명하지 않은 인터페이스는 다양한 유형의 시각 장애로 인해 두통을 일으키거나 시각적 문제를 일으킬 수 있습니다. 이러한 이유로 Windows, macOS, iOS에는 UI에서 투명도를 줄이거나 제거할 수 있는 시스템 환경설정이 있습니다. prefers-reduced-transparency에 대한 이러한 미디어 쿼리는 다른 환경설정 미디어 쿼리와 잘 맞습니다. 따라서 창의성을 발휘하면서 사용자에 맞게 조정할 수 있습니다.
투명도 스크린캐스트 감소
투명성 강화 데모
경우에 따라 다른 콘텐츠에 오버레이되는 콘텐츠가 없는 대체 레이아웃을 제공할 수 있습니다. 다른 경우에는 색상의 불투명도를 불투명하거나 거의 불투명하게 조정할 수 있습니다. 다음 블로그 게시물에는 사용자 선호도에 맞게 조정되는 감동적인 데모가 있습니다. 이 미디어 쿼리가 중요한 때가 궁금하다면 데모를 살펴보세요.
@media (prefers-reduced-transparency)에 대해 자세히 알아보세요.
상호작용
상호작용은 디지털 경험의 초석입니다. 이를 통해 사용자는 가상 공간에서 자신이 클릭한 항목과 자신의 위치에 대한 피드백을 받을 수 있습니다. 올해 많은 흥미로운 기능이 도입되어 상호작용을 더 쉽게 구성하고 구현할 수 있게 되었으며, 이를 통해 원활한 사용자 여정과 보다 정교한 웹 환경을 지원할 수 있게 되었습니다.
전환 보기
뷰 전환은 페이지의 사용자 환경에 큰 영향을 미칩니다. View Transitions API를 사용하면 단일 페이지 애플리케이션의 두 페이지 상태 간에 시각적 전환을 만들 수 있습니다. 전체 페이지 전환일 수도 있고 목록에 새 항목 추가 또는 삭제와 같이 페이지에서 더 작은 전환이 이루어질 수도 있습니다.
View Transitions API의 핵심에는 document.startViewTranstion 함수가 있습니다. DOM을 새 상태로 업데이트하는 함수를 전달하면 API가 모든 작업을 처리해 줍니다. 이 작업은 전후 스냅샷을 촬영하고 둘 사이를 전환하여 수행합니다. CSS를 사용하면 캡처할 항목을 제어하고 스냅샷에 애니메이션 효과를 적용할 방법을 선택적으로 맞춤설정할 수 있습니다.
VT 스크린캐스트
VT 데모
단일 페이지 애플리케이션용 View Transitions API가 Chrome 111에 도입되었습니다. 뷰 전환에 관해 자세히 알아보세요.
선형 이징 함수
브라우저 지원
- 113
- 113
- 112
- 17.2
이 함수의 이름 때문에 속지 마세요. linear() 함수 (linear 키워드와 혼동해서는 안 됨)를 사용하면 정밀도가 다소 떨어지는 대신 복잡한 이징 함수를 간단하게 만들 수 있습니다.
Chrome 113에서 출시된 linear() 이전에는 CSS에서 바운스 또는 스프링 효과를 만들 수 없었습니다. linear()덕분에 일련의 점으로 단순화한 후 점 사이에 선형 보간하여 이징을 근사치화할 수 있습니다.
linear() 함수는 이러한 점을 사용하고 선형으로 보간합니다.선형 이징 스크린캐스트
선형 이징 데모
linear() 데모스크롤 종료
많은 인터페이스에 스크롤 상호작용이 포함되어 있으며, 인터페이스에서 현재 스크롤 위치와 관련된 정보를 동기화하거나 현재 상태를 기반으로 데이터를 가져와야 하는 경우도 있습니다. scrollend 이벤트 이전에는 사용자의 손가락이 화면에 계속 표시되어 있을 때 실행될 수 있는 부정확한 시간 제한 메서드를 사용해야 했습니다. scrollend 이벤트를 사용하면 사용자가 여전히 동작 중에 있는지 파악할 수 있는 완벽한 시간이 지정된 스크롤엔드 이벤트를 사용할 수 있습니다.
스크롤엔드 스크린캐스트
스크롤 엔드 데모
스크롤하는 동안 자바스크립트가 화면에 손가락이 있는지 추적할 수 없고 정보를 사용할 수 없기 때문에 이는 브라우저가 소유하는 데 중요했습니다. 이제 부정확한 스크롤 끝 시도 코드의 덩어리를 삭제하고 브라우저 소유의 높은 정밀도 이벤트로 대체할 수 있습니다.
scrollend에 대해 자세히 알아보세요.
스크롤 기반 애니메이션
스크롤 기반 애니메이션은 Chrome 115부터 제공되는 흥미로운 기능입니다. 이를 통해 기존 CSS 애니메이션 또는 Web Animations API로 빌드된 애니메이션을 가져와 스크롤러의 스크롤 오프셋에 연결할 수 있습니다. 가로 스크롤러에서 위아래로 스크롤하거나 좌우로 스크롤하면 연결된 애니메이션이 바로 반응하여 앞뒤로 스크러빙합니다.
ScrollTimeline을 사용하면 다음 데모와 같이 스크롤러의 전반적인 진행 상황을 추적할 수 있습니다. 페이지의 끝까지 스크롤하면 텍스트가 문자 단위로 표시됩니다.
SDA 스크린캐스트
SDA 데모
ViewTimeline을 사용하면 스크롤 포트를 가로지르는 요소를 추적할 수 있습니다. 이는 IntersectionObserver가 요소를 추적하는 방법과 유사하게 작동합니다. 다음 데모에서 각 이미지는 스크롤 포트에 들어오는 순간부터 중앙에 위치할 때까지 표시됩니다.
SDA 데모 스크린캐스트
SDA 라이브 데모
스크롤 기반 애니메이션은 CSS 애니메이션 및 Web Animations API와 함께 작동하므로 이러한 API의 모든 이점을 활용할 수 있습니다. 여기에는 이러한 애니메이션이 기본 스레드를 벗어나 실행되도록 하는 기능이 포함됩니다. 이제 몇 줄의 추가 코드만으로 기본 스레드에서 실행되는 스크롤로 구동되는 매끄러운 애니메이션을 만들 수 있습니다. 어떤 점이 마음에 들지 않을까요?
스크롤 기반 애니메이션에 대해 자세히 알아보려면 자세한 내용은 이 도움말을 참고하거나 여러 데모가 포함된 scroll-driven-animations.style을 참고하세요.
지연된 타임라인 연결
CSS를 통해 스크롤 기반 애니메이션을 적용할 때 제어 스크롤러를 찾는 조회 메커니즘은 항상 DOM 트리를 탐색하여 상위 요소만 스크롤하도록 제한합니다. 그러나 애니메이션 적용되어야 하는 요소는 스크롤러의 하위 요소가 아니라 완전히 다른 하위 트리에 있는 요소인 경우가 많습니다.
애니메이션 요소가 비상위 요소의 명명된 스크롤 타임라인을 찾을 수 있도록 하려면 공유된 상위 요소의 timeline-scope 속성을 사용합니다. 이렇게 하면 이 이름을 가진 정의된 scroll-timeline 또는 view-timeline를 연결할 수 있어 범위가 더 넓어집니다. 이렇게 하면 공유된 상위 요소의 모든 하위 요소가 해당 이름의 타임라인을 사용할 수 있습니다.
timeline-scope가 선언되면 스크롤러에 선언된 scroll-timeline는 이를 animation-timeline로 사용하는 요소에서 찾을 수 있습니다.데모 스크린캐스트
실시간 데모
timeline-scope를 자세히 알아보세요.
개별 속성 애니메이션
2023년의 또 다른 새로운 기능으로는 불연속 애니메이션에 애니메이션을 적용할 수 있습니다(예: display: none를 오가는 애니메이션). Chrome 116부터 키프레임 규칙에 display 및 content-visibility를 사용할 수 있습니다. 또한 개별 속성을 0% 지점이 아닌 50% 지점으로 전환할 수도 있습니다. allow-discrete 키워드를 사용하는 transition-behavior 속성을 사용하거나 transition 속성에서 약식 방식으로 이 작업을 실행합니다.
불연속 애님. 스크린캐스트
불연속 애님. 데모
불연속 애니메이션 전환에 대해 자세히 알아보세요.
@starting-style
@starting-style CSS 규칙은 display: none에서 애니메이션 효과를 주고받는 새로운 웹 기능을 기반으로 합니다. 이 규칙은 요소가 페이지에서 열리기 전에 브라우저가 조회할 수 있는 '열기-이전' 스타일을 지정하는 방법을 제공합니다. 이는 항목 애니메이션과 팝오버 또는 대화상자 같은 요소의 애니메이션에 매우 유용합니다. 또한 요소를 만들고 애니메이션 기능을 부여하고자 할 때 유용합니다. 다음 예는 popover 속성 (다음 섹션 참고)을 표시 영역 밖에서 부드럽게 상단 레이어로 애니메이션 처리합니다.
@starting-style 스크린캐스트
@starting-style 데모
@starting-style 및 기타 항목 애니메이션에 대해 자세히 알아보세요.
오버레이
새 CSS overlay 속성을 전환에 추가하여 popover 및 dialog와 같은 최상위 레이어 스타일의 요소가 상단 레이어에서 부드럽게 바깥으로 애니메이션되도록 할 수 있습니다. 전환 오버레이를 사용하지 않으면 요소가 즉시 잘리거나 변형되거나 덮여 덮이는 상태로 되돌아가 전환이 발생하는 것을 볼 수 없습니다. 마찬가지로 overlay를 사용하면 ::backdrop가 최상위 레이어 요소에 추가될 때 부드럽게 애니메이션 처리됩니다.
오버레이 스크린캐스트
라이브 데모 오버레이
오버레이 및 기타 이탈 애니메이션에 대해 자세히 알아보기
구성요소
2023년은 스타일과 HTML 구성요소가 교차하는 중요한 한 해였습니다. popover 랜딩이 이어졌고, 앵커 위치 지정과 드롭다운 스타일 지정의 미래와 관련해 많은 작업이 진행되었습니다. 이러한 구성요소를 사용하면 매번 추가 라이브러리에 의존하거나 자체 상태 관리 시스템을 처음부터 빌드할 필요 없이 공통 UI 패턴을 더 쉽게 빌드할 수 있습니다.
팝오버
Popover API를 사용하면 페이지의 나머지 위에 배치되는 요소를 빌드할 수 있습니다. 메뉴, 선택 항목, 도움말 등이 여기에 포함될 수 있습니다. 팝업되는 요소에 popover 속성과 id를 추가하고 popovertarget="my-popover"를 사용하여 id 속성을 호출 버튼에 연결하여 간단한 팝오버를 만들 수 있습니다. Popover API는 다음을 지원합니다.
- 최상위 레이어로 승격됩니다. 팝오버는 페이지의 나머지 부분 위에 있는 별도의 레이어에 표시되므로 Z-색인을 수정하지 않아도 됩니다.
- 표시등 해제 기능. 팝오버 영역 외부를 클릭하면 팝오버가 닫히고 포커스가 다시 돌아옵니다.
- 기본 포커스 관리. 팝오버를 열면 다음 탭이 팝오버 내에서 중지됩니다.
- 액세스 가능한 키보드 바인딩.
esc키를 누르거나 두 번 전환하면 팝오버가 닫히고 포커스가 반환됩니다. - 액세스 가능한 구성요소 결합. 팝오버 요소를 의미론적으로 팝오버 트리거에 연결합니다.
팝오버 스크린캐스트
팝오버 라이브 데모
일부 가로 규칙
올해 Chrome 및 Safari에서 도입된 또 다른 HTML 변경사항은 <select> 요소에 가로 규칙 요소 (<hr> 태그)를 추가하여 콘텐츠를 시각적으로 분할하는 기능입니다. 이전에는 <hr> 태그를 select에 배치해도 렌더링되지 않았습니다. 하지만 올해에는 Safari와 Chrome에서 모두 이 기능을 지원하므로 <select> 요소 내에서 콘텐츠를 더 잘 구분할 수 있습니다.
스크린샷 선택
라이브 데모 선택
선택한 시간에서 시간 사용에 대해 자세히 알아보기
:user-valid 및 잘못된 유사 클래스
올해 모든 브라우저에서 안정화된 :user-valid 및 :user-invalid는 :valid 및 :invalid 의사 클래스와 유사하게 작동하지만 사용자가 입력과 크게 상호작용한 후에만 양식 컨트롤과 일치합니다. 필수이고 비어 있는 양식 컨트롤은 사용자가 페이지와 상호작용을 시작하지 않은 경우에도 :invalid과 일치합니다. 사용자가 입력을 변경하고 잘못된 상태로 둘 때까지 동일한 컨트롤이 :user-invalid와 일치하지 않습니다.
이러한 새 선택기를 사용하면 사용자가 변경한 입력을 추적하기 위해 더 이상 스테이트풀(Stateful) 코드를 작성할 필요가 없습니다.
:user-* 스크린캐스트
:user-* 라이브 데모
user-* 양식 유효성 검사 유사 요소 사용에 대해 자세히 알아보기
전용 아코디언
브라우저 지원
- 120
- 120
- x
- 17.2
웹의 일반적인 UI 패턴은 아코디언 구성요소입니다. 이 패턴을 구현하려면 <details> 요소 몇 개를 결합합니다. 종종 시각적으로 그룹화되어 서로 속해 있음을 나타냅니다.
Chrome 120의 새로운 기능에서 <details> 요소의 name 속성을 지원합니다. 이 속성을 사용하면 name 값이 동일한 여러 <details> 요소가 시맨틱 그룹을 형성합니다. 그룹에 있는 요소는 한 번에 하나만 열 수 있습니다. 그룹에서 <details> 요소 중 하나를 열면 이전에 열었던 요소가 자동으로 닫힙니다. 이러한 유형의 아코디언을 독점 아코디언이라고 합니다.
배타적인 아코디언의 일부인 <details> 요소는 반드시 동위 요소일 필요는 없습니다. 문서 전체에 분산될 수 있습니다.
CSS는 지난 몇 년, 특히 2023년에 이러한 르네상스를 경험했습니다. CSS를 처음 사용하거나 기본사항을 다시 보고 싶다면 무료 CSS 알아보기 과정과 web.dev에서 제공되는 다른 무료 과정을 확인하세요.
즐거운 연말연시 보내시고 멋지고 새로운 CSS 및 UI 기능을 조만간 귀하의 업무에 통합할 기회를 얻으시기 바랍니다.
⇾ Chrome UI 개발자팀,
