WeniVooks

검색

HTML/CSS 에센셜

미디어 쿼리

1. 미디어 쿼리

미디어 쿼리(Media Query)는 CSS3의 기능으로, 웹 페이지 또는 애플리케이션의 내용을 다양한 디스플레이 장치와 환경에 맞게 적응적으로 표시하도록 하는 방법을 뜻합니다. 이때 미디어 쿼리는 특정 조건에 따라 다른 CSS 스타일을 적용할 수 있게 해주는데, 이 조건을 ‘미디어 타입’이라 정의합니다. 미디어 쿼리는 이 조건이 만족될 때 해당하는 CSS가 적용됩니다.

1.1 미디어 유형

스타일시트가 어떤 장치나 출력 방식에 적용되어야 하는지를 명시합니다. 이를 통해 웹 개발자는 특정 장치나 환경에 따라 다르게 표시되는 스타일을 정의할 수 있습니다.

  • all: 모든 장치에 적용됩니다.
  • screen: 주로 컴퓨터 화면, 스마트폰, 태블릿 등의 스크린을 대상으로 보여집니다. 웹 사이트를 방문하는 대부분의 사용자들은 이 screen 미디어 타입을 경험하게 됩니다.
  • print: 인쇄될 문서에 적용됩니다. 이는 웹페이지를 인쇄할 때 사용되는 스타일을 명시하는 데 사용됩니다.
  • speech: 음성 출력 장치나 스크린 리더를 위한 스타일을 정의합니다.
  • projection: 프로젝터를 통한 표시를 위한 스타일을 정의합니다.
  • tv: 텔레비전 타입의 디바이스에 적용됩니다.

이외에도 handheld, braille, tty, embossed 등의 미디어 타입이 있습니다. 그러나 CSS3에서는 몇몇 미디어 타입들이 더 이상 사용되지 않거나, 오용의 여지가 있기 때문에 대부분의 경우 screen, print, all과 같은 주요 미디어 타입을 중점적으로 사용합니다.

@media screen and (max-width: 768px) {
  /* 스크린용 스타일 규칙 */
}
 
@media print {
  /* 인쇄용 스타일 규칙 */
}
@media screen and (max-width: 768px) {
  /* 스크린용 스타일 규칙 */
}
 
@media print {
  /* 인쇄용 스타일 규칙 */
}
1.2 미디어 쿼리 기본 구조

미디어 쿼리는 @media 규칙을 사용하여 시작됩니다.

@media (미디어 특성) {
  /* 스타일 */
}
@media (미디어 특성) {
  /* 스타일 */
}

미디어 타입을 사용하여 나타내어 보겠습니다.

@media screen and (max-width: 768px) {
  /* 스타일 */
}
@media screen and (max-width: 768px) {
  /* 스타일 */
}

screen: 주로 컴퓨터 화면, 스마트폰, 태블릿 등의 스크린을 대상으로 함

이처럼 @media 다음에는 조건문이 옵니다. 이 조건문은 다양한 미디어 특성을 기반으로 스타일을 적용할 환경을 정의합니다.

1.3 미디어 특성

주요 미디어 특성은 다음과 같습니다.

1.2.1 너비 기반 미디어 쿼리
  • min-width: 최소 너비 조건
  • max-width: 최대 너비 조건
/* 최대 1400px까지 스타일 적용 */
@media (max-width: 1400px) {
  /* 스타일 */
}
 
/* 최소 500px부터 스타일 적용 */
@media (min-width: 500px) {
  /* 스타일 */
}
/* 최대 1400px까지 스타일 적용 */
@media (max-width: 1400px) {
  /* 스타일 */
}
 
/* 최소 500px부터 스타일 적용 */
@media (min-width: 500px) {
  /* 스타일 */
}
1.2.2 방향 기반 미디어 쿼리

orientation 속성을 사용하여 장치의 방향에 따라 스타일을 적용할 수 있습니다.

  • portrait: 세로 방향
  • landscape: 가로 방향
@media (orientation: portrait) {
  body {
    background: royalblue;
  }
}
 
@media (orientation: landscape) {
  body {
    background: skyblue;
  }
}
@media (orientation: portrait) {
  body {
    background: royalblue;
  }
}
 
@media (orientation: landscape) {
  body {
    background: skyblue;
  }
}
1.2.3 화면 비율 기반 미디어 쿼리

aspect-ratio 속성을 사용하여 뷰포트의 가로세로 비율에 따라 스타일을 적용할 수 있습니다.

/* 화면의 가로세로 비율이 1:1일 때 */
@media (aspect-ratio: 1/1) {
  body {
    background-color: lightcoral;
  }
}
 
/* 화면의 가로세로 비율이 16:9일 때 */
@media (aspect-ratio: 16/9) {
  body {
    background-color: lightgreen;
  }
}
/* 화면의 가로세로 비율이 1:1일 때 */
@media (aspect-ratio: 1/1) {
  body {
    background-color: lightcoral;
  }
}
 
/* 화면의 가로세로 비율이 16:9일 때 */
@media (aspect-ratio: 16/9) {
  body {
    background-color: lightgreen;
  }
}
1.2.4 해상도 기반 미디어 쿼리

resolution 속성을 사용하여 출력 장치의 픽셀 밀도에 따라 스타일을 적용할 수 있습니다. 단위는 dppx(dots per px)를 사용합니다.

/* 해상도가 2dppx 이상일 때 (2x 해상도) */
@media (min-resolution: 2dppx) {
  body {
    background-color: lightgreen;
  }
}
/* 해상도가 2dppx 이상일 때 (2x 해상도) */
@media (min-resolution: 2dppx) {
  body {
    background-color: lightgreen;
  }
}

기기의 픽셀 비율 확인 방법

  1. 자바스크립트 BOM API 사용 콘솔에 window.devicePixelRatio를 입력하여 확인할 수 있습니다.

  2. 온라인 도구 사용

    픽셀 비율 확인 사이트

주의: 화면 확대 또는 축소 시 픽셀 비율이 달라질 수 있습니다.

추가 팁

  1. 미디어 쿼리를 사용할 때는 모바일 퍼스트 접근법을 고려해 보세요. 즉, 기본 스타일을 모바일용으로 작성하고, 큰 화면을 위한 스타일을 미디어 쿼리로 추가하는 방식입니다.
  2. 브라우저 지원을 확인하세요. 대부분의 현대 브라우저는 미디어 쿼리를 잘 지원하지만, 매우 오래된 브라우저에서는 문제가 있을 수 있습니다.
  3. 과도한 미디어 쿼리 사용은 피하세요. 필요한 경우에만 사용하고, 가능한 한 CSS의 유연한 레이아웃 기술(Flexbox, Grid 등)을 활용하세요.
  4. 테스트를 충분히 하세요. 다양한 기기와 화면 크기에서 어떻게 보이는지 확인하는 것이 중요합니다.
1.3 논리 연산자

CSS 미디어 쿼리에서는 여러 조건을 조합하기 위해 논리 연산자를 사용할 수 있습니다.

1.3.1 and 연산자

and 연산자는 모든 조건을 만족하는 경우에만 스타일을 적용합니다.

/* 최소 1000px부터 뷰포트의 방향이 가로일 때 스타일 적용 */
@media (min-width: 1000px) and (orientation: landscape) {
  /* 스타일 */
}
/* 최소 1000px부터 뷰포트의 방향이 가로일 때 스타일 적용 */
@media (min-width: 1000px) and (orientation: landscape) {
  /* 스타일 */
}
1.3.2 not 연산자

not 연산자는 조건을 반전시킵니다. 미디어 유형(all, screen, print 등)을 지정한 경우, 부정의 의미는 미디어 유형을 제외한 조건에만 적용됩니다.

/* 뷰포트 너비가 600px 이하가 아니거나 해상도가 2dppx 이하가 아닌 경우에 적용 */
@media not (max-width: 600px), not (max-resolution: 2dppx) {
  body {
    background-color: lightgreen;
  }
}
 
/* 스크린 미디어 타입에서 뷰포트 너비가 1000px 이상이 아닌 경우에 적용 */
@media not screen and (min-width: 1000px) {
  body {
    background-color: darkgreen;
  }
}
/* 뷰포트 너비가 600px 이하가 아니거나 해상도가 2dppx 이하가 아닌 경우에 적용 */
@media not (max-width: 600px), not (max-resolution: 2dppx) {
  body {
    background-color: lightgreen;
  }
}
 
/* 스크린 미디어 타입에서 뷰포트 너비가 1000px 이상이 아닌 경우에 적용 */
@media not screen and (min-width: 1000px) {
  body {
    background-color: darkgreen;
  }
}
1.3.3 ,(쉼표) 연산자

쉼표 연산자는 나열된 조건 중 하나라도 만족하는 경우 스타일을 적용합니다.

/* 최소 1000px이거나 뷰포트의 방향이 가로일 때 스타일 적용 */
@media (min-width: 1000px), (orientation: landscape) {
  /* 스타일 */
}
/* 최소 1000px이거나 뷰포트의 방향이 가로일 때 스타일 적용 */
@media (min-width: 1000px), (orientation: landscape) {
  /* 스타일 */
}
1.3.4 only 키워드

only 키워드는 미디어 쿼리를 지원하는 브라우저에서만 스타일을 적용하도록 합니다. 이 키워드를 사용할 때는 반드시 미디어 유형(all, screen, print 등)을 지정해야 합니다.

@media only screen and (max-width: 500px) {
  /* 스타일 */
}
@media only screen and (max-width: 500px) {
  /* 스타일 */
}

only 키워드의 역사적 배경

미디어 쿼리의 CSS3 버전은 IE9부터 완전히 지원되지만, 미디어 쿼리 자체는 이미 IE6부터 부분적으로 지원되었습니다. 그러나 초기 버전에서는 논리 연산자를 지원하지 않아 잘못된 스타일 적용이 발생할 수 있었습니다. only 키워드는 이러한 문제를 방지하기 위해 도입되었습니다.

예를 들어, 다음과 같은 미디어 쿼리가 있을 때

@media screen and (max-width: 500px) {
  /* 스타일 */
}
@media screen and (max-width: 500px) {
  /* 스타일 */
}

구형 브라우저는 screen만 읽고 나머지 부분을 무시하여 의도치 않게 스타일을 적용할 수 있습니다. only 키워드를 사용하면 이를 방지할 수 있습니다.

미디어 쿼리를 효과적으로 사용하면 다양한 기기와 화면 크기에 최적화된 반응형 웹사이트를 만들 수 있습니다. 실제 프로젝트에서는 일반적으로 몇 개의 주요 중단점(breakpoint)을 정의하고, 이를 기준으로 레이아웃과 스타일을 조정합니다.

1.4 브레이크 포인트에 따른 미디어쿼리 작업

브레이크 포인트(Breakpoint)

브레이크 포인트란 반응형 웹 디자인에서 특정 화면 크기 또는 장치 특성에 따라 디자인이나 레이아웃이 변경되는 지점을 말합니다. 브레이크 포인트는 웹 페이지가 다양한 화면 크기와 장치에 적절하게 반응하여 사용자에게 최적의 화면을 구성하도록 도와줍니다.

일반적으로 사용되는 브레이크 포인트의 예시는 아래와 같습니다.

/* Extra Small Devices (핸드폰) 스타일 */
/* 기본적으로 모든 장치에 적용되는 스타일을 정의합니다 */
 
.content {
  padding: 10px;
}
 
/* Small Devices (태블릿 세로 모드) 스타일 */
@media (min-width: 577px) and (max-width: 768px) {
  .content {
    padding: 20px;
  }
}
 
/* Medium Devices (태블릿 가로 모드) 스타일 */
@media (min-width: 769px) and (max-width: 992px) {
  .content {
    padding: 30px;
  }
}
 
/* Large Devices (작은 데스크탑) 스타일 */
@media (min-width: 993px) and (max-width: 1200px) {
  .content {
    padding: 40px;
  }
}
 
/* Extra Large Devices (큰 데스크탑) 스타일 */
@media (min-width: 1201px) {
  .content {
    padding: 50px;
  }
}
/* Extra Small Devices (핸드폰) 스타일 */
/* 기본적으로 모든 장치에 적용되는 스타일을 정의합니다 */
 
.content {
  padding: 10px;
}
 
/* Small Devices (태블릿 세로 모드) 스타일 */
@media (min-width: 577px) and (max-width: 768px) {
  .content {
    padding: 20px;
  }
}
 
/* Medium Devices (태블릿 가로 모드) 스타일 */
@media (min-width: 769px) and (max-width: 992px) {
  .content {
    padding: 30px;
  }
}
 
/* Large Devices (작은 데스크탑) 스타일 */
@media (min-width: 993px) and (max-width: 1200px) {
  .content {
    padding: 40px;
  }
}
 
/* Extra Large Devices (큰 데스크탑) 스타일 */
@media (min-width: 1201px) {
  .content {
    padding: 50px;
  }
}

이때 미디어 쿼리를 사용하여 브레이크 포인트를 정의하며, 특정 화면 크기 또는 장치 특성에 도달했을 때 적용되는 스타일을 지정할 수 있습니다.

/* 기본 스타일 */
.content {
  float: none;
  width: 100%;
}
 
/* 화면 너비가 600px 이상일 때의 스타일 */
@media screen and (min-width: 600px) {
  .content {
    float: left;
    width: 50%;
  }
}
/* 기본 스타일 */
.content {
  float: none;
  width: 100%;
}
 
/* 화면 너비가 600px 이상일 때의 스타일 */
@media screen and (min-width: 600px) {
  .content {
    float: left;
    width: 50%;
  }
}

위의 예제에서 600px은 브레이크 포인트입니다. 화면 너비가 600px 이상이 되면 .content 요소는 왼쪽으로 부동하고 너비가 50%로 변경됩니다.

1.5 실습: 반응형 레이아웃 구현

미디어 쿼리를 사용하여 다음과 같은 반응형 레이아웃을 구현헤보세요.

  • 데스크톱 (1920px 이상): 가로로 긴 레이아웃, 큰 이미지 2개
  • 태블릿 (768px - 1919px): 세로로 긴 레이아웃, 작은 이미지 2개
  • 모바일 (767px 이하): 세로로 긴 레이아웃, 작은 이미지 2개, 더 작은 폰트 크기

1.6 참고 링크

미디어 쿼리 | MDN각 기기별 사이즈와 중단점(break point) 정리
16.2 CSS 함수16.4 반응형 이미지