미디어 쿼리

CSS3부터는 미티어 타입을 개선하여 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 했다. 미디어 쿼리는 반응형 웹 디자인의 핵심이다. 브라우저 창의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다.

미디어 쿼리 적용법

head 태그 안에 !

<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">

<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
	/* 여기 css를 작성합니다. */
</style>

css 파일 혹은 태그 안에서 직접 미디어 쿼리 작성

미디어 쿼리 구문

@media 미디어 타입(조건(너비 및 높이)){
	//css 입력
}

@media screen(max-width: 400px){
	body{
    	color: red; 
    }
}

미디어 타입 종류

• all : 모든 미디어 타입
• print : 프린터
• screen : 컴퓨터 화면
• speech : 스크린 리더

조건(너비 및 높이)

반응형 디자인에 가장 많이 사용되는 기능 => 뷰포트 너비
min-width와 max-width 미디어 기능 활용해 조건을 작성한다.

뷰포트가 600px보다 좁은 경우 색을 빨간색으로 만든다.

	@media screen and(max- width:600px){
    	body{
        	color: red;
        }
    }

방향성

세로모드인지, 가로모드인지 검사할 때 orientation

장치가 가로방향인 경우, 색상 변경

 @media (orientation: landscape){
 	body{
    	color: rebeccapurple
    }
 }

복잡한 미디어 쿼리

• 미디어 쿼리를 결합하거나 !
• 쿼리 목록을 만들거나 !

논리곱 미디어 쿼리

두 조건 모두 만족할 때 적용

 @media screen and (min-width: 400px) and (orientation: landscape){
 	body{
    	color: red; 
    }
 }

논리합 미디어 쿼리

둘 중 하나 만족할 때 적용

 @media screen and (min-width: 600px), screen and(orientation: landscape){
 	body{
    	color: red; 
    }
 }

부정 미디어 쿼리

미디어 쿼리의 의미를 반대로 적용
이 경우, 방향이 세로인 경우에만 적용

 @media not all and (orientation: landscape){
 	body{
    	color: red; 
    }
 }