기술노트

SPA 라우팅의 뚝뚝 끊기는 화면 전환을 브라우저가 스냅샷으로 부드럽게 이어주는 View Transitions API. 원리, 크로스 도큐먼트 전환, 공유 요소 애니메이션, 프레임워크 통합, 접근성까지 코드로 정리했다.

order로 화면 배치를 바꿨더니 키보드 탭 순서가 엉켰다면 reading-flow·reading-order가 답입니다. tabindex 지옥 없이 시각 순서와 포커스 순서를 맞추는 CSS 접근성 기법을 예제로 설명합니다.

검색어 하이라이트에 더는 span을 끼워 넣지 마세요. CSS Custom Highlight API로 DOM은 그대로 두고 Range와 ::highlight()만으로 텍스트를 강조하는 3단계 패턴과 우선순위·제약을 정리했습니다.

display:none이던 요소를 부드럽게 나타나고 사라지게 만드는 법. @starting-style과 transition-behavior: allow-discrete로 진입·퇴장 애니메이션을 순수 CSS로 구현하고 흔한 실수까지 짚습니다.

핀터레스트식 벽돌 레이아웃을 grid-template-rows: masonry 한 줄로 만듭니다. CSS 네이티브 메이슨리의 문법과 2026년 현재 지원 상황, column·자바스크립트 대안, @supports 점진 적용까지 실전 관점에서 정리했습니다.

field-sizing: content 한 줄로 textarea와 input을 내용에 맞춰 자동 확장시키는 CSS. scrollHeight를 재던 자바스크립트 코드를 지우는 법과 min/max 경계 설정, React에서의 이점을 정리했다.

oklch()로 밝기가 일관된 디자인 토큰 팔레트를 만드는 법. HSL이 색상마다 밝기가 달라 배신하는 이유, 상대 색상(from) 문법, P3 넓은 색역과 sRGB 클리핑 주의점까지 예제 코드와 함께 정리했다.

웹폰트가 뒤늦게 교체되며 화면이 툭 밀리는 CLS를 없애는 폰트 폴백 메트릭 오버라이드 기법. size-adjust와 ascent-override 사용법, 배율을 직접 구하는 방법, next/font 자동화까지 실전 위주로 정리했다.

화면 밖 요소의 렌더링을 통째로 건너뛰어 긴 페이지의 초기 렌더 비용을 줄이는 CSS 속성. contain-intrinsic-size 짝 사용법과 가상화와의 차이, 스크롤바가 튀는 함정과 해결책까지 실전 위주로 정리했다.

content 경로 누락, 동적 클래스 문자열 조합, 빌드 캐시. Tailwind가 클래스를 못 찾아 purge하는 흔한 원인들.

z-index 9999를 줘도 안 올라오는 건 부모가 만든 쌓임 맥락(stacking context)에 갇혀서다. transform·opacity·position이 맥락을 만든다.

flex 자식 안의 긴 텍스트나 그리드가 부모를 넘쳐 가로 스크롤이 생기는 건 flex item의 min-width 기본값이 auto라서다. min-width:0 한 줄로 해결.