[javascript] jQuery를 사용한 이미지 갤러리 구현 방법

01 Dec 2023

javascript

이번 블로그 포스트에서는 jQuery를 사용하여 이미지 갤러리를 구현하는 방법에 대해 알아보겠습니다. jQuery는 자바스크립트 라이브러리로, 강력한 DOM 조작 기능을 제공하여 웹 개발을 간편하게 할 수 있습니다.

HTML 구조 설정하기

먼저, HTML 구조를 설정해야 합니다. 이미지 갤러리를 담을 컨테이너와 이미지를 나타낼 요소를 생성합니다. 예를 들어, 다음과 같은 HTML 코드를 작성할 수 있습니다.

<div id="gallery">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

jQuery 스크립트 추가하기

이제 jQuery 스크립트를 추가하여 이미지 갤러리에 필요한 기능을 구현합니다. 먼저, jQuery 라이브러리를 HTML 파일에 포함시키는 스크립트 태그를 추가합니다.

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

그리고 이미지 갤러리의 기능을 정의하는 jQuery 스크립트를 작성합니다.

$(document).ready(function() {
  // 갤러리 이미지를 클릭했을 때의 동작 설정
  $('#gallery img').click(function() {
    // 클릭한 이미지의 소스 가져오기
    var src = $(this).attr('src');
    
    // 이미지를 큰 팝업 화면으로 보여주기
    $('<div class="popup"><img src="' + src + '"></div>').appendTo('body');
    
    // 팝업 화면을 클릭했을 때 사라지도록 설정
    $('.popup').click(function() {
      $(this).remove();
    });
  });
});

스타일링 추가하기

이미지 갤러리가 정상적으로 동작하도록 스타일을 추가해야 합니다. CSS 파일에 다음 스타일을 추가하여 팝업 화면이 나타날 때 화면을 어둡게 하고 이미지를 가운데 정렬합니다.

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

결과 확인하기

이제 웹 브라우저에서 HTML 파일을 열어 이미지 갤러리가 정상적으로 동작하는지 확인해보세요. 갤러리 이미지를 클릭하면 해당 이미지가 팝업 화면으로 나타나고, 팝업 화면을 클릭하면 사라집니다.

이렇게 jQuery를 사용하여 이미지 갤러리를 구현할 수 있습니다. jQuery는 강력한 DOM 조작 기능과 다양한 플러그인을 제공하기 때문에 웹 개발에 많은 도움이 됩니다.

HTML 구조 설정하기

jQuery 스크립트 추가하기

스타일링 추가하기

결과 확인하기

참고 자료