CSS Modern Layout — Container Queries·Subgrid·anchor positioning

핵심 요약

CSS는 2024~2025년 사이에 큰 변화. Container Queries로 반응형이 더 정밀해졌고, Subgrid로 중첩 grid가 깔끔해졌고, Anchor positioning으로 dropdown·tooltip 구현이 혁명적으로 단순해졌다.

• Container Queries: Chrome 105+, Safari 16+, Firefox 110+ (2024 모두)
• Subgrid: 모든 메이저 브라우저 (2024)
• Anchor Positioning: Chrome 125+, Safari 18+ (2024)

1. Container Queries — 자식 컨테이너 기반 반응형

/* 기존 — 뷰포트 기반 */
@media (min-width: 768px) {
  .card { font-size: 18px; }
}

/* 모던 — 컨테이너 기반 */
.card-container {
  container-type: inline-size;
}
.card {
  font-size: 14px;
}
@container (min-width: 400px) {
  .card { font-size: 18px; }
}

/* 사이드바·메인·모달 어디든, 컨테이너 자체 폭에 따라 반응 */

2. Container Query Units

.card {
  /* 컨테이너 폭의 % */
  padding: 5cqw;  /* container query width */
  font-size: 4cqi;  /* container query inline */
  height: 30cqh;  /* container query height */
}

3. Container Type 선택

style queries (variable 기반)도 있으나 활용 빈도 낮음.

4. Subgrid — 중첩 그리드 정렬

/* 부모 grid */
.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

/* 자식 — 부모 grid를 그대로 사용 */
.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

/* 자식의 자식들이 부모 grid line에 정렬됨 */

이전엔 자식이 부모 grid에 영향 못 받음. Subgrid로 중첩 카드·테이블 자연스럽게.

5. Anchor Positioning — dropdown 혁명

/* HTML */
<button id="trigger">메뉴</button>
<div id="menu">...</div>

/* CSS */
#trigger {
  anchor-name: --trigger;
}
#menu {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(start);
  position-try: --shift-up, --shift-left;
}

/* fallback 위치 */
@position-try --shift-up {
  bottom: anchor(top);
  top: auto;
}
@position-try --shift-left {
  right: anchor(end);
  left: auto;
}

이전엔 JS로 화면 가장자리·overflow 계산. 이제 CSS만으로 자동 fallback.

6. Popover API + Anchor

<button popovertarget="menu">메뉴</button>
<div id="menu" popover>...</div>

/* CSS */
#menu {
  position-anchor: --trigger;
  top: anchor(bottom);
}

JS 0줄로 dropdown·tooltip·modal. 키보드 접근성·focus trap 자동.

7. has() 선택자

/* 자식이 input을 가진 form에 스타일 */
form:has(input:invalid) {
  border-color: red;
}

/* 형제 + 자식 조건 */
.card:has(.featured) + .card {
  margin-top: 20px;
}

jQuery·JS 없이 표현 가능. 모든 메이저 브라우저 지원.

8. nesting

.card {
  background: white;
  
  &:hover {
    background: gray;
  }
  
  .title {
    font-size: 18px;
    
    &.large {
      font-size: 24px;
    }
  }
  
  @media (min-width: 768px) {
    padding: 20px;
  }
}

SCSS 없이 native CSS로 nesting. preprocessor 의존도 감소.

9. CSS Variables 고급 활용

:root {
  --space-unit: 0.25rem;
  --space-1: calc(var(--space-unit) * 1);
  --space-2: calc(var(--space-unit) * 2);
  /* ... */
  
  /* light/dark 자동 */
  --bg: light-dark(white, #1a1a1a);
  --text: light-dark(#1a1a1a, white);
}

/* @scope — 컴포넌트 단위 격리 */
@scope (.card) to (.card-content) {
  h2 { color: var(--accent); }
  /* 이 h2는 .card 안 .card-content 바깥만 */
}

10. 실전 — 카드 레이아웃

/* Container query로 카드 자체 폭에 따라 layout 변경 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  container-type: inline-size;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  
  & img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    /* 폭 350px 이상에선 가로 layout */
  }
}

11. 실전 — Tooltip with Anchor

<button class="help-btn">
  ?
  <span class="tooltip" popover>도움말 텍스트</span>
</button>

/* CSS */
.help-btn {
  anchor-name: --help;
  
  &:hover .tooltip,
  &:focus .tooltip {
    display: block;
  }
}

.tooltip {
  position: absolute;
  position-anchor: --help;
  inset-area: top;  /* 위쪽 자동 배치 */
  position-try: --bottom-fallback;
}

@position-try --bottom-fallback {
  inset-area: bottom;
}

12. View Transitions + Layout

/* 카드 클릭 시 상세로 morph */
.card-image { view-transition-name: hero; }
.detail-image { view-transition-name: hero; }

@view-transition { navigation: auto; }

13. 폴백 전략

/* @supports로 안전하게 */
@supports (container-type: inline-size) {
  .card-container { container-type: inline-size; }
}
@supports not (container-type: inline-size) {
  /* 폴백 — 미디어쿼리 */
  @media (min-width: 768px) { ... }
}

14. 실측 — 코드량 감소

자주 묻는 질문

구버전 브라우저 지원?2024년 이후 대부분 브라우저는 모두 지원. iOS 17 이전·Edge legacy만 폴백 필요.

Tailwind와 통합?Tailwind v4가 container queries·has() 모두 지원. 클래스로 자연스럽게 사용.

Anchor Positioning이 정말 안정적?Chrome 125+, Safari 18+ 안정. Firefox는 progressive enhancement로 폴백 필요.