CSS[Media Query]

CSS에서 Media Query는 뷰포트 크기, 장치의 종류, 해상도 등의 특성에 따라 CSS 스타일을 조정하는 데 사용됩니다. 

 

이를 통해 반응형 웹 디자인을 구현할 수 있습니다.

Media Query는 @media 규칙을 사용하여 작성되며, 미디어 타입과 조건부 블록을 포함합니다. 

 

미디어 타입은 스타일이 적용되는 장치의 유형을 정의하며, 다음과 같은 타입이 있습니다.

-all: 모든 장치에 적용되는 기본값
-screen: 컴퓨터 모니터, 태블릿, 스마트폰 등 스크린 기반의 장치에 적용
-print: 프린터에 적용
-speech: 음성 합성 장치에 적용

미디어 쿼리의 조건부 블록에는 미디어 쿼리가 참조하는 특성과 그 값을 정의합니다. 

 

다음은 일반적인 미디어 특성과 그 값입니다.

-width: 뷰포트의 너비를 픽셀 단위로 정의합니다.
-height: 뷰포트의 높이를 픽셀 단위로 정의합니다.
-orientation: 뷰포트의 방향을 정의합니다. portrait(세로), landscape(가로) 값을 갖습니다.
-aspect-ratio: 뷰포트의 가로 세로 비율을 정의합니다.
-device-width: 장치의 스크린 너비를 픽셀 단위로 정의합니다.
-device-height: 장치의 스크린 높이를 픽셀 단위로 정의합니다.
-color: 출력 가능한 색상 수를 정의합니다.
-resolution: 장치의 해상도를 정의합니다.

미디어 쿼리에는 조건이 하나 이상 포함될 수 있습니다. 이러한 조건은 and, or, not 연산자로 결합될 수 있습니다.

예시 코드 블록은 다음과 같습니다. 뷰포트의 크기에 따라 글씨 크기와 색상이 변경됩니다.

@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
    color: blue;
  }
}

@media screen and (min-width: 769px) {
  body {
    font-size: 24px;
    color: red;
  }
}

위의 코드블럭은 미디어 쿼리를 사용하여 스크린의 크기에 따라 다른 스타일을 적용하는 방법을 보여줍니다.

해당 코드블록은 max-width: 768px 미디어 쿼리가 적용된 경우, 

 

h1 요소의 폰트 크기를 32px로, p 요소의 폰트 크기를 16px로 변경합니다. 그 외의 경우에는 기본 스타일이 적용됩니다.

미디어 쿼리는 모바일 기기와 같이 스크린의 크기가 작은 경우에는 간단한 레이아웃을 적용하고, 

 

데스크탑과 같이 큰 스크린의 경우에는 보다 복잡한 레이아웃을 적용하는 등, 

 

다양한 디바이스에 대한 반응형 웹 디자인을 구현하는데 사용됩니다.