미디어 쿼리 반응형

핵심 개념

@media (조건) { 스타일 }로 특정 화면 크기에서만 스타일을 적용합니다. max-width는 해당 크기 이하, min-width는 해당 크기 이상에서 적용됩니다. 모바일 퍼스트는 min-width 기준, 데스크탑 퍼스트는 max-width 기준으로 작성합니다. 브라우저 창 크기를 조절하며 스타일이 전환되는 것을 확인하십시오.

코드 분석

CSS3📋 코드 (2줄)

<style>.rwd{padding:16px;font-family:monospace;font-weight:bold;text-align:center;font-size:14px;transition:all 0.3s;}@media(max-width:500px){.rwd{background:#10b981;color:white;}.rwd::after{content:' [모바일 — 500px 이하]'}}@media(min-width:501px) and (max-width:800px){.rwd{background:#f59e0b;color:#080808;}.rwd::after{content:' [태블릿 — 501~800px]'}}@media(min-width:801px){.rwd{background:#22c55e;color:#080808;}.rwd::after{content:' [데스크탑 — 801px 이상]'}}</style>
<div class='rwd'>현재 화면 크기</div>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS '미디어 쿼리 반응형' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'미디어 쿼리 반응형'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS '미디어 쿼리 반응형' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'미디어 쿼리 반응형'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

미디어 쿼리 반응형은 이 3가지만 확실히 잡으세요

1.고정 픽셀로만 레이아웃을 잡으면 모바일에서 가로 스크롤이 생기거나 텍스트가 잘려서 사용이 불가능합니다

2.@media (max-width: 768px)처럼 조건을 걸어 뷰포트 크기별로 다른 스타일을 적용합니다

3.다음 챕터에서 요소를 숨기는 세 가지 방법의 차이를 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.23 — 질문하거나 답변을 확인하세요

→

진행도 23 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)