CSS 반응형 디자인 기초

css 반응현 디자인이란?

  - 디스플레이의 크기에 따라 웹 페이지의 각 요소가 작동하게 만드는 것으로
  미디어 쿼리(media query)을 이용해 디스플레이 사이즈 마다 값을 설정해서 만든다.

사용하는 방법(새롭게 다 작성X 주어진 값에 제거하거나 추가 계념)

  @media (디스플레이 값 범위 설정) {
        해당하는 디스플레이 값의 css 설정
  }

---

ex)

  @media (max-width:800px) {
        div {display: none; }
  }

범위 정하는 방법

@media (max-width:800px) 안에 max-width:800px에 대해 알아보자!

1. max-width -> 디스플레이 넓이가 해당 값보다 이하 적용
2. min-width -> 디스플레이 넓이가 해당 값보다 이상 적용

※css는 밑에 있는 것이 우선 적용이니 범위가 작은 것을 밑에 놓는게 맞겠죠?