[jQuery] jQuery CSS 미디어 쿼리 장치 종류

26 Dec 2023

jQuery

웹 개발 과정에서 반응형 디자인을 구현하는 것은 매우 중요합니다. 미디어 쿼리를 사용하면 특정 장치의 속성을 확인하여 그에 따라 스타일을 조정할 수 있습니다. jQuery CSS 미디어 쿼리를 이용하면 여러 가지 장치 종류를 확인하고 필요한 조치를 취할 수 있습니다.

장치 종류 확인

jQuery를 사용하여 장치 종류를 확인하려면 window.matchMedia() 함수를 사용합니다.

예를 들어, 아래의 코드는 뷰포트의 너비가 600 픽셀 이하이면 “스몰 디바이스”를, 601부터 1024 픽셀 사이면 “미디엄 디바이스”를, 1025 픽셀 이상이면 “라지 디바이스”를 콘솔에 출력합니다.

if (window.matchMedia("(max-width: 600px)").matches) {
  console.log("스몰 디바이스");
} else if (window.matchMedia("(min-width: 601px) and (max-width: 1024px)").matches) {
  console.log("미디엄 디바이스");
} else {
  console.log("라지 디바이스");
}

장치 종류별 스타일 적용

특정 장치에 따라 스타일을 적용하기 위해서는 위의 코드를 활용하여 원하는 스타일을 적용할 수 있습니다.

if (window.matchMedia("(max-width: 600px)").matches) {
  // 스몰 디바이스용 스타일
} else if (window.matchMedia("(min-width: 601px) and (max-width: 1024px)").matches) {
  // 미디엄 디바이스용 스타일
} else {
  // 라지 디바이스용 스타일
}

결론

jQuery CSS 미디어 쿼리를 이용하여 장치 종류를 확인하고 그에 따라 스타일을 조정할 수 있습니다. 반응형 디자인을 구현할 때 이러한 방법을 활용하여 다양한 장치에서 보기 좋은 사용자 경험을 제공할 수 있습니다.

참고 자료: jQuery 공식 문서

목차

장치 종류 확인

장치 종류별 스타일 적용

결론