Merge pull request #16 from LikeLionHGU/modal

Modal
LikeLionHGU · Jan 11, 2025 · aa69f91 · aa69f91
2 parents 3914db1 + eff84d2
commit aa69f91
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 1 deletion.
diff --git a/assets/img/github.png b/assets/img/github.png
diff --git a/assets/img/insta.png b/assets/img/insta.png
diff --git a/assets/img/link.png b/assets/img/link.png
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Jersey+10&display=swap" rel="stylesheet"> 
     <link rel="stylesheet" href="./styles/index.css" />
-  </head>
+  </head> 
   <body>
     <!-- Header 영역 -->
     <div id="likelion-header">

diff --git a/test.html b/test.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>모달창연습</title>
+    <style>
+        body{
+          color: white;
+        }
+        .modal{
+            position:absolute;
+            display:none;
+
+            justify-content: center;
+            top:0;
+            left:0;
+
+            width:100%;
+            height:100%;
+
+
+
+            background-color: rgba(0,0,0,0.4);
+        }
+        .modal_body{
+            position:absolute;
+            top:50%; 
+            padding:40px;  
+            width: 350px;
+            height: 650px;
+
+            border-radius: 10px;
+            border: 1px solid #000;
+            /*background: url(<path-to-image>) lightgray -323.5px 0px / 278.571% 100% no-repeat;*/
+            /*box-shadow:0 2px 3px 0 rgba(34,36,38,0.15); */
+
+
+            text-align: center;
+            background-color: rgb(40, 41, 23);
+            transform:translateY(-50%);
+
+            display: flex;
+            flex-direction: column; /* 세로 정렬 */
+            justify-content: center; /* 수직 중앙 정렬 */
+            align-items: center; /* 수평 중앙 정렬 */
+        }
+
+        .modal_music{
+          width: 430px;
+          height: 80px;
+
+          border: 1px solid rgb(143, 97, 97);
+        }
+
+        .modal_profile_picture{
+          width: 100px;
+          height: 100px;
+          border: 1px solid rgb(143, 97, 97);
+
+          margin-top: 200px;
+        }
+
+        .modal_link_box_row{
+          display: flex;
+          flex-direction:row;
+          justify-content: center; 
+          align-items:center; 
+
+        }
+
+        .modal_link_box_col{
+          display: flex;
+          flex-direction:column;
+          justify-content: center; 
+          align-items:center; 
+          padding-right: 30px;
+          padding-left: 30px;
+        }
+
+        .modal_link_pic{
+          width: 70px;
+          height: 70px;
+        }
+    </style>
+</head>
+<body>
+    <div class="modal">
+        <div class="modal_body">
+            <div class="modal_music">
+              <p> 음악 제목 </p>
+              <p> 가수 </p>
+            </div>
+            <div class="modal_profile_picture">
+
+            </div>
+            <p> 이하린 </p>
+            <p> 한줄 좌우명</p>
+
+            <div class="modal_link_box_row">
+              <div class="modal_link_box_col">
+                <img src="./assets/img/github.png" class="modal_link_pic">
+                <p> github </p>
+              </div>
+              <div class="modal_link_box_col">
+                <img src="./assets/img/link.png" class="modal_link_pic">
+                <p> intoduce </p>
+              </div>
+              <div class="modal_link_box_col">
+                <img src="./assets/img/insta.png" class="modal_link_pic">
+                <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');
+
+        btnOpenModal.addEventListener("click", ()=>{
+            modal.style.display="flex";
+        });
+    </script>
+</body>
+</html>