CSS와 JavaScript로 반응형 모달 이미지 만드는 방법

웹 페이지에서 썸네일 이미지를 클릭하면 확대된 이미지가 화면 중앙에 나타나는 모달(Modal) 이미지는 갤러리나 포트폴리오 사이트에서 널리 사용되는 UI 패턴입니다. 이 글에서는 외부 라이브러리 없이 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 {
   margin-left: 38%;
   border-radius: 5px;
   cursor: pointer;
   transition: 0.3s;
   height: 250px;
   width: 250px;
}
.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 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"
   alt="Snow" style="width:100%;max-width:300px">
<div class="modal">
<span class="close">×</span>
<img class="modalImage" id="img01">
<div id="caption">Image 1</div>
</div>
<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
document.querySelector('.ImgThumbnail').addEventListener('click',(event)=>{
   modalEle.style.display = "block";
   modalImage.src = event.target.src;
})
document.querySelector(".close").addEventListener('click',()=>{
   modalEle.style.display = "none";
})
</script>
</body>
</html>

코드 핵심 설명

CSS 스타일링

.modal — position: fixed로 화면 전체를 덮는 오버레이 역할을 하며, rgba(0,0,0,0.9)로 거의 불투명한 검은 배경을 적용합니다.
.modalImage — max-width: 700px로 확대 이미지의 최대 크기를 제한해 대형 화면에서도 적절한 비율을 유지합니다.
.close — 우측 상단에 고정된 × 닫기 버튼으로, 마우스를 올리면 색상이 변하는 transition 효과가 적용되어 있습니다.
@media (max-width: 700px) — 화면 너비가 700px 이하인 모바일 환경에서는 이미지가 width: 100%로 확장되어 반응형으로 동작합니다.

JavaScript 로직

썸네일(.ImgThumbnail)을 클릭하면 모달의 display 속성을 block으로 변경하고, 클릭된 이미지의 src 값을 모달 내부 이미지에 그대로 복사합니다.
닫기 버튼(.close)을 클릭하면 display를 none으로 되돌려 모달을 숨깁니다.

실행 결과

위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다 −

CSS와 JavaScript로 반응형 모달 이미지 만드는 방법 – 예제 코드로 배우기

이미지를 클릭하면 아래와 같이 모달이 열립니다 −

CSS와 JavaScript로 반응형 모달 이미지 만드는 방법 – 예제 코드로 배우기