고유 디자인: 콘텐츠 기반 크기 지정

Jen Simmons가 만든 용어인 내재적 디자인은 명시적인 픽셀 크기를 강제로 지정하는 대신 콘텐츠가 자체 크기를 결정하도록 하는 방식입니다. CSS는 중단점 기반 재정의 없이 레이아웃이 자연스럽게 반응형으로 동작하도록 하는 내재적 크기 지정 키워드를 제공합니다.

min-content: 콘텐츠가 넘치지 않으면서 들어갈 수 있는 가장 작은 크기입니다(텍스트는 모든 단어 경계에서 줄바꿈됩니다). max-content: 줄바꿈 없이 콘텐츠를 한 줄에 표시하는 데 필요한 크기입니다. 두 키워드 모두 실제 콘텐츠 크기를 반영합니다.

fit-content는 min(max-content, max(min-content, available))와 같습니다. 사용 가능한 공간까지 콘텐츠에 따라 커진 다음 줄바꿈합니다. 텍스트만큼 넓되 컨테이너보다 넓어지지는 않아야 하는 버튼과 레이블에 적합합니다.

그리드의 minmax(min, max)는 트랙의 최소 크기와 최대 크기를 설정합니다. minmax(200px, 1fr)는 최소 200px이고 더 커질 수 있는 열을 만듭니다. 이를 auto-fill과 함께 사용하면 내재적으로 반응하는 그리드를 만들 수 있습니다.

두 방식 모두 한 행에 가능한 한 많은 트랙을 채웁니다. auto-fill은 빈 트랙을 유지하여 열 개수를 보존합니다. auto-fit은 빈 트랙을 축소하므로 채워진 트랙이 공간을 채우도록 확장됩니다. 사용 가능한 너비를 채우도록 확장되어야 하는 콘텐츠 기반 레이아웃에는 auto-fit을 사용하십시오.

clamp(min, preferred, max)는 값을 지정된 범위 안으로 제한합니다. font-size: clamp(1rem, 2.5vw, 1.5rem)은 뷰포트 너비에 따라 1rem과 1.5rem 사이에서 크기를 조절합니다. 미디어 쿼리 없이 유동적인 글꼴 크기를 구현할 수 있습니다.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr))는 매우 좁은 뷰포트에서는 한 열로 표시되고, 공간이 허용하는 대로 자동으로 열을 추가하는 반응형 그리드를 만듭니다. 미디어 쿼리나 JavaScript가 필요하지 않습니다.

aspect-ratio: 16/9는 너비가 바뀌어도 요소가 비율을 유지하도록 합니다. width: 100%와 함께 사용하면 동영상 컨테이너가 부모 요소를 채우면서 JavaScript나 백분율 기반 패딩 기법 없이 항상 16:9 비율을 유지합니다.

내재적 디자인은 CSS의 논리적 속성(inline-size, block-size, margin-inline)과 함께 사용하면 가로 쓰기 모드와 세로 쓰기 모드 모두에서 작동하는 레이아웃을 만들 수 있습니다. 내재적 크기 지정은 쓰기 방향에 맞춰 자동으로 조정됩니다.

고정 레이아웃: width: 300px — 콘텐츠와 관계없이 항상 300px입니다. 내재적 레이아웃: width: fit-content — 제약 조건 내에서 콘텐츠만큼 넓어집니다. 고정 레이아웃은 조정하려면 중단점이 필요하지만, 내재적 레이아웃은 콘텐츠와 컨텍스트에 따라 스스로 조정됩니다.

내재적 디자인은 콘텐츠의 크기가 자연스럽게 달라질 때 가장 강력합니다. 크기와 콘텐츠가 정해져 있고 일정한데 내재적 크기 지정을 강제하면 이점 없이 복잡성만 커집니다. 고정된 UI 장식 요소(탐색 메뉴, 도구 모음)에는 명시적 크기를 사용하고, 콘텐츠 영역에는 내재적 크기 지정을 사용하십시오.

grid-template-columns에서 auto-fit은 auto-fill과 어떻게 다르게 동작하나요?

내재적 디자인은 CSS 크기 지정 키워드(min-content, max-content, fit-content), auto-fit과 함께 사용하는 minmax(), 유동적인 크기 조절을 위한 clamp(), 그리고 aspect-ratio를 사용하여 뷰포트 중단점이 아니라 콘텐츠 크기에 따라 움직이는 레이아웃을 만듭니다. 그 결과 CSS와 미디어 쿼리를 줄이면서도 자연스럽게 반응하는 레이아웃을 구현할 수 있습니다.