레이아웃을 단순화하는 최신 CSS 함수와 기능(clamp, aspect-ratio, subgrid)에는 어떤 것들이 있나요?

Question

Accepted Answer

최신 CSS는 미디어 쿼리와 JavaScript 편법의 카테고리 전체를 대체하는 함수와 속성을 추가했습니다. 대표적인 것들:

## clamp() — 유동적이면서 경계가 있는 값

```css
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
/*               │       │     └── 최대 (3rem보다 절대 크지 않음) */
/*               │       └──────── 선호 (뷰포트에 따라 비례) */
/*               └──────────────── 최소 (1.5rem보다 절대 작지 않음) */
```

`clamp(min, preferred, max)`는 뷰포트에 따라 부드럽게 비례하지만 경계 안에 머무는 **유동 타이포그래피/spacing**을 제공합니다 — 여러 breakpoint 분량의 `font-size` 미디어 쿼리를 한 줄로 대체합니다.

## aspect-ratio — 비율 유지

```css
.video { aspect-ratio: 16 / 9; width: 100%; } /* 16:9 유지를 위해 height 자동 계산 */
.avatar { aspect-ratio: 1; }                    /* 어떤 너비에서도 완벽한 정사각형 */
```

이것 이전에는 반응형 16:9 박스를 유지하려면 악명 높은 `padding-bottom: 56.25%` 편법이 필요했습니다. 이제는 한 줄 선언입니다 — 그리고 이미지가 로드되기 전에 공간을 확보합니다(CLS에 좋음).

## min() / max()

```css
.container { width: min(90%, 1200px); } /* 더 작은 쪽 → 유동적이지만 상한 있음 */
.box { padding: max(1rem, 3vw); }       /* 더 큰 쪽 → 최소 하한 */
```

`min()`/`max()`는 값들 중 더 작은/큰 쪽을 골라, 미디어 쿼리 없이 속성을 반응형으로 만듭니다(예: "90% 너비, 하지만 절대 1200px 초과 안 함").

## subgrid — 중첩된 grid 정렬

```css
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
```

`subgrid`는 중첩된 grid가 **부모의 트랙 선을 상속**하게 해주어, 별개의 카드들에 걸친 아이템(제목, 본문, 버튼)이 공유된 행에서 완벽하게 정렬됩니다 — 이전에는 고정 높이 없이는 불가능했습니다.

## 어디서나 gap & logical 도우미

```css
.flex { display: flex; gap: 1rem; }   /* gap이 이제 grid뿐 아니라 flexbox에서도 동작 */
```

## 왜 중요한가

이 기능들은 오랜 편법을 제거합니다: `clamp()`/`min()`/`max()`는 유동 크기 조절을 위한 미디어 쿼리 더미를 대체하고, `aspect-ratio`는 padding 편법을 대체하며 레이아웃 시프트를 방지하고, `subgrid`는 컴포넌트 간 정렬을 해결합니다.

이들은 반응형이고 비례하는 레이아웃을 극적으로 더 단순하고 견고하게 만듭니다 — 최신 CSS는 예전에 JS나 부서지기 쉬운 트릭이 필요했던 일을 선언적으로 해냅니다.