Merge pull request #34 from likelion-ssu/feat/#33

링크 연결
likelion-ssu · Apr 10, 2024 · 199c761 · 199c761
2 parents c00afa8 + b10dac1
commit 199c761
Show file tree

Hide file tree

Showing 4 changed files with 246 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>숭멋사 12기의 TMI</title>
+    <link rel="icon" href="./SOOYEON_FE/likelion.ico" />
+    <link rel="stylesheet" href="./mainStyles.css" />
+    <link
+      rel="font"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"
+    />
+  </head>
+  <body>
+    <header>
+      <h1>숭실대 멋쟁이사자처럼 12기의 TMI.zip</h1>
+      <p>사진을 누르면 TMI를 볼 수 있어요!</p>
+    </header>
+    <main>
+      <div id="wrapper-layout">
+        <div class="row-layout">
+          <a class="wrapper" href="./CHAEYEON_FE/index.html">
+            <img src="./CHAEYEON_FE/profile.jpg" alt="채연" />
+          </a>
+          <a class="wrapper" href="./DAIN_PM/index.html">
+            <img src="./DAIN_PM/profile.jpg" alt="다인" />
+          </a>
+          <a class="wrapper" href=""></a>
+          <a class="wrapper" href="./GEONHWI_FE/index.html">
+            <img src="./GEONHWI_FE/myimg.jpg" alt="건휘" />
+          </a>
+          <a class="wrapper" href="./HAEUN_PM/index.html">
+            <img src="./HAEUN_PM/박하은_사진.jpg" alt="하은" />
+          </a>
+        </div>
+        <div class="row-layout">
+          <a class="wrapper" href="./HAYEON_DE/index.html">
+            <img src="./HAYEON_DE/hayeon_img.jpg" alt="하연" />
+          </a>
+          <a class="wrapper" href="./HAYOON_DE/index.html">
+            <img src="./HAYOON_DE/" alt="하윤" />
+          </a>
+          <a class="wrapper" href="./HYUNGJUN_BE/index.html">
+            <img src="./HYUNGJUN_BE/image.jpg" alt="형준" />
+          </a>
+          <a class="wrapper" href="./JIHWAN_BE/index.html">
+            <img src="./JIHWAN_BE/profile.jpeg" alt="지환" />
+          </a>
+          <a class="wrapper" href="./JIHYO_DE/index.html">
+            <img src="./JIHYO_DE/profile.jpg" alt="지효" />
+          </a>
+          <a class="wrapper" href="./JIYEA_PM/index.html">
+            <img src="./JIYEA_PM/me2.jpg" alt="지예" />
+          </a>
+          <a class="wrapper" href="./MINJU_FE/index.html">
+            <img src="./MINJU_FE/my_img.jpg" alt="민주" />
+          </a>
+        </div>
+        <div class="row-layout">
+          <a class="wrapper" href="/MINKYOUNG_BE/index.html">
+            <img src="./MINKYOUNG_BE/IMG_8807.jpg" alt="민경" />
+          </a>
+          <a class="wrapper" href="./SANGEUN_BE/index.html">
+            <img src="./SANGEUN_BE/IMG_SE.jpg" alt="상은" />
+          </a>
+          <a class="wrapper" href="./SANGWOO_PM/index.html">
+            <img src="./SANGWOO_PM/photo.jpg" alt="상우" />
+          </a>
+          <a class="wrapper" href="./SEONJEONG_BE/index.html">
+            <img src="./SEONJEONG_BE/profile.jpg" alt="선정" />
+          </a>
+          <a class="wrapper" href="./SEOYUN_DE/index.html">
+            <img src="./SEOYUN_DE/profile.jpg" alt="서윤" />
+          </a>
+          <a class="wrapper" href="./SEUNGBIN_PM/index.html">
+            <img src="./SEUNGBIN_PM/me.jpg" alt="승빈" />
+          </a>
+          <a class="wrapper" href="./SEUNGHYUN_FE/index.html">
+            <img src="./SEUNGHYUN_FE/PROFILE.JPG" alt="승현" />
+          </a>
+        </div>
+        <div class="row-layout">
+          <a class="wrapper" href="./SION_FE_2/index.html">
+            <img src="./SION_FE_2/sion.jpg" alt="시온" />
+          </a>
+          <a class="wrapper" href="./SOOYEON_FE/index.html">
+            <img src="./SOOYEON_FE/myimg.jpeg" alt="수연" />
+          </a>
+          <a class="wrapper" href="./SOOYOUNG_BE/index.html">
+            <img src="./SOOYOUNG_BE/sooyoung.jpg" alt="수영" />
+          </a>
+          <a class="wrapper" href="./TAEYEON_DE/index.html">
+            <img src="./TAEYEON_DE/증명사진.jpg" alt="태연" />
+          </a>
+          <a class="wrapper" href="./YEONGMYEONG_PM/index.html">
+            <img src="./YEONGMYEONG_PM/KO.jpg" alt="영명" />
+          </a>
+        </div>
+        <div class="row-layout">
+          <a class="wrapper" href="./YEONJAE_BE/index.html">
+            <img src="./YEONJAE_BE/yeonjae.jpg" alt="연재" />
+          </a>
+          <a class="wrapper" href="./YUJUNG_DE/index.html">
+            <img src="./YUJUNG_DE/yujung.jpg" alt="유정" />
+          </a>
+          <a class="wrapper" href="./YUNHO_FE/index.html">
+            <img src="./YUNHO_FE/PatPhoto.jpg" alt="윤호" />
+          </a>
+        </div>
+        <div class="row-layout">
+          <a class="wrapper" href="">
+            <img src="./likelion.JPG" alt="🦁" />
+          </a>
+        </div>
+      </div>
+    </main>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,12 @@
+document.querySelectorAll('.wrapper').forEach((wrapper) => {
+  wrapper.addEventListener('mouseover', function () {
+    const altText = wrapper.querySelector('img')?.getAttribute('alt');
+    if (altText) {
+      this.setAttribute('data-alt', altText);
+    }
+  });
+
+  wrapper.addEventListener('mouseout', function () {
+    this.removeAttribute('data-alt');
+  });
+});
diff --git a/likelion.JPG b/likelion.JPG
diff --git a/mainStyles.css b/mainStyles.css
@@ -0,0 +1,113 @@
+* {
+  box-sizing: border-box;
+  font-family: 'Pretendard Variable', Pretendard, -apple-system,
+    BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
+    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  background: linear-gradient(
+      12deg,
+      rgba(30, 14, 92, 0.9) 8.77%,
+      #151f4f 25.76%,
+      #050b11 48.76%,
+      #051221 65.77%,
+      #0a1b2f 82.65%,
+      rgba(35, 22, 88, 0.79) 102.19%
+    ),
+    #fff;
+}
+
+ul,
+ol,
+li {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+}
+
+header {
+  position: fixed;
+  top: 0;
+  padding-top: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  & > h1 {
+    font-size: 20px;
+    color: white;
+  }
+  & > p {
+    font-size: 10px;
+    color: white;
+  }
+}
+main {
+  margin-top: 50px;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.wrapper {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+}
+
+/*  */
+#wrapper-layout {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.row-layout {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.wrapper img {
+  display: block;
+  transition: opacity 0.5s ease;
+}
+
+.wrapper:hover img {
+  opacity: 0.5;
+}
+
+.wrapper::after {
+  content: attr(data-alt);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 16px;
+  font-weight: 800;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.5s ease, visibility 0.5s;
+}
+
+.wrapper:hover::after {
+  visibility: visible;
+  opacity: 1;
+}