728x90
안녕하세요 오늘은 HTML, CSS, JavaScript 를 활용해 로컬에서 이미지를 불러온 후
이미지를 클릭하면 모달 창에 확대된 이미지를 띄워주는 간단한 웹 애플리케이션을 만들어보겠습니다.
gallery.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>이미지 갤러리</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
#upload-section {
margin-bottom: 20px;
}
#image-input {
display: none;
}
#upload-label {
display: inline-block;
padding: 10px 20px;
background-color: #4caf50;
color: white;
border-radius: 5px;
cursor: pointer;
}
.gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery img { width: 150px; height: 100px; object-fit: cover; cursor: pointer; border: 2px solid #ccc; border-radius: 5px; transition: transform 0.2s; }
.gallery img:hover { transform: scale(1.05); }
/* 모달 스타일 */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); justify-content: center; align-items: center; }
.modal img { max-width: 90%; max-height: 80%; border: 5px solid white; border-radius: 10px; }
.modal .close { cursor: pointer; position: absolute; top: 20px; right: 30px; font-size: 30px; color: white; }
</style>
</head>
<body>
<h1>이미지 갤러리</h1>
<!-- 이미지 업로드 섹션 -->
<div id="upload-section">
<label for="image-input" id="upload-label">이미지 업로드</label>
<input type="file" id="image-input" accept="image/*" multiple>
</div>
<!-- 갤러리 섹션 -->
<div class="gallery" id="gallery"></div>
<!-- 모달 창 -->
<div class="modal" id="modal">
<span class="close" id="close">×</span>
<img id="modal-img" src="" alt="Expanded Image">
</div>
<script>
const imageInput = document.getElementById('image-input');
const gallery = document.getElementById('gallery');
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modal-img');
const closeBtn = document.getElementById('close');
// 이미지 업로드 시 처리
imageInput.addEventListener('change', (e) => {
const files = e.target.files;
if (files) {
Array.from(files).forEach(file => {
if (!file.type.startsWith('image/')) return; // 이미지 파일만 처리
const reader = new FileReader();
reader.onload = (event) => {
const img = document.createElement('img');
img.src = event.target.result;
img.alt = file.name;
gallery.appendChild(img);
};
reader.readAsDataURL(file);
});
}
// 파일 선택 후 input 초기화
imageInput.value = '';
});
// 갤러리에서 이미지 클릭 시 모달 열기
gallery.addEventListener('click', (e) => {
if (e.target && e.target.nodeName === 'IMG') {
modal.style.display = 'flex';
modalImg.src = e.target.src;
}
});
// 모달 닫기 버튼 클릭 시 모달 닫기
closeBtn.addEventListener('click', () => {
modal.style.display = 'none';
});
// 모달 외부 클릭 시 모달 닫기
window.addEventListener('click', (e) => {
if (e.target === modal) {
modal.style.display = 'none';
}
});
</script>
</body>
</html>
1. 이미지 업로드
로컬에서 이미지 파일을 선택하고 갤러리에 추가합니다.
<div id="upload-section">
<label for="image-input" id="upload-label">이미지 업로드</label>
<input type="file" id="image-input" accept="image/*" multiple>
</div>
2. 이미지를 확대하는 모달 창
<div class="modal" id="modal">
<span class="close" id="close">×</span>
<img id="modal-img" src="" alt="Expanded Image">
</div>
<script>
// 갤러리에서 이미지 클릭 시 모달 열기
gallery.addEventListener('click', (e) => {
if (e.target && e.target.nodeName === 'IMG') {
modal.style.display = 'flex';
modalImg.src = e.target.src;
}
});
// 모달 닫기 버튼 클릭 시 모달 닫기
closeBtn.addEventListener('click', () => {
modal.style.display = 'none';
});
// 모달 외부 클릭 시 모달 닫기
window.addEventListener('click', (e) => {
if (e.target === modal) {
modal.style.display = 'none';
}
});
</script>
시연영상입니다
감사합니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] Debounce와 Throttle: 차이점과 활용 방법 (0) | 2025.03.10 |
|---|---|
| [JavaScript] 싱글톤 패턴 사용하기 (0) | 2025.02.17 |
| [JavaScript] 다중 Progress Bar와 전체 진행률 구현하기 (2) - 일시중지 및 삭제버튼 추가 (0) | 2025.02.05 |
| [JavaScript]TensorFlow.js로 고양이 이미지 판별 앱 만들기 (0) | 2025.02.04 |
| [JavaScript] 사용자 입력 기반 다중 Progress Bar와 전체 진행률 구현하기 (0) | 2025.01.22 |