기술노트

Core Web Vitals의 INP(Interaction to Next Paint)를 200ms 아래로 끌어내리는 실전 기법 + Speculation Rules로 페이지 전환 0초.

Tailwind v4의 CSS-first config, Container Query, @starting-style 등 신기능을 실제 디자인 시스템에 통합하는 패턴.

Web Components는 프레임워크 독립적인 브라우저 표준 UI 컴포넌트다. Custom Elements·Shadow DOM·Slot·Form Internals로 실전 컴포넌트를 만드는 법을 정리한다.

Tailwind CSS 4의 CSS-first 설정, Oxide 엔진, 새로운 유틸리티 클래스 등 주요 변경사항과 마이그레이션 가이드

CSS Scroll-Driven Animations API로 JavaScript 없이 스크롤 애니메이션을 구현하기.

JavaScript 라이브러리 없이 CSS Scroll Snap만으로 네이티브 앱처럼 부드러운 캐러셀과 풀페이지 스크롤을 구현하는 방법을 소개합니다.

Tailwind CSS v4에서 복잡한 애니메이션과 트랜지션을 효율적으로 구현하는 방법.

네이티브 CSS Nesting 문법으로 Sass 없이 중첩 스타일을 작성하는 방법.

Tailwind CSS v4에서 커스텀 유틸리티, 변형, 플러그인을 만드는 고급 기법.

View Transitions API로 SPA와 MPA 모두에서 부드러운 페이지 전환을 구현하는 방법.

CSS Anchor Positioning API로 요소 간 상대적 위치를 지정하는 새로운 방법.

웹 폰트 로딩 전략과 FOUT/FOIT 방지, subset 최적화로 성능을 개선하는 방법.