Merge pull request #31 from LikeLionHGU/modal

Modal
LikeLionHGU · Jan 13, 2025 · 3f21758 · 3f21758
2 parents 43a08a3 + 0706fe6
commit 3f21758
Show file tree

Hide file tree

Showing 11 changed files with 151 additions and 25 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/img/modal/back.jpg b/assets/img/modal/back.jpg
diff --git a/assets/img/github.png → assets/img/modal/github.png b/assets/img/github.png → assets/img/modal/github.png
diff --git a/assets/img/insta.png → assets/img/modal/insta.png b/assets/img/insta.png → assets/img/modal/insta.png
diff --git a/assets/img/likelion-header.jpg → assets/img/modal/likelion-header.jpg b/assets/img/likelion-header.jpg → assets/img/modal/likelion-header.jpg
diff --git a/assets/img/link.png → assets/img/modal/link.png b/assets/img/link.png → assets/img/modal/link.png
diff --git a/assets/img/modal/profile.png b/assets/img/modal/profile.png
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
     </div>
 
     <!-- Grid 영역 -->
-    <div id="likelion_grid">
+     <div id="likelion_grid">
     </div>
     <!-- Footer 영역 -->
     <div id="footer">

diff --git a/test.html b/test.html
@@ -5,8 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>모달창연습</title>
     <style>
+      @font-face {
+          font-family: 'GmarketSansMedium';
+          src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff') format('woff');
+          font-weight: normal;
+          font-style: normal;
+      }
         body{
           color: white;
+          font-family: 'GmarketSansMedium';
         }
         .modal{
             position:absolute;
@@ -27,6 +34,7 @@
             position:absolute;
             top:50%; 
             padding:40px;  
+            padding-bottom: 30px;
             width: 350px;
             height: 650px;
 
@@ -44,84 +52,125 @@
             flex-direction: column; /* 세로 정렬 */
             justify-content: center; /* 수직 중앙 정렬 */
             align-items: center; /* 수평 중앙 정렬 */
+
+            background-image: url(./assets/img/modal/back.jpg);
+            background-size: cover;
         }
 
         .modal_music{
-          width: 430px;
-          height: 80px;
+          width: 410px;
+          height: 100px;
+
+          /* margin-top: 70px; */
+
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          padding-left: 20px;
+
+          background-color: rgba(255, 255, 255, 0.2);
 
-          border: 1px solid rgb(143, 97, 97);
         }
 
         .modal_profile_picture{
           width: 100px;
           height: 100px;
-          border: 1px solid rgb(143, 97, 97);
 
-          margin-top: 200px;
+          margin-top: 210px; 
+          border-radius: 10%;
+
+          background-color: rgba(255, 255, 255, 0.2);
+
+        }
+
+        .modal_profile_pic{
+          width: 105px;
+          height: 105px;
+
         }
 
         .modal_link_box_row{
           display: flex;
           flex-direction:row;
           justify-content: center; 
           align-items:center; 
-
+         margin-top: 20px;
+         margin-left: 20px;
+
         }
 
         .modal_link_box_col{
           display: flex;
           flex-direction:column;
           justify-content: center; 
           align-items:center; 
-          padding-right: 30px;
-          padding-left: 30px;
+          padding-right: 5px;
+          padding-left: 5px;
         }
 
         .modal_link_pic{
-          width: 70px;
-          height: 70px;
+          width: 50px;
+          height: 50px;
+        }
+
+        p{
+          margin:22px;
+        }
+
+        #modal_music_singer{
+          margin-top: 4px;
+        }
+
+        #modal_music_name{
+          margin-bottom: 10px;
+        }
+
+        #modal_profile_name{
+
+        }
+        h3{
+          margin: 10px;
+          margin-top: 15px;
+        }
+        h5{
+          margin: 10px;
         }
     </style>
 </head>
 <body>
     <div class="modal">
         <div class="modal_body">
             <div class="modal_music">
-              <p> 음악 제목 </p>
-              <p> 가수 </p>
+              <p id="modal_music_name"> 첫 만남은 너무 어려워 </p>
+              <p id="modal_music_singer"> tws </p>
             </div>
             <div class="modal_profile_picture">
-
+              <img src="./assets/img/modal/profile.png" class="modal_profile_pic">
             </div>
-            <p> 이하린 </p>
-            <p> 한줄 좌우명</p>
+            <h3 id="modal_profile_name">이하린</h3>
+            <h5 id="modal_profile_motto">한줄 좌우명</h5>
 
             <div class="modal_link_box_row">
               <div class="modal_link_box_col">
-                <img src="./assets/img/github.png" class="modal_link_pic">
+                <a href="https://www.instagram.com/harlo_ii/"><img src="./assets/img/modal/github.png" class="modal_link_pic"></a>
                 <p> github </p>
               </div>
               <div class="modal_link_box_col">
-                <img src="./assets/img/link.png" class="modal_link_pic">
+                <a href="https://www.instagram.com/harlo_ii/"><img src="./assets/img/modal/link.png" class="modal_link_pic"></a>
                 <p> intoduce </p>
               </div>
               <div class="modal_link_box_col">
-                <img src="./assets/img/insta.png" class="modal_link_pic">
+                <a href="https://www.instagram.com/harlo_ii/"><img src="./assets/img/modal/insta.png" class="modal_link_pic"></a>
                 <p> instagram </p>
               </div>
             </div>
         </div>
 
     </div>
     <button class="btn-open-modal">Modal열기</button>
-    <script>
-        const modal = document.querySelector('.modal');
-        const btnOpenModal=document.querySelector('.btn-open-modal');
+    <script  src="test.js">
 
-        btnOpenModal.addEventListener("click", ()=>{
-            modal.style.display="flex";
-        });
+
     </script>
 </body>
 </html>
diff --git a/test.js b/test.js
@@ -0,0 +1,77 @@
+const modal = document.querySelector('.modal');
+        const btnOpenModal=document.querySelector('.btn-open-modal');
+
+        btnOpenModal.addEventListener("click", ()=>{
+            modal.style.display="flex";
+        });
+
+// const info_members = [
+//   {
+//     num: 1,
+//     music_name: "찬란",
+//     music_singer: "나상현씨밴드",
+//     name: "김원진",
+//     motto: "가보자고",
+//     github: "",
+//     introduce: "",
+//     instagram: "",
+//   },
+//   {
+//     num: 2,
+//     music: "생각중 - ~~",
+//     nick: "????",
+//     name: "김윤채",
+//   },
+//   {
+//     num: 3,
+//     music: "휘파람 - 블랙핑크",
+//     nick: "????",
+//     name: "박서연",
+//   },
+//   {
+//     num: 4,
+//     music: "붐바야 - 블랙핑크",
+//     nick: "????",
+//     name: "성하은",
+//   },
+//   {
+//     num: 5,
+//     music: "한 - 여자아이들",
+//     nick: "????",
+//     name: "오연주",
+//   },
+//   {
+//     num: 6,
+//     music: "Stay This Way - 프로..",
+//     nick: "????",
+//     name: "이재호",
+//   },
+//   {
+//     num: 7,
+//     music: "Bad Boy - 레드벨벳",
+//     nick: "????",
+//     name: "이하린",
+//   },
+//   {
+//     num: 8,
+//     music: "Fancy - 트와이스",
+//     nick: "????",
+//     name: "진희원",
+//   },
+//   {
+//     num: 9,
+//     music: "으르렁 - EXO",
+//     nick: "????",
+//     name: "한규호",
+//   },
+// ];
+
+
+// const connect = document.querySelector("#modal_music_name");
+
+// function handleTitleClick(){
+
+//   connect.innerIext = info_members.music_name;
+// }
+
+// h1.addEventListener("click", handleTitleClick);