diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0a1a233
--- /dev/null
+++ b/index.html
@@ -0,0 +1,121 @@
+
+
+
+
+
+ 숭멋사 12기의 TMI
+
+
+
+
+
+
+ 숭실대 멋쟁이사자처럼 12기의 TMI.zip
+ 사진을 누르면 TMI를 볼 수 있어요!
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..2d5ab07
--- /dev/null
+++ 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
new file mode 100644
index 0000000..3e4eb01
Binary files /dev/null and b/likelion.JPG differ
diff --git a/mainStyles.css b/mainStyles.css
new file mode 100644
index 0000000..17ee86f
--- /dev/null
+++ 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;
+}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+