[jQuery] jQuery CSS 미디어 쿼리 툴팁

26 Dec 2023

jQuery

이 블로그 포스트에서는 jQuery를 사용하여 CSS 미디어 쿼리에 따라 동적으로 툴팁을 표시하는 방법을 알아보겠습니다.

미디어 쿼리(Media Query)란?

미디어 쿼리는 웹 페이지가 특정 장치나 뷰포트 크기에 따라 스타일을 변경할 수 있도록 하는 CSS 기능입니다. 흔히 반응형 웹 디자인을 구현하는 데 사용됩니다.

jQuery를 활용한 CSS 미디어 쿼리 툴팁 만들기

먼저, jQuery를 사용하여 툴팁을 동적으로 생성하고 스타일을 변경하는 간단한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>미디어 쿼리 툴팁 예제</title>
  <style>
    .tooltip {
      position: absolute;
      display: none;
      background-color: #000;
      color: #fff;
      padding: 5px;
      border-radius: 5px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $(window).on('resize', function() {
        var tooltip = $('.tooltip');
        if ($(window).width() < 768) {
          tooltip.text('Mobile Tooltip').show();
        } else {
          tooltip.text('Desktop Tooltip').show();
        }
      });
    });
  </script>
</head>
<body>
  <div class="tooltip"></div>
</body>
</html>

위의 예제는 jQuery를 사용하여 브라우저의 너비에 따라 동적으로 툴팁을 변경합니다. 미디어 쿼리에 따라 화면이 작을 때는 ‘Mobile Tooltip’을, 크을 때는 ‘Desktop Tooltip’을 표시합니다.

마무리

이렇게 jQuery를 사용하여 CSS 미디어 쿼리에 따라 동적으로 툴팁을 표시하는 방법을 살펴보았습니다. 이 기술을 응용하여 더 다양한 상황에 맞는 반응형 UI를 만들어볼 수 있습니다.

더 많은 미디어 쿼리나 jQuery에 대한 정보는 MDN Web Docs와 jQuery 공식 사이트에서 확인할 수 있습니다.