css 반응형 웹 대응 - 미디어 쿼리

body에 onresize가 없는데 어떻게 작동하나 궁금해서 찾아보니

css에 이상한게 발견!

 

@media not|only mediatype and (mediafeature and|or|not mediafeature) {   CSS-Code; }

[링크 : https://www.w3schools.com/cssref/css3_pr_mediaquery.php]

 

폭이 1000px 이하일 때 적용

@media (max-width: 1000px) {     body {         background: gold;     } } min-width를 사용하는 경우 스마트폰 등 가장 작은 사이즈에서의 레이아웃을 기본으로 하고, 점차 확장되어가는 형태로 CSS를 작성합니다. max-width를 사용하는 경우 데스크탑용의 가장 큰 화면 사이즈의 레이아웃을 기본으로 하고, 점차 축소하는 형태로 CSS를 작성합니다

[링크 : https://studiomeal.com/archives/1004]

[링크 : https://www.daleseo.com/css-media-queries/]

[링크 : https://log.designichthus.com/11]