1. Media Queries vs Container Queries 개념 비교**

• 설명: 뷰포트(화면 전체)가 줄어들 때만 반응하는 미디어 쿼리와, 부모 컨테이너의 크기에 따라 개별적으로 반응하는 컨테이너 쿼리의 차이를 직관적으로 보여주는 다이어그램입니다.
• 이미지: [유효하지 않은 URL 삭제됨]

2. 실무 예시 (Card Component)**

• 설명: 똑같은 '카드 컴포넌트'가 메인 영역(넓은 공간)에 있을 때와 사이드바(좁은 공간)에 있을 때, 별도의 클래스 수정 없이 알아서 레이아웃이 변하는 모습입니다.
• 이미지: [유효하지 않은 URL 삭제됨]

---

아래 마크다운 박스를 복사해서 사용하세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# 아직도 뷰포트 기준으로 짜시나요? Container Queries로 반응형의 패러다임을 바꾸다

프론트엔드 개발자라면 누구나 한 번쯤 겪어봤을 상황입니다.

> "이 카드 컴포넌트, 모바일에서는 세로로 보이게 만들었는데요. 이걸 데스크톱 사이드바에 넣으니까 찌그러지네요? 사이드바 폭이 좁으니까 거기서도 모바일처럼 보여야 할 것 같아요."

과거의 우리는 이 문제를 해결하기 위해 덕지덕지 코드를 덧붙였습니다.
`class="card sidebar-card"` 처럼 별도의 클래스를 만들거나, `props.isSidebar`를 넘겨주거나, 심지어 JS로 부모의 너비를 계산하기도 했습니다.

왜냐하면 우리가 믿고 쓰던 **미디어 쿼리(`@media`)**는 오직 **'브라우저 창의 전체 크기(Viewport)'**만 바라보기 때문입니다.

하지만 2026년 현재, 우리는 더 이상 화면 전체 크기에 집착하지 않습니다. 컴포넌트 중심의 개발 시대에 맞는 진짜 반응형 도구, **Container Queries**가 표준이 되었기 때문입니다.

---

## 1. 미디어 쿼리(`@media`)의 한계

미디어 쿼리는 "페이지"를 만드는 시대에는 훌륭했습니다. 하지만 "컴포넌트"를 조립해서 페이지를 만드는 시대에는 맞지 않습니다.

**문제 상황:**
우리가 만든 `ProductCard` 컴포넌트가 있습니다.
* `@media (min-width: 1024px)`: 데스크톱에서는 가로 배치(Row)
* 그 외: 세로 배치(Column)

이 컴포넌트를 데스크톱 화면(`1920px`)의 **좁은 사이드바(`300px`)** 안에 넣으면 어떻게 될까요?
브라우저는 화면이 크다고 판단하여 **가로 배치**를 강제하고, 결국 레이아웃은 처참하게 깨집니다.

![Media Query vs Container Query Comparison](http://googleusercontent.com/image_collection/image_retrieval/6410408545839077241_0)
*(미디어 쿼리는 화면 전체를 보지만, 컨테이너 쿼리는 부모 공간을 봅니다)*

---

## 2. 해결사 등판: Container Queries (`@container`)

Container Queries는 브라우저 전체 크기가 아니라, **자신을 감싸고 있는 부모 요소(Container)의 크기**에 반응합니다. 즉, 컴포넌트가 **"내가 어디에 놓여있는지"**를 스스로 파악하고 스타일을 바꿉니다.

### 사용법은 간단합니다 (CSS 표준)

**Step 1. 부모에게 "너는 컨테이너야"라고 알려줍니다.**
```css
.card-wrapper {
  /* inline-size는 width를 기준으로 하겠다는 뜻입니다 */
  container-type: inline-size;
  container-name: card; /* 선택 사항 */
}

Step 2. 자식 컴포넌트에서 @media 대신 @container를 씁니다.

1
2
3
4
5
6
7
8
9
10
11
12
.card {
  display: flex;
  flex-direction: column; /* 기본은 모바일 스타일 (세로) */
}

/* 부모 컨테이너가 500px보다 크면 가로로 바꿈 */
@container (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
}

이제 이 .card 컴포넌트는 메인 화면(넓은 곳)에 두면 가로로 보이고, 사이드바(좁은 곳)에 두면 알아서 세로로 변합니다. 외부에서 별도의 props나 클래스를 주입할 필요가 전혀 없습니다. 진정한 의미의 '독립적인 컴포넌트'가 완성되는 것이죠.

---

3. 실무 활용: Tailwind CSS와 함께 쓰기

2026년의 프론트엔드 씬에서 Tailwind CSS는 빠질 수 없죠. Tailwind에서도 공식 플러그인(또는 v4 내장)을 통해 이를 매우 직관적으로 지원합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export function NewsCard() {
  return (
    // @container: 이 요소를 기준으로 자식들이 반응함
    <div className="@container border rounded-lg p-4">
      
      {/* @lg:flex-row -> 컨테이너 크기가 lg(32rem) 이상일 때만 row로 변경 */}
      {/* 화면 크기가 아니라, 이 카드가 놓인 공간이 기준입니다! */}
      <div className="flex flex-col @lg:flex-row gap-4">
        
        <img 
          src="/news.jpg" 
          alt="Thumbnail" 
          className="w-full @lg:w-1/3 h-48 object-cover rounded" 
        />
        
        <div className="flex-1">
          <h2 className="text-xl font-bold">브라우저의 진화</h2>
          {/* 공간이 좁으면 내용을 숨길 수도 있습니다 */}
          <p className="hidden @sm:block text-gray-600 mt-2">
            이제 미디어 쿼리의 시대는 갔습니다...
          </p>
        </div>

      </div>
    </div>
  );
}

위 코드를 보면 md:, lg: 같은 뷰포트 접두사 대신 @lg:, @sm: 같은 컨테이너 접두사를 사용하는 것을 볼 수 있습니다.

---

4. 반응형 디자인의 새로운 표준: "Context-Aware"

이제 우리는 디자이너와 소통할 때도 방식을 바꿔야 합니다.

• AS-IS: "모바일 시안, 태블릿 시안, 데스크톱 시안 주세요."
• TO-BE: "이 컴포넌트가 좁은 공간에 있을 때와 넓은 공간에 있을 때 시안을 주세요."

Container Queries는 단순한 CSS 기능 추가가 아닙니다. **재사용 가능한 컴포넌트(Reusable Component)**를 설계하는 방식 자체를 완성시켜주는 마지막 퍼즐 조각입니다.

혹시 아직도 window.innerWidth에 의존해 컴포넌트 스타일을 분기 처리하고 계신가요? 지금 바로 @container로 리팩토링해 보세요. 컴포넌트의 유연함이 달라집니다.

---

References

• MDN Web Docs: CSS Container Queries
• Google Chrome Developers: Container Queries are finally here
• Tailwind CSS Container Queries Plugin