브라우저 크기 말고 '박스 크기'에 반응하세요: @container와 :has()의 파괴력

웹 디자인의 패러다임이 변하고 있습니다. 지금까지 우리는 브라우저 창의 너비(Viewport)에 따라 레이아웃을 바꾸는 Media Query에 의존해 왔습니다. 하지만 컴포넌트 중심의 개발 시대인 2026년, 이제 컴포넌트는 자신이 '어디에' 위치하든 그 '공간'에 맞춰 스스로를 변화시켜야 합니다.

오늘 소개할 @container와 :has()는 CSS 역사상 가장 혁신적인 변화이자, 자바스크립트 의존도를 획기적으로 낮춰줄 강력한 도구입니다.

---

1. 컴포넌트의 독립 선언: @container 쿼리 📦

Media Query의 치명적인 단점은 "컴포넌트가 놓인 맥락"을 모른다는 것입니다. 예를 들어, 똑같은 '카드 컴포넌트'가 넓은 메인 화면에 있을 때와 좁은 사이드바에 있을 때 각각 다른 모양을 가져야 한다면 어떻게 했을까요? 아마 별도의 클래스를 부여하거나 JS로 너비를 계산했을 겁니다.

✅ CSS만으로 해결하는 방법 (After)

@container를 사용하면 부모 요소의 크기에 따라 자식의 스타일을 제어할 수 있습니다.

/ 1. 부모 요소를 컨테이너로 지정 /
.card-container {
  container-type: inline-size;
}
/ 2. 컨테이너 크기에 따라 자식 스타일 변경 /
.card {
  display: flex;
  flex-direction: column; / 기본은 세로형 /
}
@container (min-width: 400px) {
  .card {
    flex-direction: row; / 부모가 400px 이상이면 가로형으로 변신! /
    gap: 20px;
  }
}
css

💡 왜 혁명적인가요?

이제 카드는 브라우저 크기가 아니라, 자신이 담긴 박스의 크기에 반응합니다. 사이드바에 넣으면 자동으로 세로형이 되고, 메인 콘텐츠 영역에 넣으면 가로형이 됩니다. 진정한 의미의 '재사용 가능한 컴포넌트'가 완성되는 것이죠.

---

2. CSS의 숙원 사업 해결: :has() 선택자 🎯

오랫동안 CSS 개발자들은 "자식의 상태에 따라 부모의 스타일을 바꿀 수 없을까?"라고 고민해 왔습니다. 이전에는 이를 위해 복잡한 JS classList.add 로직이 필요했습니다.

✅ 부모 선택자의 등장

:has()는 특정 요소를 포함하고 있는 부모를 선택합니다.

/ 체크박스가 체크된 카드 부모의 배경색 변경 /
.card:has(input[type="checkbox"]:checked) {
  background-color: #f0f9ff;
  border: 2px solid #3b82f6;
}
/ 이미지가 없는 카드만 골라서 패딩 조절 /
.card:not(:has(img)) {
  padding: 40px;
  text-align: center;
}
css

---

3. 실무에서의 파괴력: JS 없는 인터랙티브 UI 🚀

이 두 문법의 조합은 복잡한 UI 로직을 CSS만으로 옮겨옵니다.

1. 폼 유효성 검사: 입력창에 에러가 있을 때(:invalid) 폼 전체의 테두리를 빨갛게 바꾸는 것을 CSS form:has(input:invalid) 한 줄로 처리할 수 있습니다.
2. 다크모드 토글: 다크모드 스위치가 체크되었을 때 상위 레이아웃을 바꾸는 것도 더 이상 고차원적인 상태 관리 라이브러리가 필요 없습니다.
3. 복잡한 그리드: 그리드 아이템 중 특정 요소가 강조(active)되었을 때 주변 요소들의 크기를 조절하는 등, 시각적 계층 구조를 훨씬 유연하게 짤 수 있습니다.

---

4. 결론: "생각의 틀을 깨세요" 🏆

2026년의 현대적인 웹 개발은 "브라우저 너비"라는 고정관념에서 벗어나는 것부터 시작합니다.

• 컴포넌트에게 자율성을 주려면 @container를 쓰세요.
• 요소 간의 관계(부모-자식)를 코드로 표현하려면 :has()를 쓰세요.

이 두 가지 도구만 제대로 활용해도 여러분의 CSS 파일은 절반으로 줄어들고, 유지보수는 두 배로 쉬워질 것입니다.