CSS

방법 격리 수준 빌드 도구 의존 JS 런타임 비용 단점 ------ ----------- ---------------- ---------------- ------ CSS Modules 높음 필요 없음 빌드 설정 필요 Shadow DOM 완전 격리 불필요 있음 외부 스타일 차단 BEM 네이밍 규약 의존 불필요 없음 사람 실수 의존 styled-componen

Tailwind CSS v3까지는 PostCSS를 핵심 처리 파이프라인으로 사용했습니다. CSS 파일이 입력되면 PostCSS 플러그인 체인이 @tailwind 지시어를 해석하고, autoprefixer 가 벤더 프리픽스를 붙이고, postcss-import 가 @import 구문을 처리했습니다.

디자인 시스템을 운영하다 보면 어느 순간 CSS 파일 전체에서 !important 가 조용히 번식해 있는 광경을 목격하게 됩니다. 처음에는 단 한 줄이었습니다. "Tailwind 유틸리티 클래스가 컴포넌트 스타일을 덮어쓰지 못하네, 일단 !important 붙이자." 그 다음에는 라이브러리 팀이 "우리 .Button 스타일이 페이지 CSS에 묻히니까 !im

개발자에게 가장 힘든 일 중 하나는 "변수명 짓기"입니다. CSS 클래스명도 마찬가지입니다. .wrapper , .container-inner , .sidebar-left-wrapper ... 의미 없는 이름 짓기에 지치셨나요? Tailwind는 미리 정의된 유틸리티 클래스( flex , pt-4 , text-center )를 조합하여 스타일을 입힙니다.

MDN 정의에 따르면 :has() , 관계형 의사 클래스입니다. 쉽게 말해 "인수(괄호 안의 선택자)와 일치하는 요소를 하나라도 포함하고 있는 요소" 를 선택합니다. 이 코드는 img 를 가진 article 의 배경색을 바꿉니다. 만약 img 가 없다면 스타일은 적용되지 않습니다.

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