ProgrammingWeb

CSS 미디어 쿼리(Media Query): 반응형 웹사이트를 위한 초보자 가이드

, , , ,

끊임없이 변화하는 웹 개발 세계에서 휴대폰, 태블릿, 노트북 등 모든 기기에서 멋지게 보이고 원활하게 작동하는 웹사이트를 만드는 것은 매우 중요합니다. 이 글에서는 반응형 웹사이트를 만들기 위한 CSS 미디어 쿼리에 대해 알아봅니다.

CSS 미디어 쿼리란 무엇인가요?

CSS 미디어 쿼리는 화면 너비, 높이, 디바이스 방향, 해상도 등에 따라 디바이스마다 다른 스타일을 적용하는 데 사용됩니다. 미디어 쿼리를 사용하면 사용자의 기기에 완벽하게 반응하는 웹 디자인을 만들고 사용자 경험을 향상시킬 수 있습니다.

미디어 쿼리의 기본 구문

미디어 쿼리의 기본 구문은 다음과 같습니다.

1
2
3
@media media-type and (media-expression) {
  /* CSS styles go here */
}

@media: 미디어 쿼리의 시작을 나타내는 데 사용됩니다.

media-type: 브라우저에 이 코드가 어떤 종류의 미디어인지 알려줍니다. 여기에는 다음과 같은 값을 사용할 수 있습니다.

  • all — 모든 미디어 타입 디바이스용.
  • print — 프린터용.
  • screen — 데스크톱 화면, 랩톱, 태블릿, 휴대폰 등.
  • speech — 페이지를 소리 내어 읽는 스크린 리더용입니다.

media-expression: CSS를 적용하기 위해 전달해야 하는 규칙입니다.

예를 들어 표현식에서 화면 너비를 600px로 지정하면 화면 크기가 이 너비와 일치할 때만 관련 CSS 스타일이 적용되고, 그렇지 않으면 비활성 상태로 유지됩니다.

{ /* CSS styles go here */ }: 여기에는 지정된 media-type과 media-expression에 적용하려는 CSS 스타일이 작성됩니다.

1
2
3
4
5
@media screen and (max-width: 600px) {
  body {
    background-color: red;
  }
}

여기서 media-type은 화면이고 media-expression은 max-width: 600px이므로 화면 너비가 600px 이하일 때 본문의 배경색이 변경됩니다(여기서는 최대 너비가 600px이므로).

제공된 미디어 표현식을 중단점이라고도 합니다. 따라서 여기서는 600px가 중단점입니다. 이제 media-expression에 어떤 값을 지정할 수 있는지 생각해 보셨을 것입니다.

media-expression에 가장 일반적으로 사용되는 값을 알려드리겠습니다.

width and height of the device
orientation (for example, tablet/mobile phone is in landscape or portrait mode)
resolution
ranged syntax

  • 디바이스의 너비와 높이
  • 방향(예: 태블릿/휴대폰이 가로 또는 세로 모드인 경우)
  • 해상도
  • 범위 구문

위의 각 값을 이해하기 위해 몇 가지 예를 살펴보겠습니다.

예시

디바이스의 너비와 높이

1
2
3
4
5
6
@media screen and (max-width: 675px) {
  body {
    background-color: red;
    color: white;
  }
}

이 예제에서는 화면 크기가 675px 이하인 경우 배경색과 본문 색상이 변경됩니다.

디바이스 방향

가로 또는 세로로 방향을 지정할 수 있습니다.

1
2
3
4
5
6
7
/* Styles for landscape orientation */
@media screen and (orientation: landscape) {
  body {
    background-color: red;
    color: white;
  }
}

해상도

해상도에 따라 디바이스를 타깃팅할 수도 있습니다.

1
2
3
4
5
6
7
/* Styles for high-resolution displays */
@media screen and (min-resolution: 300dpi) {
  body {
    background-color: red;
    color: white;
  }
}

범위 구문

1
2
3
4
5
6
@media (min-width: 375px) and (max-width: 758px) {
  body {
    background-color: red;
    color: white;
  }
}

이 예제에서는 화면 크기가 375px에서 758px 사이인 경우 배경색과 본문 색상이 변경됩니다.

미디어 쿼리를 사용하면 디바이스마다 다른 CSS 스타일을 설정할 수 있습니다.

일반적인 중단점

이제 미디어 쿼리에 대해 배우고 나면 "화면의 중단점(breakpoint)을 어떻게 알 수 있나요?"라는 질문이 생길 수 있습니다.🤔

다음은 디바이스에 일반적으로 사용되는 몇 가지 중단점입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 초대형 화면 */
@media (min-width: 1920px) {
  /* CSS styles go here */
}

/* 데스크톱 */
@media (min-width: 1200px) and (max-width: 1919px) {
  /* CSS styles go here */
}

/* 노트북/대형 태블릿 */
@media (min-width: 992px) and (max-width: 1199px) {
  /* CSS styles go here */
}

/* 소형 태블릿 */
@media (min-width: 768px) and (max-width: 991px) {
  /* CSS styles go here */
}

/* 초소형 디바이스 */
@media (min-width: 481px) and (max-width: 767px) {
  /* CSS styles go here */
}

/* 모바일 */
@media (max-width: 480px) {
  /* CSS styles go here */
}

표준 중단점은 명시적으로 정의되어 있지 않지만 일반적으로 사용되는 이러한 중단점을 사용하여 웹사이트를 반응형으로 만들 수 있습니다.

Share