최근에 GoogleIO의 섹션중에 state of css 2022가 있었는데, 꽤나 재미있는 속성의 추가가 있어서 소개하고자 한다. 전부 새로운 내용은 아니고 몇몇 브라우저들이 지원하고 있던 내용도 있기는 하니 참고 바란다.
Colorv1 Fonts
해당 폰트는 새로운 형태의 폰트이다. 특징으로는 당연히 폰트이니 벡터일테고, 색상 변화에 초점을 맞춘 폰트인 듯 한다. 제공되는 내용은 색상 혼합 및 그라디언트이다.
이 내용이 반겨지는 것은 이제 아이콘폰트에서 투톤을 지원하기 위하여 이미지 파일을 사용하지 않아도 된다는 것이다. 한때 투톤 아이콘이 유행처럼 퍼졌던것을 기억하는가?
위와 같이 색상을 두개를 표현하는 아이콘인데, 위처럼 이용하기위해서는 저 아이콘이 폰트가아닌 이미지로 불러와야 했다. svg도 이미지로 본다. 하지만 사이즈 변경이나 색상변경이 일반적인 폰트와 같은 형태가 아니기 때문에 다른 폰트들과 달라 꽤나 불편함이 있었다. 하지만 이번에 colorv1 fonts를 지원하게 되면 아이콘 폰트에 투톤을 적용하기가 더 수월하지 않을까 생각한다.
샘플은 아래에 있다.
https://developer.chrome.com/blog/colrv1-fonts/
inert
일반적으로 우리는 alert함수 처럼 모달(해당 화면의 동작을 완료 하기 전에는 다른 화면으로 갈수 없는 팝업 형태)을 지원하기 위하여, 어떤 팝업을 열게 되면 뒤에 배경을 깔아서 해당 팝업 이외의 컨텐츠에 클릭을 할 수 없도록 지원하였다.
위와 같이 말이다. 위의 방식은 백그라운드의 크기를 지정 하는 것부터 문제가 된다. 언제나 항상 html을 꽉채운 형태가 되어야 하며, 특정요소는 풀어 주고 싶을 때도 있을 것이다. 하지만 그런 세밀한 컨트롤을 지원하기에는 꽤 어렵다.
샘플은 아래에 있다.toggle()
이 옵션은 css에 상태관리를 할 수 있는 값이 생긴것이 아닌가 할 정도로 재미있는 요소이다. 예전에 javascript없이 타이머를 구현해본적이 있는데, 뭐 간단한게 checkbox를 이용한 트릭으로 위의 toggle기능을 대체한적이 있다. 하지만 그때에는 상태가 0, 1의 값밖에 못 다루었지만 toggle을 이용한다면 여러개의 값을 사용하는 것도 가능해진다.
간단하게 우리는 접혔다 펼쳤다 고정까지 되는 네비게이션을 만든다고 했을 때, 접혔다 펄쳤다 이것은 mouseUp, mouseLeave로 javascript개입 없이 가능하지만, 고정은 다른 차원의 얘기라서 checkbox트릭을 사용하지 않는 다면 열려있는 상태를 지원하기 위하여 javascript에 값을 저장하였다. 하지만 이제 그러지 않아도 된다는 뜻이다.
샘플은 아래에 있다.
https://www.bram.us/2022/04/20/the-future-of-css-css-toggles/
마무리
오늘 소개하지 않은 내용중에 재밌는 것이 많지만, 개인적으로 원했던 내용들만 조금 리뷰를 해보았다. 실험을 해본결과 아직까지는 polyfill을 사용해야 하는 부분들이지만 곧 다 지원해주시겠지... 워낙 요즘 웹 트렌드는 빠르니까..
댓글
댓글 쓰기