미디어 쿼리

개념 이해하기

@media는 viewport 폭, 입력 방식, 색상 선호, 동작 감소 같은 미디어 특성을 검사합니다. 기본 스타일을 작은 화면에 두고 공간이 생길 때 확장하는 mobile-first 방식이 이해하기 쉽습니다.

기본 규칙은 좁은 화면을 기준으로 .stage를 한 열로 두고 A부터 D까지를 연한 상자로 세로로 쌓습니다. 화면 너비가 520px 이상이 되면 @media (min-width: 520px) 안의 규칙이 더해져 열이 둘로 늘고 상자도 초록 배경에 흰 글자로 바뀝니다. 미디어 쿼리는 명시도를 올리지 않으므로, 안쪽 규칙이 이기는 이유는 같은 선택자의 바깥 규칙보다 뒤에 적혀 있기 때문입니다.

min-width: 520px는 520px를 포함하므로 다른 규칙에 max-width: 520px를 쓰면 정확히 520px에서 두 규칙이 함께 걸립니다. width < 520px처럼 비교 연산자를 쓰는 범위 문법으로 적으면 경계를 겹치지 않게 나눌 수 있습니다.