[HTML & CSS] Media Query

이인송·2021년 4월 10일

🙏 들어가면서

HTML, CSS 는 공부하면 할 수록 새로운 내용들이 나오는 것 같다.
충분히 새로운 개념에 대해 이해하고 정리하는 습관을 기르자!

Media Query

Syntax

media query는 반응형 웹을 만드는 css 기술로, 어떤 조건에서 어떤 css를 적용하자! 라는 명령을 줄 때 쓴다.
특히, 사용자의 화면의 크기를 기반으로 다른 UI 를 보여줄 수 있다.
미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어지는데,
논리 연산자를 사용해 다수의 쿼리를 다양한 방법으로 결합할 수도 있다

1. 미디어 유형

all
모든 장치에 적합합니다.
print
인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.
screen
주로 화면이 대상입니다.
speech
음성 합성장치 대상입니다.

2. 미디어 특성 표현식

미디어 특성은 사용자 에이전트, 출력 장치, 환경 등의 특징을 나타낸다.
미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별한다.
각각의 미디어 특성 표현식은 괄호로 감싸야 한다.

width: 스크롤바를 포함한 뷰포트 넓이
height: 뷰포트의 높이
aspect-ratio: 뷰포트의 가로세로비

🍎 아래 태그를 기반으로 설명해보자.

@media only screen and (max-width: 480px) {  
  body {  
    font-size: 12px;  
  } 
}

@media
media 쿼리를 시작한다는 의미로 사용된다.

only screen
어떤 디바이스에서 적용하는지에 대한 의미이다.
다른 예시는 아래와 같다.

only print: 프린트를 하고 싶을 때 작성한다!
screen: 어떤 디바이스에 상관없이, 화면에 보이는 스크린일 때 적용한다!
and (max-width : 480px): media feature를 나타내며, 어떤 조건에서 아래의 코드를 적용할 지 나타낸다!

예제 1

      <body>
        <div></div>
        <span>Plz flip your phone :( </span>
      </body>

      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        align-items: center;
        justify-content: center;
        font-family: sans-serif;
      }
      div {
        background-color: teal;
        width: 200px;
        height: 200px;
      }
      span {
        font-size: 40px;
      }
      
      # 300px 에서 900px 까지는 background-color 를 tomato 로 설정
      @media screen and (min-width: 300px) and (max-width: 900px) {
        div {
          background-color: tomato;
        }
      }
      
      # 가로보기 모드일 경우에는 span 이 보이지 않게 설정한다!
      @media screen and (orientation: landscape) {
        span {
          display: none;
        }
      }

다음 예제를 CodeSandBox 를 통해 살펴보자!
https://codesandbox.io/s/eloquent-hofstadter-hdxdu?file=/index.html

예제 2

다음은 공식 문서에 나와있는 EasyMode 예제이다

import { useMediaQuery } from 'react-responsive'
 
const Desktop = ({ children }) => {
  const isDesktop = useMediaQuery({ minWidth: 992 })
  return isDesktop ? children : null
}
const Tablet = ({ children }) => {
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 })
  return isTablet ? children : null
}
const Mobile = ({ children }) => {
  const isMobile = useMediaQuery({ maxWidth: 767 })
  return isMobile ? children : null
}
const Default = ({ children }) => {
  const isNotMobile = useMediaQuery({ minWidth: 768 })
  return isNotMobile ? children : null
}
 
const Example = () => (
  <div>
    <Desktop>Desktop or laptop</Desktop>
    <Tablet>Tablet</Tablet>
    <Mobile>Mobile</Mobile>
    <Default>Not mobile (desktop or laptop or tablet)</Default>
  </div>
)
 
export default Example