📱💻media query min-width, max-width

📱💻media query에서 min-width와 max-width란?

• 화면의 너비를 기준으로 특정 스타일을 적용하는 조건을 정의합니다. 간단하게 말하자면, min-width는 "이 너비보다 크거나 같을 때"(min-width >= x너비)를 의미하고, max-width는 "이 너비보다 작거나 같을 때"(max-width <= x너비)를 의미합니다.

• min-width
  min-width는 설정한 최소 너비에 도달하거나 그보다 클 때 적용되는 스타일을 정의합니다. 즉, 화면의 너비가 min-width에서 정한 값 이상이면 해당 스타일이 적용됩니다. 이는 화면이 커질 때 적용되는 스타일을 정의할 때 주로 사용됩니다.

@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

이 미디어 쿼리는 화면 너비가 600픽셀 이상일 때 body의 배경색을 lightblue로 설정합니다. 화면이 600픽셀보다 작으면 이 스타일은 적용되지 않습니다.

• max-width
  max-width는 설정한 최대 너비에 도달하거나 그보다 작을 때 적용되는 스타일을 정의합니다. 즉, 화면의 너비가 max-width에서 정한 값 이하면 해당 스타일이 적용됩니다. 이는 화면이 작아질 때 적용되는 스타일을 정의할 때 주로 사용됩니다.

@media (max-width: 599px) {
  body {
    background-color: lightcoral;
  }
}

이 미디어 쿼리는 화면 너비가 599픽셀 이하일 때 body의 배경색을 lightcoral로 설정합니다. 화면이 599픽셀보다 크면 이 스타일은 적용되지 않습니다.

• 정리
  -min-width: 화면이 이 너비 이상일 때 적용되는 스타일. 화면이 커질 때 사용.
  -max-width: 화면이 이 너비 이하일 때 적용되는 스타일. 화면이 작아질 때 사용.
  -이 두 조건을 사용하여 반응형 웹 디자인을 구현할 때 다양한 화면 크기에 맞는 스타일을 적용할 수 있습니다.

출처-GPT-4