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

미디어 쿼리의 개념

미디어 쿼리(Media Queries)는 CSS3의 기능으로, 장치의 특성과 화면 크기에 따라 스타일 및 레이아웃을 동적으로 조정하는 데 사용됩니다. 미디어 쿼리는 미디어 유형(예: 스크린, 프린트, 휴대폰) 및 미디어 특성(예: 화면 너비, 장치 종류)에 따라 스타일을 조건부로 적용할 수 있습니다.

미디어 쿼리는 @media 규칙 내에 정의되며, 일반적으로 CSS 파일의 상단에 위치합니다. 다음은 미디어 쿼리의 구문 예시입니다:

@media screen and (max-width: 600px) {
  /* 스크린 너비가 600px 이하인 경우에 적용될 스타일 */
}

위의 예시는 스크린 미디어 유형에 대해 스크린 너비가 600px 이하인 경우에만 적용되는 스타일을 정의합니다.

미디어 쿼리의 특성

미디어 쿼리는 다양한 미디어 특성과 연산자를 사용하여 조건을 지정할 수 있습니다. 주요한 미디어 특성에는 다음과 같은 것들이 있습니다:

• width: 뷰포트 너비
• height: 뷰포트 높이
• orientation: 뷰포트 방향 (가로 또는 세로)
• aspect-ratio: 뷰포트 너비와 높이의 비율
• device-width: 렌더링 표면 너비
• device-height: 렌더링 표면 높이

미디어 쿼리는 반응형 웹 디자인에 사용되며, 다양한 장치 및 화면 크기에 따라 적절한 스타일링 및 레이아웃을 제공하는 데 유용합니다. 예를 들어, 모바일 환경에서는 단일 열 레이아웃을 사용하고, 데스크탑 환경에서는 멀티 열 레이아웃을 사용할 수 있습니다.