Media Query

기능

• 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 css를 적용할 수 있는 방법
• 반응형 웹 디자인에서 사용될 뿐만 아니라, 사용자가 실행 중인 환경에 대한 여러 내용들을 탐지하는 데도 사용 가능
  ex) 마우스가 아닌 터치스크린을 사용하는지 등

기본 구문

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

미디어 유형

• all: 미디어 유형을 쓰지 않았을 경우에도 적용
• print: 페이지가 인쇄된 경우 (브라우저에 로드될 때는 적용X)
• screen: 웹

반응형 분기점

• 기기들의 뷰포트와 깔끔히 일치하도록 디자인이 가능했던 반응형 디자인 초창기와 다르게, 현재는 디바이스의 크기가 너무 다양함
• 모든 디자인마다 기기의 특정 크기게 맞추는 방법보다는, 콘텐츠가 어떤 식으로든 깨지기 시작하는 크기에서 디자인을 변경하는 방법이 합리적
• 이 때 미디어 쿼리가 도입되는 지점을 breakpoints 라고 함

예시코드

@media screen and (max-width: 600px) {
	.box2 {
    	background-color: brown;
        flex-direction: column;
	}
    
    .box5 {
    	display: none;
    }
}

@media screen and (min-width: 601px) and (max-width: 1200px) {
	.box2 {
    	background-color: green;
	}
}

레퍼런스. mdn!
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries