한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
acctent-color
(브라우저 지원 : Chrome 93, Firefox 92, Edge 93, Safari 15.4)
acctent-color를 사용하여 색상을 설정하면, 브라우저는 그에 맞게 스타일을 설정해준다.
다르게 말하면, 버튼이나 진행 표시 줄, 라디오/체크 박스 등 HTML 요소의 색상 변경을 손쉽게 할 수 있으며 관리에 용이하다.
이전에는 색상을 변경하려면 배경 색, 테두리 선, hover 등 세부적으로 직접 설정해야 했는데, acctent-color를 사용하면 단 한 줄만으로 나머지 요소에 대한 세부적인 설정이 필요 없다. 브라우저에서 작업자가 설정한 강조색에 맞춘 요소들로 표현한다.
acctent-contrast
(브라우저 지원 : Safari 15)
배경색이 있는 상태에서 텍스트가 잘 보이려면 서로 대비되는 색상으로 결정하면 되는데, 이럴 때 대비되는 텍스트 색상을 찾느라 수고할 필요 없이 color-contrast를 사용하면 된다.
작업자가 배경색을 설정하고, 그에 맞는 대조색을 찾는 대신에 color-contrast를 사용하면, 배경 대비 텍스트 색상은 브라우저에서 알아서 결정된다.
color-mix
(브라우저 지원 : Firefox 88, Safari 15)
브라우저에서 색상을 혼합할 수 있는 기능으로, 브랜드 색상을 도출하는데 유용하다.
이전에는 이와 같은 기능을 위해서 Sass와 같은 전처리기가 필요했었고 자바스크립트를 포함했어야 했는데, 앞으로는 color-mix 만으로도 브라우저에서 색상을 혼합할 수 있다.
Viewport units
(브라우저 지원 : Chrome 100, Firefox 98, Edge 99, Safari 15.4)
viewport는 웹 사이트를 볼 수 있는 영역이나 윈도우 창 크기를 의미하는데, 모바일에서는 창 크기를 조정 할 수 없기 때문에 화면의 넓이나 높이를 100%로 설정해왔는데 모바일 사이즈 유닛이 추가되었다.
여러가지 사이트 보면서 공부하기