웹 기본

미디어 쿼리(Media Query)

미디어 쿼리(Media Query)는 화면 크기나 방향 같은 조건에 따라 다른 CSS 스타일을 적용하는 문법입니다.

쉬운 설명

화면 크기나 기기 특성에 따라 다른 CSS 스타일을 적용하는 조건문.

배경과 쓰임까지 이해하기

미디어 쿼리(Media Query)는 화면 크기나 방향에 따라 다른 CSS를 적용하는 조건문입니다. 예를 들어 작은 화면에서는 카드가 한 줄에 하나씩 보이고, 768px 이상에서는 두 개씩 보이도록 만들 수 있습니다.

반응형 웹페이지를 구현할 때 자주 사용하며 콘텐츠가 실제로 깨지는 지점을 기준으로 조건을 정하는 것이 좋습니다. 한마디로, 미디어 쿼리는 화면 조건에 따라 스타일을 바꾸는 CSS 기능입니다.

`@media (min-width: 768px)` 조건에서 카드 목록을 한 열에서 두 열로 바꿀 수 있습니다.

이런 거 할 때 나와요 같은 HTML을 유지하면서 모바일, 태블릿, 데스크톱에 맞는 레이아웃과 표현을 만들 수 있습니다.
이렇게 생겼어요 미디어 쿼리(Media Query)은(는) CSS, Responsive Web, Mobile Optimization 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
나오는 화면 예시 웹 기본 작업을 하다가 CSS, Responsive Web, Mobile Optimization를 확인하는 화면

기기 이름별 크기를 무작정 늘리기보다 콘텐츠가 실제로 깨지는 지점을 기준으로 breakpoint를 정하는 편이 좋습니다.

같은 HTML을 유지하면서 모바일, 태블릿, 데스크톱에 맞는 레이아웃과 표현을 만들 수 있습니다.

Checklist

현재 개념 미디어 쿼리(Media Query)