미디어 쿼리(media query) 사용법 (반응형 웹)

소개

반응형 웹 디자인은 다양한 기기와 화면 크기에 대해 최적화된 사용자 경험을 제공하기 위한 중요한 요소입니다. 미디어 쿼리는 CSS에 반응형 웹을 구현하는 데 사용되는 강력한 도구로, 미디어 유형, 장치의 픽셀 밀도, 화면 크기 등과 같은 다양한 조건에 따라 스타일을 적용할 수 있습니다.

기본 구문

미디어 쿼리는 @media 키워드를 사용하여 CSS 규칙을 정의하는 데 사용됩니다. 미디어 쿼리 규칙은 특정 미디어 유형 또는 조건이 참인 경우에만 적용되는 스타일 규칙을 포함합니다. 기본 구문은 다음과 같습니다.

@media 미디어 유형 and (조건) {
    /* 스타일 규칙 */
}

미디어 유형

미디어 유형은 미디어 장치의 범주를 지정하는 데 사용됩니다. 일반적으로 사용되는 미디어 유형은 다음과 같습니다.

all: 모든 미디어 타입에 적용됩니다.
screen: 컴퓨터 스크린, 태블릿, 스마트폰과 같은 스크린 기반 장치에 적용됩니다.
print: 인쇄 장치에 적용됩니다.
speech: 음성 합성 장치에 적용됩니다.

조건

미디어 유형 뒤에 and 키워드를 사용하여 조건을 지정할 수 있습니다. 여러 가지 조건을 함께 사용할 수도 있습니다. 일반적으로 사용되는 조건은 다음과 같습니다.

width: 뷰포트의 너비를 기준으로 스타일을 적용합니다.
height: 뷰포트의 높이를 기준으로 스타일을 적용합니다.
min-width: 최소 뷰포트 너비를 기준으로 스타일을 적용합니다.
max-width: 최대 뷰포트 너비를 기준으로 스타일을 적용합니다.
orientation: 뷰포트 방향(가로 또는 세로)을 기준으로 스타일을 적용합니다.

예제

다음은 미디어 쿼리를 사용하여 반응형 웹 디자인을 구현하는 예제입니다.

## 문서 스타일

- 각 항목은 가로로 표시됩니다.
- 배경색은 흰색입니다.

@media (max-width: 768px) {
  /* 뷰포트 너비가 768px보다 작을 때 적용되는 스타일 */

  body {
    background-color: lightblue;
  }

  ul {
    flex-direction: column;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 뷰포트 너비가 769px 이상이고 1024px 이하일 때 적용되는 스타일 */

  body {
    background-color: lightgreen;
  }

  ul {
    flex-wrap: wrap;
  }
}

@media (min-width: 1025px) {
  /* 뷰포트 너비가 1025px 이상일 때 적용되는 스타일 */

  body {
    background-color: lightyellow;
  }
}

위의 예제에서는 유저의 뷰포트 너비에 따라 배경색과 리스트 표시 방식이 변경됩니다. 뷰포트 너비가 768px보다 작을 때는 배경색이 lightblue로, 리스트 항목이 세로 방향으로 정렬됩니다.

뷰포트 너비가 769px 이상이고 1024px 이하일 때는 배경색이 lightgreen으로, 리스트 항목이 가로 방향으로 자동으로 줄바꿈되도록 설정됩니다.

뷰포트 너비가 1025px 이상일 때는 배경색이 lightyellow로 변경됩니다.

위의 예제는 간단한 반응형 웹을 구현하는 데 사용되는 미디어 쿼리의 기본 사용법을 보여줍니다. 문서의 특정 부분에 스타일을 추가하거나 변경하고자 할 때, 미디어 쿼리를 사용하여 원하는 조건에 따라 스타일을 적용할 수 있습니다.

yynt

미디어 쿼리(media query) 사용법 (반응형 웹)