CSS 심화 - @media

김영준·2023년 7월 29일

@media CSS 미디어 쿼리

TIL

목록 보기

18/91

미디어 쿼리

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용하다.

사용법

@media 타입 and (기능) { 스타일 }

기능을 작성할 땐 뒤에 세미콜론이 붙지 않는다.

타입의 기본값은 all이다.

all은 전체 타입을 지정한다.

/* 기본값은 all */
@media all and (max-width: 700px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

all은 생략이 가능하다.

/* 타입을 생략하고 사용 가능 */
@media (max-width: 700px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

대부분 all 또는 screen을 사용하지만 다양한 타입들이 있다.

/* 화면의 너비가 700px 이하일 때 */
@media screen and (max-width: 700px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

/* 현재 화면을 인쇄할 때 */
@media print and (max-width: 700px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

/* tv에 출력될 때 */
@media tv and (max-width: 700px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

and 연산자를 사용할 수 있다.

/* 400px 이상 700px 이하일 때 */
@media (max-width: 700px) and (min-width: 400px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

앞에 not을 붙이면 작성한 기능의 부정을 의미한다.

not을 사용할 때는 미디어 타입을 꼭 명시해야 한다.

/* 400px 미만 700px 초과일 때  */
@media not all and (max-width: 700px) and (min-width: 400px) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

쉼표를 사용하면 새로운 미디어 쿼리를 추가할 수 있다.

/* 화면 너비가 400px 이상 700px 이하이고, TV의 디스플레이 모드가 전체 화면인 경우*/
@media screen and (max-width: 700px) and (min-width: 400px),
  tv and (display-mode: fullscreen) {
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

그 외 특정한 기능

/* 세로 너비가 가로 너비보다 더 긴 상활일 때 (일반적인 모바일 디바이스) */
@media screen and (orientation: portrait){
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

/* 가로 너비가 세로 너비보다 더 긴 상활일 때 (옆으로 눕힌 모바일 디바이스) */
@media screen and (orientation: landscape){
  .box {
    width: 200px;
    background-color: royalblue;
  }
}

link 태그의 media 속성을 통해서도 미디어 쿼리를 적용할 수 있다.

/* main.css */

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}

/* main-md.css */

.box {
  width: 200px;
  background-color: royalblue;
}

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css" />
    <link
      rel="stylesheet"
      href="./css/main-md.css"
      media="(max-width: 700px) and (min-width: 400px)"
    />
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>