[jQuery] jQuery CSS 반응형 이미지

26 Dec 2023

jQuery

이번에는 jQuery를 사용하여 CSS를 활용해 반응형 이미지를 만드는 방법에 대해 알아보겠습니다.

1. 필요한 라이브러리 및 프레임워크

이 예제에서는 jQuery 라이브러리를 사용합니다. 따라서, jQuery를 웹 페이지에 추가해야 합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. HTML 구조 설계

우선 CSS를 활용하여 반응형 이미지를 만들기 전에 HTML 구조를 설계해야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery CSS 반응형 이미지</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="responsive-image">
        <img src="image.jpg" alt="Responsive Image">
    </div>
</body>
</html>

3. CSS 스타일링

다음으로, CSS를 사용하여 이미지를 반응형으로 만들어줍니다.

.responsive-image {
    max-width: 100%;
    height: auto;
    width: auto\9; /* old IE fix */
}

4. jQuery 스크립트 추가

이제 jQuery를 사용하여 이미지의 크기를 조정하는 스크립트를 추가합니다.

$(document).ready(function() {
    $(window).on('load resize', function(){
        $('.responsive-image img').each(function(){
            var maxWidth = $(this).parent().width();
            $(this).css('width', '100%');
            if($(this).width() > maxWidth){
                $(this).css('width', maxWidth);
            }
        });
    });
});

5. 결과 확인

웹 페이지를 열어서 이미지를 크기 조절해보면, 창의 크기에 따라 이미지가 반응하여 변하는 것을 확인할 수 있습니다.

이렇게 jQuery와 CSS를 사용하여 간단하게 반응형 이미지를 만들 수 있습니다.

목차

1. 필요한 라이브러리 및 프레임워크

2. HTML 구조 설계

3. CSS 스타일링

4. jQuery 스크립트 추가

5. 결과 확인

참고 자료