google I/O에서 발표한 2022년 추가된 css의 짜릿한 새로운 기능!

google I/O라는 것이 있다. 말 그래도 구글에서 개최하는 것으로 매년 개최되는 개발자 컨퍼런스와 같은 것이다. 나는 직접 듣지는 않고, 이제 실시간으로 들으신 고수분들께서 정리해 놓으신 것을 확인하며 냠냠 먹는 편인데, 이번에 CSS가 좋은 기능을 많이 탑재하는 것 같다

개인적으로 FE는 CSS를 아예 배제하고 살아가는 분야는 아니라고 생각하여 CSS의 동향같은 부분은 파악하려고 하는 편이다.

그런데 이제 다 정리하려고 하니 너무 많은 부분들이 있어서 흥미롭게 본 주요 기능들의 요약과 관련 정보 URL을 첨부해두려고 한다. 체크해 둔 부분을 더 자세하게 알고 싶으면 하단 URL에서 확인하면 된다

• color-mix() : 색상 혼합하기 기능. 괄호 안의 컬러들을 서로 조합시켜주며, % 조절도 가능하다.
• accent-color : 기본 컴포넌트 컬러 변경. 체크박스나 라디오 버튼 등의 컬러를 더이상 커스터마이징으로 하나하나 바꾸지 않아도 된다!
• color-contrast() : 대조되는 색상 찾기. 괄호 안에 있는 색의 대조되는 컬러를 찾아 값으로 지정해준다. 더불어 배경색 vs 대조색1, 대조색2, 대조색3과 같은 식으로 적으면 대조색 1/2/3중에 가장 대비가 큰 색을 선택하여준다.
• inert : 클릭, 포커스 등 상호작용이 필요한 기능의 수신을 멈추게 한다. 모달이나 알림창 등을 띄웠을 때, 유용하게 쓰일 수 있을 것 같다.
• :has() : 부모요소:has(태그)로 작성 시, 자식 요소에 괄호 안에 있는 태그가 있다면 부모요소의 스타일을 변경할 수 있다.
• viewport units :  lvh(가장 큰 높이 사이즈), svh(가장 작은 높이 사이즈), dvh(동적 높이 사이즈)
• @nest : sass에서 가능한 기능을 이제 css에서도 가능하게 하나보다!
• @scope(태그) : 파일의 scope 처럼 특정 태그 내부에만 스타일을 한정시킬 수 있다.
• @container : 부모 요소의 넓이에 대한 반응형이 가능해졌다.
• custom-media : 미디어 쿼리 변수를 만들어 재사용 할 수 있다.
• cascade Layer : !import를 사용하지 않고도 우선적으로 적용될 스타일의 순서를 지정할 수 있다. (레이어 별 스타일 지정)

모든 기능들이 모든 버전의 모든 브라우저에서 지원되는건 아니지만 점차 사용되는 곳이 확장되며 표준안으로 자리잡는 날이 다가오지 않을까? 점점 스크립트보다 스타일시트 내에서 처리 할 수 있는 기능들이 많아지는 추세인 것 같다-

 

https://youtu.be/Xy9ZXRRgpLk

https://web.dev/state-of-css-2022/

State of CSS 2022

https://youtu.be/kkiLBF_YerM

https://youtu.be/jr9imvgVRJM