TIL : media query

Perfume·2020년 11월 29일

반응형 웹디자인을 하고자 시도해본 사람이라면 모두들 미디어 쿼리는 한 번쯤 들어봤을 것이다. 미디어 쿼리는 반응형 웹디자인의 핵심이다. 그럼 이 질문이 바로 나올 것이다.

그래서 미디어 쿼리가 뭔데?

미디어 쿼리는 웹 페이지 콘텐츠를 다양한 화면 크기와 해상도에 맞게 조정할 수 있는 CSS 의 기능이다.

"뷰포트가 480 픽셀보다 넓다."와 같은 특정 규칙을 지정하면, 그 규칙과 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공한다.

간단히 말하자면, 미디어 쿼리를 사용하면 페이지를 새로 만들지 않고도 뷰포트의 크기에 따라 요소들의 CSS 속성을 분기해줄 수 있다는 뜻이다.

기본 문법은 다음과 같다.

@media (미디어 종류) and (조건문) {
/ CSS rules go here /
}

예시를 들어 보겠다.

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

위의 코드를 해석하자면, 넓이가 768px보다 작은 화면에서는 header의 높이가 70px, article의 글씨 크기가 14px, img의 최대크기가 480px이라는 뜻이다.

all - 모든 디바이스 대상
print - 인쇄 결과물 및 인쇄 미리보기 문서
screen - 화면 대상

미디어 쿼리를 적용하는 방법을 알아보겠다.

1) link

link 태그는 head태그 안에 위치하여 media 속성 안 조건에 만족할 때 해당 CSS파일을 불러온다.

<link href="cssfile.css" media="screen and (min-width: 512px) and (max-width: 1024px)" rel="stylesheet">

2) style 태그

style태그는 head 태그 안에 위치하여 media 속성 안 조건에 만족 할 때 스타일을 적용 시킨다.

<style type="text/css" media="screen and (min-width: 512px) and (max-width:1024px)">  
/* style */
</style>

3) style - @import

style 태그 안에서 @import를 사용하여 뒷 부분의 미디어 쿼리를 만족 할 때 해당 CSS파일을 불러온다.

<style>  
    @import url(cssfile.css) screen and (min-width: 152px) and (max-width: 1024px);
</style>

4) CSS파일

불러온 CSS파일 안 혹은 style 태그 안에서 직접 미디어 쿼리를 작성하여 만족할 때 해당 스타일을 적용 시킨다.

@media screen and (min-width:512px) and (max-width:1024px)

공부하는 즐거움