CSS와 JavaScript를 활용하면 썸네일 이미지를 클릭했을 때 화면 전체에 확대된 이미지를 보여주는 모달 이미지 갤러리를 손쉽게 구현할 수 있습니다. 이번 글에서는 실제로 동작하는 완전한 예제 코드와 함께, 각 코드가 어떤 역할을 하는지 단계별로 자세히 살펴보겠습니다.
전체 예제 코드
아래는 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: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
.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 {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
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/3540375/pexels-photo-3540375.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
<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" />
<!-- 모달(Modal) 영역 -->
<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. CSS 스타일링
.ImgThumbnail 클래스는 갤러리에 나열되는 썸네일 이미지의 스타일을 담당합니다. 모서리를 둥글게 처리하고, 커서를 포인터로 바꾸며, transition: 0.3s; 덕분에 상호작용 시 부드러운 시각 효과가 적용됩니다.
.modal 클래스는 화면 전체를 덮는 오버레이입니다. 평소에는 display: none;으로 숨겨져 있다가, 이미지를 클릭하는 순간 JavaScript에 의해 화면에 나타납니다. 배경은 rgba(0, 0, 0, 0.9)의 반투명 검정색으로 처리해 뒷배경이 은은하게 비치도록 했습니다.
.close 클래스는 모달 오른쪽 위에 배치되는 닫기(X) 버튼 스타일입니다. 마우스를 올리거나(hover) 키보드로 포커스를 주면 빨간색으로 변해 클릭할 수 있음을 직관적으로 알려 줍니다.
마지막으로 미디어 쿼리(@media)를 활용해 화면 너비가 700px 이하인 모바일 환경에서는 모달 이미지가 전체 폭을 차지하도록 하여 반응형까지 지원합니다.
2. JavaScript 로직
JavaScript 부분은 의외로 단순합니다. 먼저 document.querySelector()로 모달 요소와 모달 안의 이미지 요소를 각각 가져옵니다.
이후 querySelectorAll(".ImgThumbnail")로 선택한 모든 썸네일에 클릭 이벤트 리스너를 등록합니다. 썸네일이 클릭되면 다음 두 가지가 실행됩니다.
modalEle.style.display = "block";— 숨어 있던 모달을 화면에 표시합니다.modalImage.src = event.target.src;— 클릭된 썸네일의 이미지 경로(src)를 모달 이미지에 복사해 큰 화면으로 보여 줍니다.
마지막으로 닫기 버튼(.close)에도 클릭 이벤트를 연결해, 버튼을 누르면 모달이 다시 display: none;으로 돌아가며 사라지도록 처리했습니다.
실행 결과
위 코드를 브라우저에서 열면 세 개의 썸네일 이미지가 표시됩니다.
이미지 중 하나를 클릭하면 해당 이미지가 어두운 오버레이 위에 확대되어 나타나고, 오른쪽 위의 X 버튼을 누르면 모달이 닫힙니다.
