미디어 쿼리

미디어 쿼리는 CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS스타일을 사용하도록 해줍니다.

• 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라집니다.
• 즉 PC나 태블릿,스마트폰의 웹 브라우저 화면 크기에 따라 사이트 레이아웃이 바뀌는 것입니다.
• 이렇게 사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법을 미디어 쿼리라고 합니다.

미디어 쿼리 구문

미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 줍니다.

• 기본형 @media [only | not ] 미디어 유형 [and 조건]*[and조건]
• 미디워 쿼리 구문은 <style>와 <style>사이에 사용하며 대/소문자를 구별하지 않습니다.
• 기본적으로 미디어 유형이 지정되어야 하고 필요할 경우, and연산자로 조건을 적용합니다.
• 예를 들어 다음 소스는 미디어 유형이 'screen'이면서 최소 너비가'200px'이면서 최대 너비가 '360px'일 경우에 적용할 CSS를 정의하는 구문입니다.

@media screen and (min-width:200px) and(max-width:360px){}

연산자	설명
and	앞의 소스처럼 조건을 계속 추가할 수 있스빈다.
,(쉼표)	동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 이용해 추가합니다.
only	미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 합니다.이 키워드를 사용하면 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다.
not	not 다음에 저장하는 미디어 유형을 제외합니다. 예를들어 'not tv'라고 지정한다면 TV를 제외한 미디어 유형에만 적용합니다.

미디어 유형의 종류

미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하기 때문에 @media 속성 다음에 미디어 유형을 알려주어야 합니다.

미디어 유형	사용 가능한 미디어
all	모든 미디어 유형
print	인쇄 장치
screen	컴퓨터 스크린(스마트폰 스크린 포함)
tv	음성과 영상이 동시 출력되는 TV
aural	음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)
braille	점자 표시 장치
handled	패드처럼 손에 들고 다니느 장치
projectioin	프로젝터
tty	디스플레이 기능이 제한된 장치(px단위를 사용할수 없음)
embossed	점자 프린터

화면 너비에 따라 배경이미지 바꾸기
문서를 웹브라우저를 불러와 브라우저 차의 너비를 조절하거나 크롬 개발자 도구의 디바이스 모드에서 확인하면 너비 값이1024px 일 때, 678px일때,320px일떄, 그리고 기타 값일 때 문서 배경이미지가 어떻게 달라지는지 알 수 있습니다.

<style>
	body {
		background: url(images/bg0.jpg) no-repeat fixed;
		background-size: cover;
	}
	@media screen and (max-width:1024px) {
		body {
			background: url(images/bg1.jpg) no-repeat fixed;
			background-size: cover;
		}
	}
	@media screen and (max-width:768px) {
		body {
			background: url(images/bg2.jpg) no-repeat fixed;
			background-size:cover;
		}
	}
	@media screen and (max-width:320px) {
		body {
			background: url(images/bg3.jpg) no-repeat fixed;
			background-size: cover;
		}
	}
</style>

미디어 쿼리 적용하기

미디어 쿼리는 웹 문서 안에서 @media 구문 다음에 조건에 맞는 CSS규칙을 직접 추가해 구현할 수도 있고 각 미디어 조건에 맞는 별도의 CSS 파일을 만들어 <link>태그로 연결해 사용할 수도 있습니다.

외부 CSS파일 연결하기

<link> 태그 사용하기

• 외부 스타일 시트 파일을 연결할 때 <link>태그를 이용하는 방법을 가장 많이 사용합니다.

• 기본형 <link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로>

• 예를들어 'css'폴더에 인쇄용 스타일 시트print.css를 만들어 놨다면
  <link rel="stylesheet" media="print" href="css/print.css">

• 화면 너비가 768px 이하일 떄 적용할 태블릿용 스타일 시트 파일을 만들어 놓았다면 조건을 좀 더추가해 다음과 같이 작성할 수도 있습니다.
  <link rel="stylesheet" media="screen and(max-width:768px)" href="css/tablet.css">

@import 구문 사용하기

• 외부 CSS파일을 연결할 때 <link>태그 대신 @import구문을 사용할 수도 있습니다.
• 예를 들어 태블릿PC에 맞는 스타일 시트tablet.css를 만들어 두었고 너비가 321px이상이고 768px이하일 때 적용하고 싶다면
  @import url("css/tablet.css") only screen and(min-width:321px) and (max-width:768px);