웹사이트 제작과 디지털 마케팅에 관한 이야기
마우스를 올렸을 때 버튼 색을 바꾸려면 같은 선택자를 처음부터 다시 쓰거나 Sass를 설치해야 했다. 이제 브라우저가 CSS 중첩을 직접 이해하면서, 별도 도구 없이도 스타일 코드가 짧아지고 고치기 쉬워진다.
방문자는 한 박자의 로딩에도 마음이 식는다. Speculation Rules API는 무거운 자바스크립트 없이 다음에 열릴 페이지를 미리 불러와, 링크를 누르는 순간 화면이 즉시 뜨게 만든다.
메뉴 하나, 알림 배너 하나를 띄우려고 무거운 팝업 라이브러리를 통째로 설치하던 시대가 저물고 있습니다. 브라우저에 기본 탑재된 Popover API로 작은 회사 웹사이트가 어떻게 가벼워지는지 정리했습니다.
GSAP, AOS, Intersection Observer로 짜던 스크롤 인터랙션이 이제 CSS 한 줄로 끝난다. animation-timeline이 작은 회사 사이트의 스크롤 경험을 어떻게 바꾸는지 정리했다.
고객이 사이트 안에서 다른 페이지로 넘어갈 때마다 화면이 흰 배경부터 다시 그려진다. 이 깜박임 한 번이 같은 브랜드 안에 있다는 감각을 흩뜨린다. View Transitions API는 자바스크립트 라이브러리 없이 페이지 전환을 한 장면처럼 이어 그려주는 새로운 웹 표준이다.
미디어 쿼리는 늘 화면 전체 너비만 본다. 같은 카드가 본문에선 멀쩡하다가 사이드바에 들어가면 깨지는 이유다. CSS 컨테이너 쿼리(@container)는 요소가 자기가 놓인 자리의 크기를 보고 스스로 모양을 바꾼다. 작은 회사 웹사이트가 컨테이너 쿼리로 컴포넌트 반응형을 챙기는 5가지 원칙.
검색 순위 1위보다 'AI가 우리 회사를 답으로 골라주느냐'가 더 중요해지고 있습니다. 작은 회사가 AI 검색에 인용되기 위해 지금 챙겨야 할 5가지를 정리했습니다.
자식 요소의 상태에 따라 부모를 꾸미려면 늘 자바스크립트가 필요했습니다. CSS :has() 선택자는 그 오랜 한계를 걷어내고, 폼 검증·빈 목록·메뉴 강조 같은 일을 코드 한 줄 없이 스타일시트 안에서 처리하게 해줍니다.
드롭다운과 툴팁의 위치를 잡으려고 매번 자바스크립트로 좌표를 계산하던 시대가 저물고 있다. CSS Anchor Positioning은 한 요소를 다른 요소에 직접 묶고, 화면 밖으로 넘칠 때 스스로 자리를 바꾼다.