HTML & CSS - [CSS] Midia Query(미디어 쿼리 @media)

서론

반응형 웹이라는 말을 많이 들어보셨을 겁니다. 간단하게 반응형 웹이란 웹페이지를 보여주면 화면의 크기, 장비 등에 따라 웹페이지가 다르게 보이는 웹서비스들을 통칭하는 말입니다.

이미 다양한 웹 서비스에서 반응형 웹을 경험해 봤을 것입니다.

앞선 포스트들에서 웹페이지의 레이아웃을 제어하기 위한 여러 가지 요소, 속성, 사용방법 등을 배웠습니다. 이제 이 내용들을 가지고 반응형 웹을 만들려면 화면의 크기, 장비 등을 구분하여 다르게 제어하도록 CSS에서 명령해야 될 것입니다.

CSS에서 이러한 것을 가능하게 해주는 것이 Midia Query(미디어 쿼리)입니다.

 

본문에서는 이 미디어 쿼리에 대해 알아보고 몇 가지 예제들을 살펴보도록 하겠습니다.

 

@meida - 미디어 쿼리 사용하기

CSS에서 화면의 크기, 장비 등을 구분하여 각각의 다른 스타일을 적용하기 위해서 미디어 쿼리를 제공합니다.

@meida라고 작성하고 그 안에 스타일을 지정함으로써 각각의 다른 미디어에 따른 스타일을 적용할 수 있습니다.

@media (조건){
	/*스타일 코드*/
}

가장 기본적인 사용방법이며, 추가적으로 종류와, 연산자를 사용해서 미디어 쿼리를 사용할 수 있습니다.

웹페이지는 CSS의 미디어 쿼리가 참인 스타일을 적용하여 웹페이지를 브라우저에 보여주게 됩니다.

 

미디어 쿼리 사용 시 주의사항

본문에서는 미디어 쿼리의 범용적인 부분을 다룰 예정입니다.

다만 미디어 쿼리의 경우 계속해서 빠르게 발전하고 있습니다. 그래서 키워드나 사용방법이 새로 생기거나 변경이 될 수 있습니다. 또한 웹 브라우저마다 호환되는 범위가 다른 부분이 많습니다. 따라서 이런 부분들을 확인할 필요가 있습니다.

포스트 작성기준 2022년 5월 30일 기준 미디어 쿼리 Level 5의  문서를 참고 바랍니다.

 

Media Type - 미디어의 종류

우선 미디어의 종류에 따라 스타일을 적용할 수 있습니다. 

장치가 프린터인지, 스크린인지 등을 구분하는 미디어의 종류에 대해 알아보도록 합시다.

이름	설명
all	기본값으로 모든 장치에 적용됨(생략 가능)
print	프린터 장치에 적용
screen	화면에 적용 (컴퓨터 스크린,테블릿,스마트폰 등)

외에 여러 타입이 있지만 이전 버전의 타입 또는 삭제 예정이기 때문에 언급하지 않겠습니다.

/*모든 장치에 적용하기*/
@media {
	/*스타일*/
}
@media all{
	/*스타일*/
}

/*모든 화면 장치에 적용하기*/
@media screen{
	/*스타일*/
}

/*모든 프린터 장치에 적용하기*/
@media print{
	/*스타일*/
}

 

Operators - 미디어 연산자

@media를 사용하여 여러 장치 및 조건을 사용하기 위해 연산자의 개념을 제공합니다.

이름	기능
and	AND 연산
,(쉼표)	OR 연산
not	미디어쿼리의 부정(반전)
only	오래 된 브라우저의 오동작 방지

 

and 연산

논리 연산 AND의 역할을 하는 연산자입니다.

따라서 2개의 조건을 가진 미디어 쿼리를 만든다면 and 연산을 사용하면 됩니다.

/*미디어 장치가 screen이면서 조건1에 만족하는 미디어 쿼리*/

@media screen and (조건1){
	/*스타일*/
}

, (쉼표) 연산

논리 연산 OR의 역할을 하는 연산자입니다.

다중 조건을 선택하는 경우 사용하면 됩니다.

/*미디어 장치가 screen이면서 조건1에 만족하는 미디어 쿼리와
  미디어 장치가 screen이면서 조건2에 만족하는 미디어 쿼리*/

@media screen and (조건1),screen and (조건2){
	/*스타일*/
}

not 연산

논리 연산 NOT의 역할을 하는 연산자입니다.

이 연산을 사용하면 and 연산은 모두 함께 반전 처리되며, 쉼표(,) 연산은 함께 반전 처리되지 않습니다.

/*미디어 장치가 screen이면서 조건1에 만족하지 않는 미디어 쿼리*/
/* not (screen and (조건1))*/
@media not screen and (조건1){
	/*스타일*/
}

/*미디어 장치가 screen이면서 조건1에 만족하지 않는 미디어 쿼리와
  미디어 장치가 screen이면서 조건2에 만족하는 미디어 쿼리*/
/*not(screen and(조건1)), screen and (조건2)*/
@media not screen and (조건1),screen and (조건2){
	/*스타일*/
}

only 연산

논리 연산이 아닌 브라우저의 호환성 때문에 등장한 연산자입니다.

만약 여러 조건이 있는 미디어 쿼리를 특정 웹브라우저에서 실행시켰을 때 호환되지 않는 쿼리문이 있다면 웹 브라우저는 아는 내용만을 가지고 쿼리문을 읽어 들일 수 있습니다. 이런 경우 의도하지 않는 스타일이 적용될 수 있습니다.

 

따라서 이 only 연산을 통하면 모든 쿼리가 정확하게 일치해야만 적용해라는 의미를 호환되지 않는 브라우저에서의 동작을 금지시킬 수 있습니다.

 

/*모든 쿼리를 인식해야만 사용할 수 있습니다.*/
/* only (screen and (조건1))*/
@media only screen and (조건1){
	/*스타일*/
}

/*only(screen and(조건1), screen and (조건2))*/
@media only screen and (조건1),screen and (조건2){
	/*스타일*/
}

Targeting media features - 미디어 조건

미디어 쿼리에서 조건식을 위와 같이 미디어 기능이라고도 부릅니다. 

여기에 약속한 이름과 값을 통해 조건을 만들어서 사용합니다.

다양한 조건은 이곳에서 자세히 보도록하고 본문에서는 기본적인 반응형 웹을 만들 때 유용한 몇 가지를 소개하겠습니다.

이름	설명
max-width	폭이 설정값보다 작으면 참
min-width	폭이 설정값보다 크면 참
max-height	높이가 설정값보다 작으면 참
min-height	높이가 설정값보다 크면 참
max-aspect-ratio	가로세로비가 설정값 보다 작으면 참
min-aspect-ratio	가로세로비가 설정값 보다 크면 참

max-width(height)

폭(높이)의 상한선을 정하는 조건입니다.

즉, 폭(높이)보다 작은 영역의 스타일을 지정합니다.

 

See the Pen Untitled by Gon (@gon-91) on CodePen.

 

min-width(height)

폭(높이)의 하안선을 정하는 조건입니다.

즉, 폭(높이)보다 큰 영역의 스타일을 지정합니다.

See the Pen min-width by Gon (@gon-91) on CodePen.

Tips - Range

미디어 쿼리 leve4를 지원한다면 크기 연산을 이용해도 사용 가능합니다.

@media screen and (width <= 700px){
  div{
    background-color:blue;
  }
  h1{
    font-size : 3rem;
  }
}