웹사이트 제작과 디지털 마케팅에 관한 이야기
쿠키 동의창 하나에 무거운 모달 라이브러리와 수십 줄의 포커스·배경 처리 코드가 딸려오던 시절은 지났다. HTML dialog 요소가 갖춘 기본기와, 작은 회사 사이트에서 바로 쓸 만한 자리를 정리한다.
손님이 검색 링크 대신 AI가 요약한 답을 먼저 봅니다. 클릭이 줄어드는 시대에 작은 회사 홈페이지가 AI에게 '인용'되게 만드는 5가지 원칙을 정리했습니다.
FAQ 아코디언이나 '더보기' 영역을 만들 때마다 자바스크립트로 클릭을 감지하고 높이를 계산하던 시절이 저물고 있습니다. HTML이 기본으로 품은 details·summary 태그만으로 접고 펴는 화면을 가볍고 단단하게 만드는 법을 정리했습니다.
툴팁, 드롭다운, 알림 같은 '떠 있는 화면'은 늘 자바스크립트로 힘겹게 만들어 왔습니다. 이제 HTML popover 속성 하나로 열고 닫고 맨 위에 띄우는 일을 브라우저가 알아서 처리합니다.
부드러운 페이지 전환을 위해 SPA 프레임워크와 애니메이션 라이브러리를 통째로 끌어안던 시절이 저뭅니다. 이제 브라우저가 기본으로 지원하는 View Transitions로 일반 멀티페이지 사이트도 한 호흡으로 이어집니다.
미디어 쿼리는 브라우저 화면 전체의 너비만 본다. 그래서 같은 카드를 넓은 본문과 좁은 사이드바에 함께 놓으면 한쪽은 반드시 깨진다. 컨테이너 쿼리는 '화면'이 아니라 '그 요소가 실제로 담긴 칸'의 크기를 기준으로 반응한다.
오랫동안 CSS는 자식만 골라낼 수 있어 '부모를 바꾸려면 자바스크립트'가 공식이었습니다. :has() 선택자는 그 벽을 허물어, 입력 상태·내용 유무·하위 요소에 따라 화면을 코드 없이 반응시킵니다. 작은 회사 웹사이트에서 바로 쓰는 장면과 도입 전 짚을 점을 정리했습니다.
스타일을 정리하려면 Sass 같은 전처리기가 필수라 여기던 시대는 지나가고 있다. 순수 CSS만으로 코드를 부품별로 묶어 정돈하는 CSS 중첩(nesting)을, 작은 회사 사이트의 눈높이에서 쉽게 풀어본다.
슬라이더 라이브러리 없이 CSS scroll-snap 속성 몇 개만으로 손끝에 자석처럼 달라붙는 제품 슬라이드를 만드는 방법을 정리했습니다.