📖 한국경영교육연구소 AI ACADEMY · 용어·통역 사전
반응형 / 미디어쿼리 (media query)
💬 쉬운 뜻
화면 너비에 따라 디자인을 다르게 적용하는 장치예요. 넓은 PC에선 3칸으로 보여주고, 좁은 휴대폰에선 1칸으로 자동으로 바뀌게 하는 것이 미디어쿼리이고, 이렇게 화면 크기에 맞춰 변하는 디자인을 '반응형'이라고 불러요. 늘었다 줄었다 하는 고무줄 옷처럼, 큰 화면에도 작은 화면에도 알아서 맞춰지는 거예요.
⌨️ 이럴 땐 이렇게 입력
- 휴대폰에서 글자랑 카드가 잘리거나 한 줄로 안 들어와. 모바일에서도 안 깨지게 반응형으로 만들어줘.
- 이 카드 목록을 PC에선 3칸, 태블릿에선 2칸, 휴대폰에선 1칸으로 보이게 미디어쿼리로 바꿔줘.
🔮 AI가 이렇게 답하면 = 이런 뜻
AI가 "미디어쿼리를 추가해 모바일에서는 1열로, 데스크톱에서는 여러 열로 보이게 했습니다"라고 답하면 = 화면 크기마다 다른 디자인이 자동으로 적용되도록 반응형 처리를 했다는 뜻이에요.
➡️ 다음엔 이렇게
휴대폰으로 직접 열어보거나 브라우저 창을 좁게 줄여 확인하고, 여전히 글자가 잘리거나 옆으로 스크롤이 생기면 "○○px 이하에서 △△가 화면 밖으로 넘쳐요, 그 구간 미디어쿼리를 고쳐줘"라고 화면 폭과 깨지는 요소를 콕 집어 다시 시키세요.
한국경영교육연구소 · AI ACADEMY — 외부강사 김지백 · 시연 교실 홈