훌륭해요!

CSS Grid에서 grid-template-columns로 열의 크기를 정의한다.

grid-template-columns: 1fr 2fr 1fr;로 3열 레이아웃을 만들며, fr은 가용 공간의 비율입니다.

CSS에서 object-fit 속성은 이미지나 비디오의 크기 맞춤 방식을 제어한다.

object-fit: cover는 비율을 유지하며 영역을 채우고, contain은 비율을 유지하며 전체를 보여줍니다.

CSS Grid에서 fr 단위는 고정 크기를 의미한다.

fr(fraction)은 남은 공간을 비율로 나누는 유연한 단위입니다.

CSS에서 container queries(@container)로 부모 요소 크기에 따른 스타일을 적용할 수 있다.

@container (min-width: 400px) { }로 미디어 쿼리 대신 부모 컨테이너 크기에 반응하는 스타일을 작성합니다.

CSS에서 rem 단위는 부모 요소의 font-size 기준이다.

rem은 루트 요소(html)의 font-size를 기준으로 합니다. 부모 기준은 em입니다.

CSS에서 contain: layout paint로 렌더링 성능을 최적화할 수 있다.

CSS Containment는 요소의 렌더링 범위를 제한하여 브라우저 최적화를 돕습니다.

CSS에서 box-sizing: border-box를 사용하면 padding과 border가 width에 포함된다.

border-box에서는 width = content + padding + border입니다. content-box(기본값)에서는 width = content만입니다.

CSS에서 @keyframes로 애니메이션의 프레임을 정의한다.

@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }로 애니메이션을 정의합니다.

CSS에서 :has() 선택자는 특정 자식을 가진 부모를 선택한다.

div:has(> img)는 직접 img 자식을 가진 div를 선택합니다. 부모 선택자로 불립니다.

CSS에서 margin은 요소의 배경색 영역에 포함된다.

margin은 요소 외부 여백으로 배경색이 적용되지 않습니다. 배경색은 padding까지만 포함됩니다.