웹사이트 제작과 디지털 마케팅에 관한 이야기
모니터에서 멀쩡하던 헤드라인이 노트북 화면에서는 한 음절만 외롭게 두 번째 줄로 떨어진다. 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()는 그 마지막 경계를 지운다.
메뉴를 누를 때마다 화면이 흰색으로 깜빡이는 사이트는 가격이 같아도 싸 보인다. 표준 웹 기술 View Transitions API가 이 첫인상을 단 몇 줄의 CSS로 영상처럼 이어 붙인다.
툴팁이 화면 밖으로 잘리고, 드롭다운이 스크롤할 때마다 어긋나는 문제는 오랫동안 자바스크립트의 몫이었다. CSS Anchor Positioning은 위치 계산을 브라우저에 맡기고, 코드 한 줄로 닻을 내리듯 요소를 붙일 수 있게 한다.