웹사이트 제작과 디지털 마케팅에 관한 이야기
브랜드 색 하나만 정하면 호버 색, 연한 배경, 비활성 회색까지 브라우저가 알아서 섞어 낸다. 전처리기 없이 CSS 한 줄로 색 팔레트를 만드는 color-mix() 함수를 정리했다.
말풍선·툴팁·드롭다운을 특정 요소에 정확히 붙이려고 좌표 계산 라이브러리를 짊어지던 시대가 저물고 있다. CSS 앵커 포지셔닝이 그 배선을 코드 몇 줄로 대신하는 흐름을 실무 관점에서 정리했다.
미디어 쿼리는 화면 전체 크기만 잽니다. 하지만 같은 요소가 어느 자리에 놓이느냐에 따라 필요한 모양은 달라집니다. 컨테이너 쿼리가 이 오래된 어긋남을 어떻게 풀어내는지 살펴봅니다.
긴 소개 페이지를 열면 브라우저는 화면 밖 저 아래 섹션까지 전부 계산하고 그려 놓습니다. content-visibility: auto 한 줄이면 보이는 부분만 먼저 그려 첫 화면이 눈에 띄게 빨라집니다.
모달을 여는 버튼, 팝업을 닫는 버튼마다 이벤트 리스너를 다시 쓰던 관행이 끝나갑니다. HTML 속성 두 개로 버튼과 대상 요소를 직접 잇는 Invoker Commands를 소개합니다.
select 태그는 20년간 CSS가 닿지 않는 유일한 폼 요소였고, 업계는 div와 자바스크립트로 가짜 셀렉트를 다시 지어 왔다. appearance: base-select 한 줄이 이 관행을 어떻게 끝내는지 정리했다.
아코디언과 드롭다운을 부드럽게 펼치려면 지금까지는 자바스크립트로 높이를 계산해 픽셀로 박아 넣어야 했다. CSS 한 줄로 height: auto까지 자연스럽게 애니메이션되는 interpolate-size와 calc-size()를 정리했다.
마우스 오버 감지, 프리페치 라이브러리, 캐시 관리까지—페이지 전환 속도를 위해 개발자가 떠안던 일을 이제 브라우저가 규칙 몇 줄로 대신한다. Speculation Rules API가 무엇이고, 작은 회사 사이트에 왜 지금 중요한지 짚어본다.
스크롤에 맞춰 요소를 움직이려고 스크롤 이벤트와 위치 계산 코드를 떠안던 시절은 지나간다. CSS 스크롤 기반 애니메이션이 진행 막대와 등장 효과를 몇 줄로 대신하는 방법과, 작은 회사 웹사이트에서 절제해 쓰는 기준을 짚는다.