미디어 쿼리(Media Query)

Media Query는 웹 페이지의 스타일을 스마트폰, 태블릿, PC 등 다양한 화면 크기에 따라 최적의 레이아웃과 디자인을 보여주기 위해 사용합니다.

기본 구조

Media Query는 @media로 시작하며, 그 뒤에 조건을 기술합니다.

해당 조건을 만족하는 경우에 대한 스타일은 중괄호 { } 안에 넣습니다.

예시:

CSS

/* 화면 크기가 600px 미만일 때의 스타일 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue; /* 배경색을 lightblue로 설정 */
  }
}

여기서는 화면 크기가 600px 미만일 때 body의 배경색을 lightblue로 설정합니다.