그라데이션 하나 스르륵 바뀌게 하려고, 자바스크립트가 1초에 예순 번 색을 계산해 덮어쓴다 — 색과 각도에 '타입'을 달아 CSS가 스스로 사이를 채우게 하는 @property의 시대
CSS 변수는 브라우저에게 그저 글자 뭉치였다. 그래서 그라데이션도 회전 각도도 애니메이션이 되지 않았다. @property는 변수에 '이건 색이다, 이건 각도다'라고 타입을 달아, 브라우저가 값과 값 사이를 스스로 채우게 만든다.
체크박스 하나 켜졌다고 카드 전체를 바꾸려면, 자바스크립트가 부모에 클래스를 붙였다 뗐다 해야 했다 — 자식의 상태를 보고 부모를 고르는 CSS :has()의 시대
CSS는 늘 부모에서 자식으로만 흘렀습니다. 자식의 상태에 따라 부모를 바꾸려면 자바스크립트가 필요했죠. :has() 선택자는 이 방향을 뒤집어, 작은 회사 홈페이지의 폼·레이아웃·상호작용을 코드 부담 없이 살아 움직이게 만듭니다.
같은 카드인데 넓은 본문에선 멀쩡하다가 좁은 사이드바에 넣으면 레이아웃이 와르르 무너진다 — 요소가 자기가 놓인 자리 너비에 맞춰 스스로 바뀌는 CSS 컨테이너 쿼리(@container)의 시대
화면 전체 너비만 보던 반응형이 이제 '요소가 놓인 자리'를 본다. 같은 컴포넌트를 어디에 넣어도 알아서 맞춰지는 CSS 컨테이너 쿼리의 개념과 실무 활용을 정리했다.
헤더를 반투명 유리처럼 뒤가 비쳐 흐릿하게 만들려고, 배경을 미리 흐려 놓은 이미지를 잘라 붙인다 — 뒤에 있는 것을 실시간으로 흐리는 CSS backdrop-filter의 시대
반투명 유리처럼 뒤가 은은하게 비치는 메뉴 바와 팝업, 예전엔 흐린 이미지를 미리 만들어 오려 붙였습니다. 뒤에 있는 것을 실시간으로 흐리는 CSS backdrop-filter가 그 수고를 한 줄로 대신하는 이야기입니다.
첫 화면을 꽉 채우려 100vh를 썼더니, 모바일 주소창이 '문의' 버튼을 반쯤 잘라먹는다 — 화면 높이를 주소창까지 계산해 담는 CSS dvh·svh 단위의 시대
모바일에서 100vh는 주소창이 접힌 가장 큰 높이를 기준으로 잡혀 버튼이 잘리곤 합니다. 주소창을 계산에 넣는 새 단위 svh·lvh·dvh로 자바스크립트 없이 첫 화면을 정확히 채우는 법을 정리했습니다.
체크박스 하나 브랜드 색으로 물들이자고, 기본 네모를 숨기고 자바스크립트로 처음부터 다시 그린다 — 폼 요소의 색을 CSS 한 줄에 맡기는 accent-color의 시대
체크박스·라디오·슬라이더의 파란색을 브랜드 색으로 바꾸려고 네이티브 요소를 통째로 걷어내던 시절이 있었다. 이제 accent-color 한 줄이면 접근성을 지킨 채 색만 갈아입힌다.
메뉴가 툭 튀어나왔다 툭 사라져, 손님은 방금 뭐가 열렸는지 놓친다 — 나타남과 사라짐을 자바스크립트 없이 CSS에 맡기는 @starting-style의 시대
팝업과 드롭다운이 부드럽게 떠오르고 스르륵 닫히게 하려고 자바스크립트로 클래스를 붙였다 뗐다 하던 시대가 저물고 있습니다. 진입·퇴장 애니메이션을 CSS 한 곳에 맡기는 @starting-style과 allow-discrete 이야기를 정리합니다.
다크 모드 하나 넣자고 색을 라이트용·다크용 두 벌씩 정의하고 자바스크립트로 갈아 끼운다 — 밝음과 어둠을 색 한 줄에 담는 light-dark()의 시대
다크 모드를 만들 때마다 색을 두 벌씩 정의하고 자바스크립트로 갈아 끼우던 일을, CSS light-dark() 함수가 색 한 줄로 끝냅니다. 작은 회사 홈페이지에 왜 중요한지 짚어봅니다.
손님이 입력을 시작하기도 전에 칸마다 빨간 경고가 떠 겁을 먹고 폼을 닫는다 — 입력을 마친 뒤에야 맞고 틀림을 알려 주는 CSS :user-valid·:user-invalid의 시대
입력값이 맞는지 빨강·초록으로 알려 주려 자바스크립트로 칸마다 감시하던 시절이 저뭅니다. CSS :user-valid·:user-invalid는 손님이 직접 입력을 마친 칸에만 검증 표시를 띄워, 성가시지 않은 실시간 피드백을 코드 몇 줄로 만듭니다.