• 사용자의 장치 유형 또는 화면 해상도, 브라우저 뷰포트 등과 같은 특성에 따라 다른 CSS 스타일을 적용하도록 도와주는 규격
• HTML 요소에 media 특성을 사용하여 특정 매체만 가리킬 때
• CSS에서 @media와 @import 를 사용해 특정 조건에 따라 적용할 때

기본구조

@media (조건) {
		규칙
}

/* @import는 다른 스타일시트에서 스타일 규칙을 가져올 때 사용 */
/* @import는 문서 최상단에 위치해야 함 */

ex.1
@import url("파일명");

ex.2
@import '파일명';

/* 화면크기가 1920px 이하일 때 배경색은 회색이 적용되는 미디어 쿼리 */

@media (max-width: 1920px) {
	body {
		background-color: gray;
	}
}

/* 화면크기가 800px 이하일 때 배경색은 회색이 적용되는 미디어 쿼리 */

@media (max-width: 800px) {
	body {
		background-color: white;
	}
}

<aside> 💡 반응형 디자인(Responsive Design)이란? 화면 해상도에 따라 HTML과 CSS를 자동으로 맞춰서 보여주는 기능 하나의 웹 사이트에서 접속하는 모든 미디어 타입의 화면 크기와 해상도 등 특징에 따라 좋은 사용성을 보장하며 잘 렌더링 되는 웹 페이지를 만드는 디자인 접근 방식 (멀티 디바이스 웹을 위한 디자인 방법)

반응형 웹(Responsive Web)이란? 웹 사이트에 접속하는 기기 해상도에 따라서 HTML과 CSS가 바뀌는 웹

</aside>