21.07.09

미디어 쿼리
브라우저 폭이 달라질대 화면이 바뀌는 퀴리

미디어퀴리는 width값의 크기로 우리가 어디서 웹을 접속했는지 알수있음

320px ~ 768px미만 : 스마트폰
768px ~ 1024px미만 : 태블릿
1024px이상 : pc

^
|
위에값 지정시
@media () and () {

}
사용

ex)

브라우저의 사이즈가 특정 크기만큼 작아지면 안에있는 코드로 대체됨

주의점

미디어퀴리 안에는 백그라운드 쿼리가 설정이 되어있지 않음
하지만 브라우저 폭을 줄였을때 배경색이 피시버전 백그라운드 색을 상속받아 핑크로 나오게됨

그리고 미디어 퀴리 사용시 head안에 meta name="viewport" content="width=device-width, initial-scale=1.0"> 적어줘야함

모바일과 피씨버전의 이미지나 글이 다를경아 display : none; 사용해주기

---

잘해왓다고 생각햇느ㄴ데 오늘 아파서 그런가 눈에 잘안들어옴
알겠는데 모르겠음
ㅘ ㅠㅠㅠㅠ
내일 다시 들으면서 찬찬히 실습하고 공부하기