CSS - media query

정의

media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능이다.

---

기본 문법

@media (조건) {
    스타일 ~~~
}

---

예시

<div class="wide-bg-red">
  넓은 화면에서 배경을 red로
</div>

@media (min-width: 800px) {
  .wide-bg-red {
      /* 화면이 800px 이상이면 배경색이 red로 */
    background-color: red;
  }
}

• 적용 이미지