화면 조건에 따라 필요한 스타일만 변경합니다.
@media는 viewport 폭, 입력 방식, 색상 선호, 동작 감소 같은 미디어 특성을 검사합니다. 기본 스타일을 작은 화면에 두고 공간이 생길 때 확장하는 mobile-first 방식이 이해하기 쉽습니다.
이번 예제의 출발점은 @media (min-width:600px) { ... }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 미리보기 폭을 바꾸고 breakpoint를 420px로 수정하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
기기 이름별 breakpoint를 만들기보다 콘텐츠가 깨지는 지점을 기준으로 정하세요.
직접 바꿔보세요미리보기 폭을 바꾸고 breakpoint를 420px로 수정하세요.