• CSS의 미디어 쿼리란, 사용자의 다양한 기기 넓이에 따라서 스타일을 작성할 수 있는 문법을 의미한다.
• 반응형 웹을 제작할때 필수적으로 알아야 한다.

기본 문법

@media (기기) and (조건) {
	/* 조건에 일치할때 지정할 스타일들 */
}

@media (기기) and (조건) and (조건) {
	/* 위 조건에 모두 해당할때 지정할 스타일들 */
}

• 기기 란에는 all, screen, print 등을 작성할 수 있다.
  • 기기를 안적을경우 기본적으로 all이 들어간다.
  • print 속성: 웹 문서를 프린터로 출력시에 대한 속성
  • 대부분의 경우에는 screen만 사용됨
• 조건이 여러개일경우 (조건) and (조건) 으로 작성해주면 된다.
• 조건란에서는 대표적으로 화면의 최대, 최소 크기 만족 여부를 나타내는 min-width, max-width를 많이 사용한다.

미디어 쿼리 예제

• 768px 이하의 기기(태블릿 정도) 에서 특정 요소의 font-size를 14px로 지정

.text1 {
	font-size: 18px;

	@media (max-width: 768px) {
		font-size: 14px;
	}
}

• 1024px 이상의 기기(PC 최소길이 정도)에서 특정 요소를 숨김 처리

.element1 {
	@media (min-width: 1024px) {
		display: none;
	}
}

• 768px 이상, 1024px 이하의 기기에서 배경색을 빨간색으로 변경

.element1 {
	background-color: blue;

	@media (min-width: 768px) and (max-width: 1024px) {
		background-color: red;
	}
}

이외의 다양한 미디어 쿼리 예제들

https://blog.naver.com/hj_kim97/222440081148