스마트 카드
나를 감싸는 컨테이너의 크기를 조절해 보세요. 레이아웃이 유동적으로 변합니다.
1. Container Queries (@container)
부모 요소의 크기에 따라 스타일이 변하는 똑똑한 컴포넌트입니다.
2. The :has() Selector
자식 요소의 상태에 따라 부모의 배경색이 변합니다.
체크박스를 선택하면 카드 전체 스타일이 변합니다.
3. Modern Colors (OKLCH)
더 생동감 있고 일관된 색상을 제공하는 현대적인 컬러 스페이스입니다.
4. Web Components
JavaScript로 정의된 캡슐화된 사용자 정의 요소입니다.