[CSS] Media Query - 미디어 쿼리의 예시와 활용

 

Media Query 란?

 

디바이스의 유형이나, 어떤 특성과 수치(화면 해상도, 뷰포트 너비)에 따라

웹과 앱의 스타일을 유동적으로 변경하고 싶을 때 사용 

 

 

사용방법

미디어쿼리 사용방법에는 크게 2가지가 있습니다. 하기 내용과 같이 사용을 원하는 페이지 및 조건에 의해 활용을 달리할 수 있습니다.

 

1. Link 태그를 통해 사용

<link rel="stylesheet" media="screen and (max-width: 360px)" href="style.css">

Link 태그 내 media 내 조건을 삽입하여 성립 시, css 파일이 실행이 된다.

 

설정한 조건과 같이 최대 360px 까지의 가로 사이즈 내에서만 작동되는 것을 확인할 수 있다.

[최대 사이즈 이탈] 360px 이상 사이즈

360px 이하 사이즈

 

2. CSS 코드를 통해 직접 적용 방식

@media only screen and (max-width: 700px) {
  * { background-color: pink;}
}

@media only screen and (max-width: 500px) {
  * { background-color: red;}
}

@media only screen and (max-width: 360px) {
  * { background-color: blue;}
}

상기 예시 코드의 의미를 풀어보면, 

가로사이즈 최대 360px 까지는 Blue 색상, 최대 500px 까지는 Red 색상, 최대 700px 까지는 Pink 색상으로 반영이다.

 

 

 

여기서 중요 포인트

 

코드는 항상 하향식이기 때문에, 조건의 가로사이즈는 큰 사이즈부터 작은 사이즈로 배치하여 반영하여야 정상적으로 코드가 반영이 된다. 

 

@media only screen and (max-width: 360px) {
  * { background-color: blue;}
}

@media only screen and (max-width: 700px) {
  * { background-color: pink;}
}

@media only screen and (max-width: 500px) {
  * { background-color: red;}
}

상기 예시 코드의 의미를 풀어보면,

가로사이즈 최대 500px 까지는 Red 색상, 최대 700px 까지는 Pink 색상, 최대 360px 까지는 Blue 색상으로 반영이다.

 

 

만약 조건의 가로사이즈 크기 배치가 제대로 이루어지지 않는다면, 정상적으로 동작하지 못하게 된다.

 

제일 첫번째 최대 360px의 조건이 아래 700px과 500px의 조건에 의해 무시가 되기 때문이다.

 

 

다양한 미디어쿼리 형태

@media screen and (orientation: portrait) {
/* Portrait - 세로모드 */
}

@media screen and (orientation: landscape) {
/* Landscape - 가로모드 */
}

@media (min-width: 30em) and (orientation: landscape) { ... }

@media not all and (monochrome) { ... }

 

참고 사이트

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

Media Queries in CSS. How do They Work? • Silo Creativo