미디어 쿼리(media query)

웹 사이트에 접속할 때 다양한 디바이스를 통해 접속을 할 수 있다. (휴대폰, 태블릿, 데스크탑, 노트북, 스마트 워치 등)

각 디바이스마다 화면의 크기가 다른데 이렇게 다양한 크기를 가진 모든 디바이스를 모두 같은 UI로 웹사이트를 표현한다면 굉장히 비효율적일 것이다. 

그래서 반응형 웹 디자인은 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일을 적용해 주어야 하는데 CSS의 미디어 쿼리를 이용해 각 디바이스의 크기에 맞는 최적의 UI들을 따로 설정 해 줄 수 있다. (다양한 화면 사이즈에서도 똑같은 유저 경험을 제공해야하기 때문에 중요)

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

기본 설정 해둔 미디어쿼리 예시 html과 scss

 

브라우저에서 보이는 화면

@media (max-width : 600px) {
// 화면 너비가 600px 이하인 경우에만 적용되는 스타일 
	.cellphone{
    	color : red;
    }
}

@media (min-width : 600px) and (max-width : 992px) {
// 화면 너비가 600px 이상, 992px 이하인 경우에만 적용되는 스타일 
	.cellphone{
    	color : red;
    }
}

 

미디어 쿼리 css 적용

브라우저창에서의 결과

미디어 쿼리 다른 설정 방법

뷰포트가 가로사이즈가 길 때와 세로사이즈가 더 길 때의 브라우저 결과 창

프린트 하는 경우의 미디어 쿼리

기존 화면 > 인쇄를 눌렀을 경우 > 인쇄창에서 보이는 미디어쿼리 적용된 모습

변경하는 기준점을 모르겠을 땐 구글링으로 검색해 보는 방법도 있다.

media query break points