미디어 쿼리는 단말기의 유형, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 사용. (반응형 웹)
미디어 쿼리를 사용할 땐 뷰포트값을 필수로 작성해야 함.
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
</head>외부선언 - head 안에 작성
- 가장 많이 사용하는 방법
ex) 가로값이 768px 이상일 때 적용되는 스타일
<head>
<link rel="stylesheet" media="(min-width:768px)" href="tablet.css">
</head>내부선언 - style 안에 작성
ex) 가로값이 768px-1280px일 때 적용되는 스타일
<style>
@media all and (min-width:768px) and (max-width:1280px){ 스타일 작성 }
</style>(min-width) 작성 시, 즉 모바일 우선 작성 시 작은 값을 먼저 연결.
<head> <link rel="stylesheet" href="mobile.css"> <link rel="stylesheet" media="(min-width:768px)" href="tablet.css"> <link rel="stylesheet" media="(min-width:1280px)" href="pc.css"> <head>
저녁놀 마을 사람