미디어 쿼리(Media Query)

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

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

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

조건은 and, not, only, min-width, max-width 등을 사용해 지정할 수 있습니다.

and : 여러 조건을 결합할 때 사용
not : 조건을 만족하지 않을 때 사용
only : 특정 브라우저에서만 적용할 때 사용
min-width : 지정된 너비 이상일 때 적용
max-width : 지정된 너비 이하일 때 적용

예를 들어 화면 너비가 600px 미만일 때 배경색을 lightblue로 설정하고 싶다면 다음과 같이 작성합니다.

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

또는 화면 너비가 600px 이상이고 1200px 미만일 때 배경색을 lightblue로 설정하고 싶다면 다음과 같이 작성합니다.

CSS
/* 화면 너비가 600px 이상이고 1200px 미만일 때의 스타일 */
@media screen and (min-width: 600px) and (max-width: 1200px) {
  body {
    background-color: lightblue; /* 배경색을 lightblue로 설정 */
  }
}

오른쪽 상자를 표시하는 코드 실행 결과 화면의 너비를 조절하고, Media Query가 어떻게 적용되는지 확인해보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!