Media Query

• 디바이스 기기, 종류에 따라 다양한 화면을 조건에 맞게 표현할 수 있게 해주는 기술.
• CSS2에서 처음 소개되었고 CSS3에서 확장된 버전으로 사용됨.

CSS2 & CSS3 media query 차이점

• CSS2에서는 디바이스 기기를 기준으로 적용했지만 CSS3는 화면 크기, 방향을 기준으로 유연하게 적용 가능.

Media Type

all

• 모든 기기에 적용

print

• 프린터에 적용

sreen

• 컴퓨터, 태블릿, 스마트폰 화면에 적용

speech

• 판독기에 사용

사용법

./style.css
@media screen (조건) { 변경할 내용 };

• 웹에서 주로 사용되는 문법

@media screen (max-width: 768px) {
	.container {
    	width: 500px;
    };
};

• 화면너비 768px 이하로는 .container클래스의 너비를 500px로 적용.

@media screen (min-width: 400px) {
	.container {
    	width: 500px;
    };
};

• 화면너비 400px이 넘으면 .container 너비를 500px로 적용.

마치며

• 사용하는 방법은 @media 미디어 타입 작성하고 사용하면 되서 크게 어려울 건 없음. 그 안에 그냥 CSS작성하는 것처럼 하면 간단한 반응형 웹 제작 끝.