사진첩
-
-
- 
-
-
-
- 
-
-
-
- 
-
-
-
- 
-
-
-
- 
-
-
-
- 
+
+
+
diff --git a/Week1/Homework/styles.css b/Week1/Homework/styles.css
index 905e06e..93e4eb8 100644
--- a/Week1/Homework/styles.css
+++ b/Week1/Homework/styles.css
@@ -65,6 +65,14 @@ section {
white-space: nowrap;
}
+.nav-item:first-child .nav-link {
+ border-radius: 30px 30px 10px 10px;
+}
+
+.nav-item:last-child .nav-link {
+ border-radius: 10px 10px 30px 30px;
+}
+
.nav-link:hover {
background-color: #d4f1f4;
color: #232323;
@@ -532,19 +540,36 @@ section {
color: #232323;
}
+/* 갤러리 래퍼 (무한 루프용) */
+.snap-gallery-wrapper {
+ overflow: hidden;
+ background-color: #f8f9fa;
+ padding: 50px;
+ border-radius: 30px;
+ position: relative;
+}
+
/* 스크롤 갤러리 */
.snap-gallery {
display: flex;
gap: 20px;
- overflow-x: auto;
- background-color: #f8f9fa;
- padding: 50px;
- border-radius: 30px;
+ width: fit-content;
+ animation: auto-scroll 10s linear infinite;
}
-/* 스크롤바 숨기기 */
-.snap-gallery::-webkit-scrollbar {
- display: none;
+/* 호버 시 애니메이션 일시정지 */
+.snap-gallery-wrapper:hover .snap-gallery {
+ animation-play-state: paused;
+}
+
+/* 자동 스크롤 애니메이션 */
+@keyframes auto-scroll {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
}
/* 갤러리 아이템 */
diff --git a/Week2/HomeWork/scripts/main.js b/Week2/HomeWork/scripts/main.js
index 904cce8..30b9b62 100644
--- a/Week2/HomeWork/scripts/main.js
+++ b/Week2/HomeWork/scripts/main.js
@@ -35,9 +35,46 @@ document.addEventListener("DOMContentLoaded", () => {
const value = member[key];
if (key === "github") {
+ // 깃허브 열: GitHub 프로필로 이동
cell.innerHTML = `${value}`;
+ } else if (key === "name") {
+ // 이름 열: Google 검색으로 이동
+ cell.style.cursor = "pointer";
+ cell.style.textDecoration = "underline";
+ cell.style.color = "#0066cc";
+ cell.textContent = value;
+ cell.addEventListener("click", () => {
+ window.open(`https://www.google.com/search?q=${encodeURIComponent(value)}`, "_blank");
+ });
+ } else if (key === "englishName") {
+ // 영문 이름 열: Google 검색으로 이동
+ cell.style.cursor = "pointer";
+ cell.style.textDecoration = "underline";
+ cell.style.color = "#0066cc";
+ cell.textContent = value;
+ cell.addEventListener("click", () => {
+ window.open(`https://www.google.com/search?q=${encodeURIComponent(value)}`, "_blank");
+ });
} else if (key === "gender") {
cell.textContent = value === "male" ? "남자" : "여자";
+ } else if (key === "age") {
+ // 나이 열: Google 검색으로 이동
+ cell.style.cursor = "pointer";
+ cell.style.textDecoration = "underline";
+ cell.style.color = "#0066cc";
+ cell.textContent = value;
+ cell.addEventListener("click", () => {
+ window.open(`https://www.google.com/search?q=${encodeURIComponent(value)}`, "_blank");
+ });
+ } else if (key === "codeReviewGroup") {
+ // 금잔디조 열: Google 검색으로 이동
+ cell.style.cursor = "pointer";
+ cell.style.textDecoration = "underline";
+ cell.style.color = "#0066cc";
+ cell.textContent = value;
+ cell.addEventListener("click", () => {
+ window.open(`https://www.google.com/search?q=${encodeURIComponent(value)}`, "_blank");
+ });
} else {
cell.textContent = value;
}
diff --git a/Week2/HomeWork/service/filter.js b/Week2/HomeWork/service/filter.js
index 0f6b8dc..d0871e2 100644
--- a/Week2/HomeWork/service/filter.js
+++ b/Week2/HomeWork/service/filter.js
@@ -35,6 +35,13 @@ export function filterMembers(members, filters) {
return Object.entries(filters).every(([key, filterValue]) => {
// entry 메소드 : 객체의 키-값 쌍을 배열로 반환
// every 메소드 : 모든 조건이 참이어야 true 반환
+
+ // codeReviewGroup과 age는 숫자 비교
+ if (key === "codeReviewGroup" || key === "age") {
+ return String(member[key]) === filterValue;
+ }
+
+ // 나머지는 문자열 비교 (소문자 변환)
const memberValue = String(member[key]).toLowerCase();
return memberValue === filterValue;
});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+