# CSS Wrapped: 2023 - 올해 변경된 CSS 총정리

> Clean Markdown view of GeekNews topic #12585. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=12585](https://news.hada.io/topic?id=12585)
- GeekNews Markdown: [https://news.hada.io/topic/12585.md](https://news.hada.io/topic/12585.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2023-12-29T10:56:01+09:00
- Updated: 2023-12-29T10:56:01+09:00
- Original source: [developer.chrome.com](https://developer.chrome.com/blog/css-wrapped-2023?hl=en)
- Points: 21
- Comments: 0

## Topic Body

- 2023년은 CSS에 있어 엄청난 한 해였음. 웹 플랫폼에서 불가능하다고 여겨졌던 기능을 가능하게 하는 CSS 및 UI 분야의 많은 새로운 기능들이 등장  
- 모든 주요 브라우저는 컨테이너 쿼리, 서브그리드, `:has()` 선택자 등을 지원하며, 새로운 색상 공간과 함수들도 지원  
- Chrome은 CSS만으로 스크롤 기반 애니메이션과 웹 뷰 간의 부드러운 전환을 지원  
- CSS 중첩과 범위 지정 스타일과 같이 개발자 경험을 개선하는 새로운 기본 요소들이 많이 도입됨  
  
### Architectural foundations  
  
#### Trigonometric functions  
- Chrome 111은 `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()`와 같은 삼각 함수를 지원  
- 이 함수들은 애니메이션과 레이아웃 목적에 매우 유용  
  
#### Complex nth-* selection  
- `:nth-child()` 의사 클래스 선택자를 사용하면 DOM 내의 요소를 인덱스로 선택할 수 있음  
- Chrome 111부터는 `:nth-child()`와 `:nth-last-child()`에 선택자 목록을 선택적으로 전달할 수 있게 됨  
  
#### Scope  
- Chrome 118은 문서의 특정 하위 트리에 선택자 일치를 범위 지정하는 `@scope`를 지원  
- 범위 지정된 하위 트리는 _범위 지정 루트_와 선택적인 _범위 지정 한계_로 정의  
  
#### Nesting  
- 중첩을 사용하기 전에는 모든 선택자를 별도로 명시적으로 선언해야 했음.  
- 이제 관련 스타일 규칙을 그룹화하여 계속해서 선택자를 사용할 수 있음.  
  
#### Subgrid  
- CSS `subgrid`를 사용하면 더 복잡한 그리드를 만들고 자식 레이아웃 간에 더 나은 정렬을 할 수 있음  
- 내부 그리드가 외부 그리드의 행과 열을 자신의 것으로 채택할 수 있게 함  
  
### Typography  
  
#### Initial-letter  
- Chrome 110에서 시작된 `initial-letter` 속성은 초기 글자의 배치를 설정하는 작지만 강력한 CSS 기능임  
- 글자를 드롭된 상태나 올라간 상태로 배치할 수 있음  
  
#### text-wrap: balance and pretty  
- 개발자는 최종 크기, 글꼴 크기 또는 심지어 헤드라인이나 단락의 언어를 알 수 없음  
- `balance`와 `pretty`라는 두 가지 새로운 텍스트 래핑 기술이 도입됨  
  
### Color  
  
#### HD Color Spaces (Color Level 4)  
- 새로운 색상, 더 많은 색상, 새로운 색상 공간, 색상 함수 및 새로운 기능이 2023년에 도입됨  
- CSS와 색상은 이제 HDR 색상의 그라데이션을 만들고, 다른 색상 공간에서 그라데이션을 보간할 수 있음  
  
#### color-mix function  
- 색상 혼합은 고전적인 작업이며, 2023년 CSS에서도 가능해짐  
- 흰색 또는 검은색뿐만 아니라 투명도를 색상에 혼합할 수 있으며, 선택한 색상 공간에서 이를 수행할 수 있음  
  
#### Relative color syntax  
- 상대 색상 구문(RCS)은 색상 변형을 생성하기 위한 `color-mix()`의 보완적인 방법임  
- RCS는 색상의 상대적 및 절대적 조작을 수행할 수 있게 함  
  
### Responsive Design  
  
#### Size container queries  
- 뷰포트의 전역 크기 정보를 사용하는 대신, 컨테이너 쿼리는 페이지 내의 부모 요소를 쿼리하는 것을 지원함  
  
#### Style container queries  
- 스타일 쿼리는 부모 요소의 사용자 정의 속성 값을 쿼리할 수 있게 함  
  
#### :has() selector  
- 거의 20년 동안 개발자들은 CSS에서 "부모 선택자"를 요구해왔음  
- `:has()` 선택자를 사용하면 `.card:has(img.hero)`와 같이 자식으로 히어로 이미지를 가진 `.card` 요소를 선택할 수 있음  
  
#### Update media query  
- `update` 미디어 쿼리를 사용하면 장치의 리프레시 속도에 맞게 UI를 조정할 수 있음  
  
#### Scripting media query  
- 스크립팅 미디어 쿼리는 JavaScript가 사용 가능한지 여부를 확인하는 데 사용할 수 있음  
  
#### Reduced-transparency media query  
- 비투명 인터페이스는 다양한 유형의 시각 장애에 대해 두통을 유발하거나 시각적으로 어려울 수 있음  
- 이 미디어 쿼리는 사용자가 UI에서 투명도를 줄이거나 제거할 수 있는 시스템 환경 설정을 가지고 있음을 나타냄  
  
### Interaction  
  
#### View transitions  
- 페이지의 사용자 경험에 큰 영향을 미치는 뷰 전환  
- 뷰 전환 API를 사용하면 단일 페이지 애플리케이션의 두 페이지 상태 간의 시각적 전환을 만들 수 있음  
  
#### Linear-easing function  
- `linear()` 함수는 복잡한 이징 함수를 간단하게 만들 수 있게 해주며, 정밀도를 약간 잃는 대신 사용할 수 있음  
  
#### Scroll End  
- `scrollend` 이벤트는 사용자가 여전히 제스처 중인지 여부를 이해하는 완벽한 타이밍의 스크롤 종료 이벤트를 제공함  
  
#### Scroll-driven animations  
- 스크롤 기반 애니메이션은 스크롤러의 스크롤 오프셋에 기존 CSS 애니메이션 또는 웹 애니메이션 API로 만든 애니메이션을 연결할 수 있게 해줌  
  
#### Deferred timeline attachment  
- CSS를 통해 스크롤 기반 애니메이션을 적용할 때, 제어하는 스크롤러를 찾는 메커니즘은 항상 DOM 트리를 거슬러 올라가기 때문에 스크롤 조상에만 제한됨  
  
#### Discrete property animations  
- 이산 애니메이션, 예를 들어 `display: none`으로부터 애니메이션을 수행하는 능력이 2023년에 새로운 기능으로 추가됨  
  
#### @starting-style  
- `@starting-style` CSS 규칙은 `display: none`으로부터 애니메이션을 수행하는 새로운 웹 기능을 기반으로 함  
  
#### Overlay  
- 새로운 CSS `overlay` 속성은 `popover` 및 `dialog`와 같은 최상위 스타일 요소가 부드럽게 최상위에서 애니메이션되어 나오도록 함  
  
### Components  
  
#### Popover  
- Popover API는 페이지의 나머지 부분 위에 놓이는 요소를 만드는 데 도움을 줌  
  
#### Horizontal rules in select  
- Chrome과 Safari는 올해 `` 요소 내에 수평 규칙 요소(`` 태그)를 추가할 수 있는 기능을 지원함  
  
#### :user-valid and invalid pseudo classes  
- `:user-valid` 및 `:user-invalid`는 `:valid` 및 `:invalid` 의사 클래스와 유사하게 작동하지만, 사용자가 입력과 상당히 상호 작용한 후에만 폼 컨트롤과 일치함  
  
#### Exclusive accordion  
- Chrome 120에서는 `` 요소에 `name` 속성을 지원함  
- 이 속성을 사용하면 동일한 `name` 값을 가진 여러 `` 요소가 의미론적 그룹을 형성함

## Comments



_No public comments on this page._