<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사진 갤러리</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
}
h1 {
margin: 20px;
}
/* 갤러리 스타일 */
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-width: 900px;
}
.gallery img {
width: 100%;
aspect-ratio: 1 / 1; /* 정사각형 유지 */
object-fit: cover;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s ease;
}
.gallery img:hover {
transform: scale(1.05);
}
/* 라이트박스 스타일 */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
z-index: 10;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
border-radius: 5px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.lightbox:active {
display: flex;
}
.lightbox .close {
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
color: white;
cursor: pointer;
z-index: 20;
}
</style>
</head>
<body>
<h1>사진 갤러리</h1>
<div class="gallery">
<img src="image/1.jpg" alt="사진 1">
<img src="image/2.jpg" alt="사진 2">
<img src="image/3.jpg" alt="사진 3">
<img src="image/4.jpg" alt="사진 4">
<img src="image/5.jpg" alt="사진 5">
<img src="image/6.jpg" alt="사진 6">
<img src="image/7.jpg" alt="사진 7">
<img src="image/8.jpg" alt="사진 8">
<img src="image/9.jpg" alt="사진 9">
</div>
<!-- 라이트박스 -->
<div class="lightbox" id="lightbox">
<span class="close" onclick="closeLightbox()">×</span>
<img id="lightbox-img" src="" alt="클릭한 이미지">
</div>
<script>
// 라이트박스 열기
const galleryImages = document.querySelectorAll('.gallery img');
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
galleryImages.forEach(image => {
image.addEventListener('click', () => {
lightbox.style.display = 'flex';
lightboxImg.src = image.src;
});
});
// 라이트박스 닫기
function closeLightbox() {
lightbox.style.display = 'none';
}
// 라이트박스 클릭 시 닫기
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox || e.target.classList.contains('close')) {
closeLightbox();
}
});
</script>
</body>
</html>
이번에도 역시 chatGPT를 십분 활용하여 만들었다. 여기에 웹에서 직접 사진을 추가하는 기능을 넣어보고도 싶다.
'개발 > 웹(Web)' 카테고리의 다른 글
| [JavaScript] 문서 객체 모델(DOM) : 웹에 노드 추가하고 삭제하기 (톡 게시판 만들기) (0) | 2025.01.02 |
|---|---|
| [JavaScript] 문서 객체 모델(DOM) : 더보기 버튼 만들기 (0) | 2025.01.02 |
| [JavaScript] 객체 : 날짜 계산 프로그램 (독서 일수 계산) (0) | 2024.12.30 |
| [JavaScrip] 객체 : Date 객체 활용 (0) | 2024.12.30 |
| [JavaScript] 두 숫자의 크기를 비교하는 함수 (0) | 2024.12.29 |