최근에 GoogleIO의 섹션중에 state of css 2022가 있었는데, 꽤나 재미있는 속성의 추가가 있어서 소개하고자 한다. 전부 새로운 내용은 아니고 몇몇 브라우저들이 지원하고 있던 내용도 있기는 하니 참고 바란다. Colorv1 Fonts 해당 폰트는 새로운 형태의 폰트이다. 특징으로는 당연히 폰트이니 벡터일테고, 색상 변화에 초점을 맞춘 폰트인 듯 한다. 제공되는 내용은 색상 혼합 및 그라디언트이다. 이 내용이 반겨지는 것은 이제 아이콘폰트에서 투톤을 지원하기 위하여 이미지 파일을 사용하지 않아도 된다는 것이다. 한때 투톤 아이콘이 유행처럼 퍼졌던것을 기억하는가? < https://fonts.google.com/icons?selected=Material+Icons&icon.style=Two+tone > 위와 같이 색상을 두개를 표현하는 아이콘인데, 위처럼 이용하기위해서는 저 아이콘이 폰트가아닌 이미지로 불러와야 했다. svg도 이미지로 본다. 하지만 사이즈 변경이나 색상변경이 일반적인 폰트와 같은 형태가 아니기 때문에 다른 폰트들과 달라 꽤나 불편함이 있었다. 하지만 이번에 colorv1 fonts를 지원하게 되면 아이콘 폰트에 투톤을 적용하기가 더 수월하지 않을까 생각한다. 샘플은 아래에 있다. https://developer.chrome.com/blog/colrv1-fonts/ inert 일반적으로 우리는 alert함수 처럼 모달(해당 화면의 동작을 완료 하기 전에는 다른 화면으로 갈수 없는 팝업 형태)을 지원하기 위하여, 어떤 팝업을 열게 되면 뒤에 배경을 깔아서 해당 팝업 이외의 컨텐츠에 클릭을 할 수 없도록 지원하였다. < https://www.w3schools.com/howto/howto_css_delete_modal.asp > 위와 같이 말이다. 위의 방식은 백그라운드의 크기를 지정 하는 것부터 문제가 된다. 언제나 항상 html을 꽉...