CSS와 JavaScript만 활용하면 별도의 라이브러리 없이도 클릭한 이미지가 확대되어 표시되는 모달 형태의 이미지 갤러리를 손쉽게 구현할 수 있습니다. 아래 예제에서는 썸네일 이미지를 클릭하면 해당 이미지가 모달 창에 크게 나타나고, 닫기 버튼(×)을 누르면 모달이 사라지는 기능을 담은 전체 코드를 소개합니다.
전체 코드 예제
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.ImgThumbnail {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
height: 250px;
width: 250px;
}
.ImgThumbnail:nth-of-type(1) {
margin-left: 20%;
}
.modal {
display: none;
position: relative;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 60%;
overflow: auto;
}
.modalImage {
margin: auto;
display: block;
width: 50%;
height: 60%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.close {
font-weight: bolder;
position: absolute;
right: 25%;
color: #ffffff;
font-size: 40px;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: rgb(255, 0, 0);
cursor: pointer;
}
@media only screen and (max-width: 700px) {
.modalImage {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Image Modal Gallery Example</h1>
<img class="ImgThumbnail" src="https://images.pexels.com/photos/3635300/pexels-photo-3635300.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img class="ImgThumbnail" src="https://i.picsum.photos/id/237/536/354.jpg"/>
<img class="ImgThumbnail" src="https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01" />
</div>
<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail")).forEach(item => {
item.addEventListener("click", event => {
modalEle.style.display = "block";
modalImage.src = event.target.src;
});
});
document.querySelector(".close").addEventListener("click", () => {
modalEle.style.display = "none";
});
</script>
</body>
</html>코드 동작 원리
이 갤러리의 핵심 로직은 크게 세 부분으로 나눌 수 있습니다.
1. HTML 구조
화면에는 .ImgThumbnail 클래스를 가진 썸네일 이미지 세 개가 배치되고, 그 아래에 처음에는 보이지 않는 .modal 컨테이너가 준비됩니다. 모달 안에는 닫기 버튼(×)과 확대된 이미지를 보여줄 .modalImage 요소가 포함되어 있습니다.
2. CSS 스타일링
.modal은 기본적으로 display: none;으로 설정되어 있어 페이지 로딩 시에는 보이지 않습니다. 썸네일에는 cursor: pointer;와 transition: 0.3s;를 적용해 마우스 오버 시 자연스러운 반응을 유도하고, @media 쿼리를 통해 화면 너비가 700px 이하인 모바일 환경에서는 모달 이미지가 전체 폭을 차지하도록 반응형 처리까지 되어 있습니다.
3. JavaScript 이벤트 처리
querySelectorAll(".ImgThumbnail")로 모든 썸네일을 선택한 뒤, 각각에 클릭 이벤트 리스너를 등록합니다. 썸네일을 클릭하면 모달의 display 값이 block으로 변경되어 화면에 나타나고, 클릭된 이미지의 src 값이 모달 이미지에 그대로 복사됩니다. 닫기 버튼을 클릭하면 display가 다시 none으로 바뀌며 모달이 사라집니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 출력됩니다.
썸네일 중 하나를 클릭하면 해당 이미지가 모달 창에 확대되어 표시되고, 우측 상단의 × 버튼을 누르면 원래 화면으로 돌아갑니다. 이 방식은 외부 플러그인 없이 순수 CSS와 바닐라 JavaScript만으로 구현되므로 가볍고, 필요에 따라 캡션 추가나 애니메이션 효과 등으로 자유롭게 확장할 수 있다는 장점이 있습니다.