jQuery는 자바스크립트 라이브러리로, 웹 개발을 더 효율적이고 간편하게 할 수 있게 도와줍니다. 이번에는 jQuery를 활용하여 이미지 갤러리를 만드는 방법에 대해 알아보겠습니다.

HTML 구조 설정하기

먼저, 이미지 갤러리를 표현할 HTML 구조를 설정해야 합니다. 예를 들어, 다음과 같이 각 이미지를 포함할 <div> 요소를 생성합니다.

<div id="gallery">
  <div class="image">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="image">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="image">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS 스타일 적용하기

각 이미지를 가로로 배열하기 위해 CSS 스타일을 적용합니다. 예를 들어, 다음과 같이 스타일을 설정할 수 있습니다.

#gallery {
  display: flex;
}

.image {
  margin-right: 10px;
}

.image:last-child {
  margin-right: 0;
}

jQuery로 이미지 갤러리 기능 추가하기

이제 jQuery를 사용하여 이미지 갤러리 기능을 추가해보겠습니다. 각 이미지에 대해 클릭 이벤트를 등록하여 큰 이미지로 확대되도록 만들어보겠습니다.

$(document).ready(function() {
  $('.image').click(function() {
    var imageUrl = $(this).find('img').attr('src');
    $('#gallery').css('background-image', 'url(' + imageUrl + ')');
  });
});

위의 코드는 문서가 준비되었을 때 실행되도록 설정되어 있습니다. image 클래스를 갖는 각 요소에 클릭 이벤트가 등록되고, 클릭된 이미지의 소스 URL을 가져와 gallery 요소의 배경 이미지로 설정합니다.

결과 확인하기

이제 웹 페이지를 브라우저로 열어 이미지 갤러리를 확인해보세요. 각 이미지를 클릭하면 배경으로 그 이미지가 표시될 것입니다.

이러한 방법으로 jQuery를 사용하여 간단한 이미지 갤러리를 만들 수 있습니다. 필요에 따라 추가적인 기능이나 스타일을 적용할 수도 있습니다. jQuery의 다양한 기능을 활용하여 웹 개발을 더욱 효율적으로 수행할 수 있습니다.

참고 자료

• jQuery 공식 홈페이지
• jQuery API 문서