웹사이트 제작과 디지털 마케팅에 관한 이야기
이미지가 늦게 로딩되면 화면이 아래로 밀려 손님이 누르려던 버튼이 어긋납니다. CSS aspect-ratio 한 줄로 사진이 들어올 자리를 미리 비워 두어, 화면이 흔들리지 않게 만드는 방법을 정리했습니다.
팝업 하나 띄우려고 무거운 자바스크립트 라이브러리를 설치하던 시대가 저물고 있습니다. 브라우저에 기본 내장된 dialog 태그로 가볍고 안전한 팝업을 만드는 원리와, 작은 회사 웹사이트에 주는 실질적 이득을 정리했습니다.
반응형의 기준을 '화면'이 아니라 '부모 영역'으로 옮기는 CSS 컨테이너 쿼리. 같은 컴포넌트를 어디에 놓아도 알아서 모양을 바꾸는 원리와, 작은 회사 웹사이트에 주는 실질적 이득을 정리했습니다.
자식 요소의 상태에 따라 부모의 모습을 바꾸는 일은 오랫동안 자바스크립트의 몫이었습니다. CSS :has() 선택자는 이제 그 일을 스타일 한 줄로 대신합니다.
링크를 누를 때마다 화면이 하얗게 깜빡이며 끊기는 건 오래된 웹의 숙명이었습니다. 이제 View Transitions API가 무거운 자바스크립트 라이브러리 없이도 페이지 전환을 앱처럼 부드럽게 이어 줍니다.
데스크톱, 태블릿, 모바일마다 폰트 크기를 일일이 선언하던 방식은 이제 낡았다. CSS clamp() 한 줄이면 글자가 화면 폭에 맞춰 스스로 커지고 작아진다.
FAQ 아코디언 하나에 자바스크립트 라이브러리를 부르던 시대는 끝났다. HTML의 details와 summary 태그, 그리고 interpolate-size 한 줄이면 부드럽게 열리는 아코디언이 완성된다.
제품 사진 슬라이더 하나를 위해 무거운 캐러셀 라이브러리를 설치할 필요가 없습니다. CSS Scroll Snap 두 줄이면 모바일 앱처럼 착착 멈추는 슬라이드를 만들 수 있습니다.
헤드라인 마지막 줄에 단어 하나만 덩그러니 남는 어색함을 이제 CSS 한 줄로 해결합니다. balance와 pretty 두 값으로 제목과 본문의 줄바꿈을 브라우저가 알아서 다듬는 text-wrap을, 작은 회사 사이트 관점에서 정리했습니다.