한 줄 요약 - 기본 색 하나에서 팔레트 전체를 뽑는 color-mix()/light-dark(), 그리고 제목 줄을 고르게 맞추고 본문 고아 단어를 줄이는 text-wrap. 작지만 매일 쓰는 디테일을 CSS가 직접 처리합니다.
color-mix() / light-dark()
버튼 하나에도 기본색/hover색/연한 배경/테두리 색을 다 정해야 하죠. 보통 Sass 같은 전처리기로 darken/lighten을 돌렸는데, color-mix()는 기본 색에 흰색/검정/투명을 섞어 그 자리에서 파생합니다. 기본 색 하나만 바꾸면 나머지가 다 따라와요. light-dark()는 라이트/다크 색을 한 규칙에 담아 미디어쿼리 중복을 없앱니다.
text-wrap: balance / pretty
제목이 여러 줄로 넘어갈 때 마지막 줄에 단어 하나만 남으면 어색합니다. text-wrap: balance는 줄 길이를 비슷하게 맞추고, pretty는 본문의 고아 단어(혼자 남는 단어)를 줄입니다. 수동 줄바꿈도 JS 계산도 필요 없어요.
주의할 점
color-mix와 balance는 주요 브라우저에 폭넓게 지원되지만, text-wrap: pretty는 아직 크롬 계열 위주입니다. 미지원이어도 기본 줄바꿈으로 자연스럽게 폴백되니 화면이 깨지진 않아요. 두 기능 모두 아래 관련 데모에서 직접 만져볼 수 있습니다.