미디어 쿼리 기초

화면 크기에 따라 다른 스타일을 주고 싶을 땐 @media를 씁니다. @media (max-width: 600px) { ... }는 화면 너비가 600px 이하일 때만 안의 CSS를 적용합니다.

<style>
  .box {
    color: black;
  }
  @media (max-width: 480px) {
    .box {
      color: red;
    }
  }
</style>

이 레슨의 편집 화면은 폭이 고정돼 있어 실제로 줄어드는 모습을 보여주긴 어렵습니다. 그래서 규칙이 올바른 형태로 존재하는지를 확인합니다.