Media Query 사용 방법 알아보기

Mdia Query는 디바이스의 크기에 따라 웹이나 모바일 홈페이지의 사이즈를 조절해주는 CSS의 한 부분입니다. 소위 반응형 홈페이지들에서 주로 사용하고 있지만 사이즈를 고정해서 보여줄 때도 유용한 것이 미디어쿼리입니다. 그런데 Media Query를 쓸 때, 반응형 홈페이지를 만들 때 Min, Max, Device-width, height 등 헷갈릴 때가 종종 있어서 미디어쿼리를 나름 정리해두고자 합니다.

 

Media Query 란?

미디어 쿼리는 뷰포트의 크기에 따라 정해진 CSS가 작동하도록 해줍니다. 앞서도 말씀드린 것처럼 반응형 홈페이지를 만들 때는 꼭 필요한 것이 미디어쿼리이고, 잘 사용하면 대단히 부드럽게 브라우저 - 뷰포트에 맞는 홈페이지를 보여주게 됩니다 .

 

Media Query의 기본은 아래와 같습니다.

 

@media media-type and (media-feature-rule) {
/* css rule */
}

@media로 시작해주고 어떤 타입과 어떤 미디어의 규칙 - 대개는 뷰포트사이즈가 무엇인지에 따라 { } 안에 있는 CSS가 작동하도록 해주는 방식입니다.

media-type는 미디어인지는 예를 들면 프린트인지, 스크린(화면)인지 브라우저가 인식하게 해주는 부분입니다.  

media- type는 all, print, screen 등이 있습니다.

 

screen은 아래에서 계속해서 나오니까 여기서는 print를 예로 들어보겠습니다.

 

 

@media print {
html, body {-webkit-print-color-adjust:exact; width: 210mm; height: 297mm; }
    font-size : 14pt;
}

}

위의 미디어쿼리는 프린트에서만 작동을 합니다. 프린트인 경우 A4사이즈에 폰트사이즈를 14포인트로 보여주고 인쇄하게 됩니다. 

그누보드 팁 자료실에 보니 유용한 팁이 올라와 있는데요. 아래와 같이 프린트를 할 때 테이블의 길이가 긴 경우 테이블이 잘려서 인쇄될 때 유용한 것이라고 합니다. 아직 테스트는 못해봤네요.(요즘 테이블을 많이 사용하지 않다보니...)

 

<style type="text/css">
@media print {
    html, body { -webkit-print-color-adjust:exact; width: 210mm; height: 297mm; }
    table { page-break-inside:auto; }
    tr    { page-break-inside:avoid; page-break-after:auto; }
    thead { display:table-header-group; }
    tfoot { display:table-footer-group; }
}
</style>

 

 

Media query 다양한 viewport로 사용하기

미디어쿼리를 사용하는 경우는 대부분 반응형 웹사이트와 모바일 홈페이지를 위해서일텐데요. 

일반적으로 미디어 쿼리는 앞서 말씀드린 media-type and () 를 아래와 같은 방법으로 사용합니다.

 

특정크기 지정하기

@media screen and (width: 375px) {
  body {
    color: #000000;
    font-size: 14px;
    width:100%;
  }
}

예를 들어 아이폰13mini의 브라우저 뷰포트는 가로 375px입니다. 아이폰과 같은 뷰포트가 정확히 375px인 경우에 글자를 검정색, 14px로 보여주고 body의 width는 100%로 하라는 뜻이 됩니다.

 

 

최대값 최소값 지정하기

media query를 사용할 때 가장 많이 쓰는 것이 최대값, 최소값일 것 같습니다. 예를 들어 최대 1024픽셀일 때, 최소 360픽셀일 때 지정한 CSS 규칙을 적용하라는 의미인데요. min-, max- 형식으로 width, height에 붙여서 사용할 수 있습니다. 

 

@media screen and (max-width: 375px) {
  container {
    background-color: blue;
    color:#FFFFFF;
    font-size: 14px;
    width:360px;
    margin:0 auto;
  }
}

 

예를 들어 max-width: 375px인 경우 container는 파란색 배경에 흰색 글씨로 가로 360픽셀, 그리고 화면의 중앙에 나타나도록 처리한 미디어 쿼리를 만들 수 있습니다.

 

미디어쿼리를 적절히 쓰면 반응형 웹을 만들 때 각각의  viewport 화면 사이즈에 맞게 화면 요소들을 보여줄 수 있는데요. 자칫 헷갈려서 잘 못사용하는 경우 제대로 css가 적용되지 않을 수 있습니다. 아래는 잘못 사용한 예입니다.

<style>
		
		@media screen and (min-width:1024px){
			.container {
				width:800px;
				border: 1px solid #000000;
			}
		}
	
		
		
	
		@media screen and (min-width:800px) {
			.container {
				width:600px;
				border: 1px solid #000000;
			}
		}
	
		@media screen and (min-width:600px) {
			.container {
				width:500px;
				border: 1px solid #000000;
			}
		}
	
	</style>

 

위와 같이 min-width를 동일한 container에 각각의 최소값으로 1024, 800, 600px에 실제로 화면에 보여줘야할 가로 사이즈를 각각 800, 600, 500 픽셀로 지정한 경우 실제로는 500픽셀로 지정한 min-width:600px 에 해당하는 미디어쿼리만 적용됩니다. 그 이유는 최소값이라는 것이 ~~이상인 경우는 ***를 적용하라는 의미이기 때문에 최소한 600픽셀만 된다면 그 위에 사이즈들은 모두 무시될 수 밖에 없는 것이죠.

그래서 실제 경과는 아래와 같이 화면 사이즈가 1024픽셀일 때도, 800픽셀이상일 때도 600픽셀 이상일 때도 동일하게 container가 500px로만 보여지게 됩니다.

 

 

그러니까 내가 보여줘야할 화면 요소가 max인 경우인지 혹은 min인 경우인지를 고민해서 미디어쿼리를 적용해야하는 것이죠. 가령 모바일에서 보여줘야할 화면 사이즈는 작고 PC에서 보여줘야할 사이즈는 크기 때문에 모바일에서만 적용하기 위해서는 예를 들어 아이폰 13mini를 기준으로 max-width:375px이라고 하면 viewport크기가 최대 375px이기 때문에 해당사이즈 이하는 모두 모바일용화면으로 구성한 css가 적용되도록 하면 됩니다.

 

 

* 이 컨텐츠는 업데이트 중입니다.