이벤트 팝업 하나 띄우려고 홈페이지에 자바스크립트 한 뭉치를 얹는다 — 팝업·모달을 코드 몇 줄로 여는 팝오버(Popover) API의 시대
공지창 하나 띄우려고 라이브러리를 통째로 불러오던 시절은 지나갔습니다. 이제 브라우저가 팝업의 열고 닫힘·바깥 클릭·겹침 순서까지 알아서 처리하는 팝오버(Popover) API를 살펴봅니다.
페이지를 넘길 때마다 화면이 툭 하고 처음부터 다시 그려져, 손님은 매번 멈칫한다 — 화면 전환(뷰 트랜지션)이 홈페이지를 앱처럼 매끄럽게 잇는 시대
웹의 페이지 전환은 늘 흰 화면 깜빡임과 함께 '툭' 끊겼습니다. 브라우저가 전후 화면을 스냅샷으로 이어 붙이는 뷰 트랜지션이, 작은 회사 홈페이지도 앱처럼 매끄럽게 흐르게 하는 원리와 실무 포인트를 짚습니다.
반응형을 화면 크기 하나로만 짜다, 같은 카드가 넓은 본문에선 멀쩡한데 좁은 사이드바에선 글자가 우그러진다 — 컨테이너 쿼리(@container)가 요소를 ‘제가 놓인 자리의 폭’에 맞춰 스스로 바꾸는 시대
화면 전체 너비로만 짜던 반응형은 넓은 화면 속 좁은 사이드바에서 무너진다. 컨테이너 쿼리는 요소가 담긴 상자의 폭을 기준으로 스스로 모양을 바꿔, 한 번 만든 카드를 어디에 놓아도 안심하고 재사용하게 한다.
스타일이 서로 이기려고 !important를 덕지덕지 붙이다, 어느 순간 아무도 화면 색 하나 못 바꾼다 — CSS 캐스케이드 레이어(@layer)가 스타일의 서열을 미리 정해 두는 시대
CSS에서 스타일끼리 우선순위 싸움이 벌어질 때마다 !important와 복잡한 선택자로 힘겨루기하던 관행의 한계와, 스타일의 서열을 미리 층으로 나눠 정해 두는 캐스케이드 레이어(@layer)가 작은 회사 웹사이트 관리에 주는 이점을 풀어냅니다.
스크롤을 내릴 때마다 사진이 스르륵 떠오르게 하려고, 스크롤 위치를 자바스크립트로 밤새 감시한다 — 스크롤 기반 애니메이션(scroll-driven animation)이 그 일을 CSS 한 곳에 넘기는 시대
요소가 화면에 들어올 때 부드럽게 떠오르는 효과, 예전엔 자바스크립트로 스크롤을 감시해야 했다. 이제 CSS animation-timeline 한 줄이 그 일을 대신한다. 작은 회사 웹사이트에 이 기술이 왜 반가운지 정리했다.
손님이 마지막 칸까지 채워야 '보내기'가 켜지게 하고 싶은데, 그때마다 자바스크립트로 칸을 감시해 버튼 색을 갈아 끼운다 — :has()가 '자식을 보고 부모를 바꾸는' 일을 CSS 한 줄에 맡기는 시대
지금까지 CSS는 위에서 아래로만 흘러, '안에 무엇이 든 부모'를 고르지 못했습니다. :has() 선택자는 그 벽을 허물어, 자바스크립트 없이도 자식의 상태에 따라 부모의 모습을 바꿉니다.
제목 한 줄이 '작은 회사 웹사 / 이트'처럼 어정쩡하게 끊겨 볼품없어진다 — text-wrap: balance·pretty가 줄바꿈을 코드 한 줄로 다듬는 시대
화면 너비가 조금만 바뀌어도 제목 마지막 줄에 글자 하나만 덩그러니 남는다. 그동안은 줄바꿈 위치를 손으로 맞추거나 포기했지만, 이제 text-wrap: balance와 pretty가 그 일을 코드 한 줄로 대신한다.
다크 모드 하나 켜자고 색 규칙을 두 벌씩 짜서 관리하다 한쪽을 빼먹는다 — light-dark()가 밝은 색과 어두운 색을 한 줄에 나란히 적는 시대
다크 모드가 어려웠던 이유는 색 감각이 아니라 같은 색을 두 벌로 관리해야 하는 구조였습니다. CSS light-dark() 함수가 그 구조를 어떻게 지우는지 정리했습니다.
손님이 검색창 대신 챗봇에게 '이 근처 괜찮은 집'을 묻는데, 그 대답 속에 우리 가게 이름이 없다 — 작은 회사가 AI 검색(ChatGPT·퍼플렉시티) 답변에 실리는 5가지 원칙
손님은 이제 열 개의 검색결과를 훑는 대신 AI에게 한 줄로 묻고, AI가 골라 준 한두 곳만 본다. AI가 우리 가게를 '읽고 추천할 수 있게' 만드는 다섯 가지 준비를 정리했다.