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