From 11bc84764100f08634d2c87ebce5eae2d23c68c5 Mon Sep 17 00:00:00 2001
From: jombee <24sunrin120@sunrint.hs.kr>
Date: Tue, 25 Jun 2024 07:01:02 +0000
Subject: [PATCH] =?UTF-8?q?=EA=B0=A4=EB=9F=AC=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
ajr..더럽다..
THE LOVE
---
10620 황동화/gallery.html | 29 +++++++
10620 황동화/script.js | 113 ++++++++++++++++++++++++++
10620 황동화/styles.css | 161 ++++++++++++++++++++++++++++++++++++++
3 files changed, 303 insertions(+)
create mode 100644 10620 황동화/gallery.html
create mode 100644 10620 황동화/script.js
create mode 100644 10620 황동화/styles.css
diff --git a/10620 황동화/gallery.html b/10620 황동화/gallery.html
new file mode 100644
index 0000000..a74c37a
--- /dev/null
+++ b/10620 황동화/gallery.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ My Image Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/10620 황동화/script.js b/10620 황동화/script.js
new file mode 100644
index 0000000..9ce6eac
--- /dev/null
+++ b/10620 황동화/script.js
@@ -0,0 +1,113 @@
+// script.js
+
+document.addEventListener('DOMContentLoaded', () => {
+ const imageInput = document.getElementById('imageInput');
+ const addImageButton = document.getElementById('addImageButton');
+ const gallery = document.getElementById('gallery');
+ const fileNameSpan = document.getElementById('fileName');
+
+ // 파일 입력 변화 이벤트 리스너
+ imageInput.addEventListener('change', () => {
+ const file = imageInput.files[0];
+ if (file) {
+ fileNameSpan.textContent = file.name;
+ } else {
+ fileNameSpan.textContent = '';
+ }
+ });
+
+ // 이미지 추가 버튼 클릭 이벤트 리스너
+ addImageButton.addEventListener('click', () => {
+ const file = imageInput.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = function(e) {
+ const imgElement = document.createElement('img');
+ imgElement.src = e.target.result;
+ imgElement.alt = 'Uploaded Image';
+
+ // 이미지 분석 및 배경색 결정 로직
+ getAverageColor(imgElement).then(color => {
+ document.body.style.backgroundColor = color;
+ }).catch(error => {
+ console.error('Error calculating average color:', error);
+ });
+
+ const deleteButton = document.createElement('button');
+ deleteButton.classList.add('delete-button');
+ deleteButton.innerText = 'Delete';
+ deleteButton.addEventListener('click', () => {
+ galleryItem.remove();
+ });
+
+ const galleryItem = document.createElement('div');
+ galleryItem.classList.add('gallery-item');
+ galleryItem.appendChild(imgElement);
+ galleryItem.appendChild(deleteButton);
+ gallery.appendChild(galleryItem);
+
+ imgElement.addEventListener('click', () => {
+ openLightbox(imgElement.src);
+ });
+
+ // 파일 선택 후 파일명 초기화
+ imageInput.value = '';
+ fileNameSpan.textContent = '';
+ };
+ reader.readAsDataURL(file);
+ }
+ });
+
+ // 이미지 클릭시 라이트박스 열기
+ function openLightbox(src) {
+ const lightbox = document.createElement('div');
+ lightbox.id = 'lightbox';
+ lightbox.style.position = 'fixed';
+ lightbox.style.top = '0';
+ lightbox.style.left = '0';
+ lightbox.style.width = '100%';
+ lightbox.style.height = '100%';
+ lightbox.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+ lightbox.style.display = 'flex';
+ lightbox.style.alignItems = 'center';
+ lightbox.style.justifyContent = 'center';
+ lightbox.style.zIndex = '1000';
+ lightbox.innerHTML = `
`;
+ document.body.appendChild(lightbox);
+
+ lightbox.addEventListener('click', () => {
+ lightbox.remove();
+ });
+ }
+
+ // 이미지 주요 색상 추출 함수
+ function getAverageColor(imgElement) {
+ return new Promise((resolve, reject) => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ canvas.width = imgElement.width;
+ canvas.height = imgElement.height;
+ ctx.drawImage(imgElement, 0, 0);
+
+ let r = 0, g = 0, b = 0;
+ let count = 0;
+
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ const data = imageData.data;
+
+ for (let i = 0; i < data.length; i += 4) {
+ r += data[i];
+ g += data[i + 1];
+ b += data[i + 2];
+ count++;
+ }
+
+ r = Math.floor(r / count);
+ g = Math.floor(g / count);
+ b = Math.floor(b / count);
+
+ const rgbColor = `rgb(${r}, ${g}, ${b})`;
+ resolve(rgbColor);
+ });
+ }
+});
diff --git a/10620 황동화/styles.css b/10620 황동화/styles.css
new file mode 100644
index 0000000..e4f1c1e
--- /dev/null
+++ b/10620 황동화/styles.css
@@ -0,0 +1,161 @@
+/* styles.css */
+
+body {
+ font-family: 'Montserrat', sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f0f0f0;
+ overflow-x: hidden;
+ background-image: linear-gradient(to bottom right, #b6dfff, #ffffff); /* AJR 스타일의 배경 그라데이션 */
+ transition: background-color 0.5s ease; /* 배경색 전환 트랜지션 */
+}
+
+header {
+ background-color: rgba(255, 151, 151, 0.8); /* 헤더 배경색 설정 */
+ color: white;
+ text-align: center;
+ padding: 1em 0;
+ font-size: 3em;
+ font-weight: 700;
+ letter-spacing: 2px;
+ margin-bottom: 20px;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 텍스트 그림자 설정 */
+}
+
+main {
+ padding: 20px;
+}
+
+.controls {
+ display: flex;
+ align-items: center;
+ justify-content: center; /* 중앙 정렬 */
+ margin-bottom: 20px;
+}
+
+#imageInput {
+ display: none; /* 파일 업로드 버튼 숨기기 */
+}
+
+.custom-file-upload {
+ background-color: #00cec9; /* 파일 업로드 버튼 배경색 */
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ cursor: pointer;
+ border-radius: 6px;
+ font-size: 1.2em;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ margin-right: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 버튼 그림자 */
+}
+
+.custom-file-upload:hover {
+ background-color: #00b894; /* 호버 상태 배경색 */
+}
+
+#fileName {
+ flex-grow: 1;
+ margin-right: 10px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border: 1px solid #ccc;
+ padding: 10px;
+ border-radius: 6px;
+ background-color: #fff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#addImageButton {
+ background-color: #00cec9; /* 이미지 추가 버튼 배경색 */
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ cursor: pointer;
+ border-radius: 6px;
+ font-size: 1.2em;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ transition: background-color 0.3s ease;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 버튼 그림자 */
+}
+
+#addImageButton:hover {
+ background-color: #00b894; /* 호버 상태 배경색 */
+}
+
+.gallery {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center; /* 중앙 정렬 */
+ gap: 20px;
+}
+
+.gallery-item {
+ width: 300px; /* 갤러리 아이템 너비 */
+ height: 300px; /* 갤러리 아이템 높이 */
+ background-color: white; /* 갤러리 아이템 배경색 */
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 */
+ transition: transform 0.2s;
+}
+
+.gallery-item:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+}
+
+.gallery-item img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.delete-button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: rgba(255, 0, 0, 0.7);
+ color: white;
+ border: none;
+ padding: 5px 10px;
+ cursor: pointer;
+ border-radius: 5px;
+ font-size: 1em;
+ z-index: 1;
+ transition: background 0.2s;
+}
+
+.delete-button:before {
+ content: '×';
+ font-size: 1.2em;
+}
+
+.delete-button:hover {
+ background: rgba(255, 0, 0, 1);
+}
+
+/* Lightbox 스타일 */
+#lightbox {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+#lightbox img {
+ max-width: 90%;
+ max-height: 90%;
+ border-radius: 8px;
+}