CSS MEDIA QUERY(미디어쿼리)란? 개념 및 사용법

Media query는 CSS의 조건문이다!

True icons created by Freepik - Flaticon

Media? Query?

• Media: 중간 매개물. 매체

• Query: 질문

 

Media Query(미디어쿼리)?

웹에 접근하는 Media(기계 혹은 뷰포트)의 특성에 따라, 다른 스타일을 적용 할 수 있게 해주는 CSS 기술

 

 CSS의 조건문이라고 생각하면 편하다.

 

responsive(반응형) 웹사이트를 만드는데에 널리 이용된다.

형태

        @media media-type and (expression){
            <style css>
        }

예시

    @media screen and (max-width: 600px){
        h1 {font-size: 200px;
        }
        
        div {
            position: absolute;
        }


    }

media가 screen이며 너비가 600px 이하인경우, h1의 font-size를 200px로 번경하고, div태그의 position을 absolute로번경한다.

@media media-type and expression{}

Media type의 종류

• screen: 컴퓨터, 모바일 기기 등의 화면에 적용된다.

 

• print: 문서를 프린트 할때 적용된다.

 

• speech: screen-reader(스크린 낭독기), Text-to-speech(TTS, 텍스트를 음성으로 바꾸는 프로그램) 등에 적용된다.

 

@media media-type and expression{}

Expression

논리적으로 true or false 중 하나의 결과값을 갖는 Media query의 조건식.

형태: (condition: condition value)

• width: 뷰포트의 넓이.
  
  ex) @media (max-width: 800px){} : 너비가 800px 이하일 때 적용된다.

• height: 뷰포트의 높이
  
  ex) @media (max-height: 800px){} : 높이가 800px 이하일 때 적용된다.

• aspect-ratio: 뷰포트의 비율:
  ex) @media (aspect-ratio: 11/9) : 뷰포트가 11:9 일때 적용된다.

• device-width: 기기 스크린의 너비.
  
  ex) @ media (max-device-width: 400px){} : 기기 너비가 400px 이하일 떄 적용된다.

• device-height: 기기 스크린의 높이.
  
  @ media (max-device-height: 400px){} : 기기 높이가 400px 이하일 떄 적용된다.

• device-aspect-ratio: 기기 스크린의 비율.
  
  @ media (device-aspect-ratio: 11/9) {} : 기기 스크린 비율이 4:3일 때 적용된다.

• orientation: 기기 스크린의 묘사방향: portrait (초상화) 혹은 landscape (풍경)
  
  portrait: 스크린의 height(높이)값이 width(너비)값 보다 큰 경우.
  landscape: 스크린의 width(너비)값이 height(높이)값 보다 큰 경우.
  
  ex) @media (orientation: landscape) {} : 기기스크린의 너비가 높이보다 큰 값을 가질때 적용된다.

• resolution: 스크린의 분해능 dot per inch (dpi) 또는 dots per centimeter (dpcm).
  
  ex) @media (min-resolution: 300dpi) {} : dpi가 300 이상일때 적용된다.