[CSS] 8. Media Query, 반응형 웹의 심장

1. 반응형 웹(Responsive web)

---

사용자의 환경, 디바이스의 크기에 따라 디스플레이를 변화시키는 것.

2. 사용방법

---

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

3. 주의할 점

---

• min-width : npx ⇒ npx 이상일 때 적용

• max-width: npx ⇒ npx 이하일 때 적용

• 케스케이딩을 주의해야 한다.

• 예를 들어 아래의 코드처럼 작성하면, 위에 적용한 lightgreen색은 무시되고, 600px 이하는 모두 배경색이 red가 된다.

• 즉, max-width 속성을 쓰려면 큰 화면부터 작성. min-width 속성을 쓰려면 작은 화면 속성부터 작성.

  @media screen and (max-width: 480px) {
    body {
      background-color: lightgreen;
    }
  }
  
  @media screen and (max-width: 600px) {
    body {
      background-color: red;
    }
  }

4. Bootstrap의 Breakpoints

---

https://getbootstrap.com/docs/5.2/layout/breakpoints/

• Bootstrap에서는 xs, sm, md, lg, xl 등으로 breakpoint를 제공한다.

• <div class="container-sm">100% wide until small breakpoint</div>

• 의 형식처럼 자체적으로 responsive한 div를 만들 수 있다.

Uploaded by N2T