미디어 쿼리(Media Query)

쉬운 설명

PC에서는 두 칸으로 보이던 목록을 좁은 화면에서는 한 칸으로 바꾸고 싶을 때 사용할 수 있어요. CSS의 @media 안에 조건과 스타일을 적으면 브라우저가 조건에 맞을 때 그 스타일을 적용해요. 화면 너비뿐 아니라 사용자의 모션 줄이기 설정 같은 조건도 다룰 수 있어요. 기종 이름으로 휴대전화를 알아내는 기능은 아니에요.

이런 상황에서 만나요

AI가 만든 스터디 카드 두 개가 휴대전화 화면에서 너무 좁게 보여요. 일정 너비 이하에서만 카드를 한 줄에 하나씩 배치하려는 상황이에요.

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
}

“브라우저 너비가 600px 이하일 때 목록을 한 열로 바꿔 줘”처럼 조건과 결과를 함께 요청해 보세요. 적용 뒤에는 기준 너비의 바로 아래와 위에서도 확인해요. 600px은 이 예시의 선택이며 모든 사이트의 공통 기준은 아니에요.

헷갈리기 쉬운 점

미디어 쿼리를 쓰면 휴대전화에서만 적용되나요?

너비 조건을 썼다면 브라우저가 페이지를 표시하는 영역의 너비로 판단해요. PC 창을 좁혀도 조건에 맞을 수 있어요. 기기 종류를 기준으로 설명하기보다 어느 너비에서 배치가 바뀌는지 확인하는 편이 정확해요.

조건에 맞더라도 다른 CSS 규칙이 같은 속성을 덮어쓸 수 있어요. 조건의 일치 여부와 최종 적용된 스타일을 함께 확인하세요.

왜 알아야 할까요?

“모바일에서 이상해요” 대신 어느 너비에서 어떤 배치가 필요한지 AI에게 말할 수 있어요. 특정 화면에서만 생기는 문제의 수정 범위도 좁힐 수 있어요.

참고 자료

• MDN · 미디어 쿼리 사용