[CSS] @Media Query 미디어 쿼리

미디어 쿼리 사용법을 알아보자!

미디어 쿼리를 사용하면 미디어 쿼리를 사용하면 화면 해상도나 방향, 브라우저 뷰포트 너비나 높이, 장치의 단말기의 유형(screen, print)에 따라 원하는 스타일을 적용할 수 있다.

가장 흔히 사용되는 예는 브라우저 뷰포트 너비나 높이에 따라 다르게 적용하고 싶을 때인 것 같다.(개인적인 의견)

1. screen, print

• screen
  • 화면을 가진 장치에서 웹 페이지를 표시할 때 적용한다.
• print
  • 프린터를 통해 출력할 때 웹 페이지의 스타일을 정의한다.
  • 웹 페이지에서 이미지나 배경색을 인쇄할 때 포함하지 않거나, 인쇄에 맞게 폰트 크기나 레이아웃을 조정하는 데 사용한다.

2. orientation: portrait, landscape

• 인쇄 시에 가로, 세로 방향에 따른 스타일 적용 시 사용한다.

  /* 세로 */
  @media print and (orientation: portrait) {
  body {
    font-size: 14pt;
  }
  .landscape-only {
    display: none;
  }
  }
  
  /* 가로 */
  @media print and (orientation: landscape) {
  body {
    font-size: 16pt;
  }
  .portrait-only {
    display: none;
  }
  }
  

• 기기의 가로 방향, 세로 방향에 따른 스타일 적용 시에도 사용할 수 있다.

  /* 화면이 세로 방향일 때 */
  @media screen and (orientation: portrait) {
  body {
    background-color: lightblue;
  }
  }
  
  /* 화면이 가로 방향일 때 */
  @media screen and (orientation: landscape) {
  body {
    background-color: lightyellow;
  }
  }

3. 사이즈 별 사용

• 범위에 따라 적용하고 싶을 때에는 아래와 같이 적용한다.

  @media (min-width: 30em) and (max-width: 50em) {
  /* … */
  }
  @media (30em <= width <= 50em) {
  /* … */
  }
  

4. 다양한 조합으로 사용할 때

• and 로 이어서 작성하면 모든 조건이 적용된다.

  /* 기기의 landscape(가로 방향화면) 방향으로 제한시키고 최소폭이 30 em 인 경우 */
  @media screen and (min-width: 30em) and (orientation: landscape) {
  /* … */
  }
  
  /* 사용자의 기기의 높이가 680px 이상이거나, 브라우저의 뷰포트가 세로 모드 (뷰포트의 높이가 너비보다 큰 경우)일 때 적용 */
  @media (min-height: 680px), screen and (orientation: portrait) {
  /* … */
  }

이것 말고도 다른 방법들은
MDN사이트에서 보면 된다.