CSS

CSS가 스스로 경계를 그을 수 있다면 2026년 프론트엔드 생태계에서 두 가지 CSS 기능이 조용하지만 확실하게 실무의 판도를 바꾸고 있습니다. @scope 와 Anchor Positioning입니다. 두 기능은 서로 다른 문제를 풀지만, 공통적으로 "자바스크립트가 처리하던 일을 CSS가 직접 처리한다

PostCSS 기반 세계관이 무너지는 날 우리 팀이 Tailwind CSS v4 마이그레이션을 처음 마주한 건 2026년 초였습니다. Next.js App Router로 전환한 지 얼마 지나지 않아, Tailwind 팀이 v4 정식 릴리즈를 선언했습니다. 릴리즈 노트를 열자마자 첫 번째 느낌은 "업그레이

!important 가 무한 증식하는 순간, 뭔가 잘못된 것이다 디자인 시스템을 운영하다 보면 어느 순간 CSS 파일 전체에서 !important 가 조용히 번식해 있는 광경을 목격하게 됩니다. 처음에는 단 한 줄이었습니다. "Tailwind 유틸리티 클래스가 컴포넌트 스타일을 덮어쓰지 못하네, 일단 !

\n\nCSS 방법론의 역사는 깁니다. OOCSS, BEM, SMACSS, CSS in JS를 거쳐 이제는 Utility First CSS 의 시대가 도래했습니다. 그 선봉장에 있는 Tailwind CSS. 처음에는 "HTML 클래스가 너무 지저분해진다"며 거부감을 느끼던 개발자들도 한번 맛을 보면 다시

\n\nCSS 역사상 가장 오랫동안 개발자들이 염원해왔던 기능, 바로 "부모 선택자"입니다. JQuery의 .parent() 나 .closest() 를 쓰지 않고는 불가능했던 그 스타일링이, 드디어 순수 CSS만으로 가능해졌습니다. 주인공은 바로 :has() 의사 클래스(Pseudo class)입니다.

반응형 기준은 viewport만이 아니다 오랫동안 반응형 웹은 viewport media query 중심으로 설계됐습니다. 화면 너비가 768px보다 작으면 모바일 레이아웃, 1024px보다 크면 데스크톱 레이아웃 같은 방식입니다. 하지만 현대 UI는 같은 컴포넌트가 사이드바, 카드 그리드, 모달, 대시