웹사이트 제작과 디지털 마케팅에 관한 이야기
자식 요소의 상태에 따라 부모를 꾸미려면 늘 자바스크립트가 필요했습니다. CSS :has() 선택자는 그 오랜 한계를 걷어내고, 폼 검증·빈 목록·메뉴 강조 같은 일을 코드 한 줄 없이 스타일시트 안에서 처리하게 해줍니다.
드롭다운과 툴팁의 위치를 잡으려고 매번 자바스크립트로 좌표를 계산하던 시대가 저물고 있다. CSS Anchor Positioning은 한 요소를 다른 요소에 직접 묶고, 화면 밖으로 넘칠 때 스스로 자리를 바꾼다.
모니터에서 멀쩡하던 헤드라인이 노트북 화면에서는 한 음절만 외롭게 두 번째 줄로 떨어진다. CSS text-wrap의 balance와 pretty는 자바스크립트 한 줄 없이 이 어색함을 정돈한다.
모달, 드롭다운, 툴팁을 띄우려고 외부 라이브러리를 줄줄이 부르던 시대가 끝나가고 있다. HTML popover 속성 한 줄이 오버레이의 기본 동작을 브라우저에 위임한다.
부모 그리드의 줄을 자식 카드 안쪽까지 그대로 이어주는 CSS Subgrid가 자바스크립트 없이 카드 안 요소들의 가로 줄을 맞춰준다. 이제 카드 높이를 강제로 정렬하던 코드를 버려도 된다.
사용자가 길게 쓸수록 입력창이 답답하게 좁아지던 시대가 끝났다. CSS 한 줄짜리 새 속성 field-sizing: content가 textarea와 input을 콘텐츠 길이에 맞춰 스스로 늘려준다.
패럴랙스와 페이드인을 위해 GSAP, AOS, ScrollMagic을 더하는 시대는 끝나간다. CSS의 animation-timeline 한 줄이 스크롤 위치를 애니메이션의 시간축으로 바꿔주는 Scroll-driven Animations의 동작 원리와 작은 사이트에 먼저 적용해야 할 두 가지 패턴을 정리한다.
지금까지 반응형 웹은 화면 전체 너비를 기준으로 만들어졌다. Container Queries는 카드와 위젯이 자기가 놓인 자리의 폭을 직접 보고 모양을 바꾼다. 미디어 쿼리만으로는 풀 수 없던 컴포넌트 반응형의 답이다.
CSS는 오랫동안 자식의 상태로 부모의 모양을 바꾸지 못했다. 그 한 칸 차이를 메우기 위해 우리는 자바스크립트를 얹어 왔다. :has()는 그 마지막 경계를 지운다.