From 855743c1012b098c229d4c47779b79d59c791029 Mon Sep 17 00:00:00 2001
From: NEWJIN <winniepooh00@naver.com>
Date: Thu, 30 Nov 2023 02:00:33 +0900
Subject: [PATCH] =?UTF-8?q?mod:=20charinfo=20html,=20css=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

...
---
 charinfo.css  | 132 ++++++++++++++++++++--------------
 charinfo.html | 193 +++++++++++++++++++++++++++++---------------------
 2 files changed, 190 insertions(+), 135 deletions(-)

diff --git a/charinfo.css b/charinfo.css
index 4d434b3..3582df7 100644
--- a/charinfo.css
+++ b/charinfo.css
@@ -8,9 +8,8 @@
 }
 
 .container {
-  display: static;
-  width: 50%;
-  height: flex;
+  width: 100%;
+  height: 100vh;
   background-color: rgba(0, 0, 0, 0);
   display: flex;
   align-items: center;
@@ -24,29 +23,22 @@
   z-index: -1;
 }
 
-@media (min-aspect-ratio:16/9){
-  .background-clip{
-      width: 100%;
-      height: auto;
+@media (min-aspect-ratio:16/9) {
+  .background-clip {
+    width: 100%;
+    height: auto;
   }
 }
 
-@media (max-aspect-ratio:16/9){
-  .background-clip{
-      width: auto;
-      height: 100%;
+@media (max-aspect-ratio:16/9) {
+  .background-clip {
+    width: auto;
+    height: 100%;
   }
 }
 
 body {
   display: flex;
-  align-items: center;
-  min-height: 108vh;
-  font-size: medium;
-  justify-content: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
   padding: 10px;
 }
 
@@ -111,27 +103,63 @@ header {
   transition: .5s;
 }
 
-.reviews-container{
+.reviews-container {
   position: static;
-  width: 25%;
+  width: calc(100%/4 - 20px);
   margin: 20px;
   padding: 20px;
-  text-align: center;
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 170;
-  font-size: 12px;
+  font-weight: 200;
+  font-size: 1em;
   line-height: 20px;
   text-transform: uppercase;
   background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
+}
+
+.reviews-container>div {
+  margin-bottom: 15px;
+  width: 100%;
+  height: 50px;
+}
+
+.reviews-container select,
+.reviews-container input[type="text"],
+.reviews-container textarea {
+  width: 100%;
+  height: 35px;
+  padding: 5px;
+  margin-bottom: 10px;
+}
+
+.reviews-container textarea {
+  height: 80px;
+}
+
+.reviews-container .submit_btn {
+  width: 100px;
+  height: 40px;
+  background: transparent;
+  border: 2px solid #fff;
+  outline: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #fff;
+  font-weight: 500;
+  margin-right: 40px;
+  transition: .5s;
+}
 
+.pagination-container {
+  position: static;
+  width: calc(100%/4 - 20px);
+  margin: 20px;
+  padding: 20px;
 }
 
 .content {
-  position: relative;
-  left: 30px;
-  margin-right: 30px;
-  width: 50%;
+  position: static;
+  width: calc(100%/4 - 20px);
+  margin: 20px;
+  padding: 20px;
   height: flex;
   text-align: center;
   font-family: 'Inter';
@@ -139,15 +167,23 @@ header {
   font-weight: 170;
   font-size: 20px;
   line-height: 30px;
-  
+
   text-transform: uppercase;
   color: black;
   background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
 }
 
-.infoandpic_char{
+.characterlist {
   position: static;
-  width:60%;
+  width: 100%;
+  text-align: center;
+}
+
+.infoandpic_char {
+  position: static;
+  width: calc(100%/4 - 20px);
+  margin: 20px;
+  padding: 20px;
   height: flex;
   text-align: center;
   font-family: 'Inter';
@@ -155,19 +191,18 @@ header {
   font-weight: 170;
   font-size: 20px;
   line-height: 30px;
-  
+
   text-transform: uppercase;
   color: black;
- 
+
 }
 
 .character-container {
   display: none;
+  width: 100%;
   background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
   border: 1px solid #ccc;
   padding: 10px;
-  margin-top: 10px;
-  margin-left: 20px;
 }
 
 .character-info {
@@ -176,20 +211,16 @@ header {
 }
 
 .character-image {
- width: 300px;
- height: auto;
- margin-top: 10px;
-}
-.characterlist{
-  width:100%;
-  text-align: center;
+  width: 300px;
+  height: auto;
+  margin-top: 10px;
 }
 
 .linkposition {
   position: relative;
   width: 100%;
   height: flex;
- 
+
   font-size: 12px;
   display: inline-block;
   background: linear-gradient(180deg, #d9d9d9e7 0%, rgba(167, 212, 227, 0.56) 0%);
@@ -208,7 +239,7 @@ img {
   font-family: 'Inter';
   font-style: normal;
   line-height: 20px;
-  text-transform: uppercase;  
+  text-transform: uppercase;
   color: white;
 }
 
@@ -219,7 +250,7 @@ h3 {
 }
 
 #btn-all-close {
-  width:100%;
+  width: 100%;
   background-color: #b1a5dd;
   font-size: 13px;
   border: none;
@@ -241,17 +272,10 @@ h3 {
   background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
 }
 
-.pagination-container {
-  position: static;
-  width: 25%;
-  margin: 20px;
-  padding: 20px;
-}
-
 .page-link {
   cursor: pointer;
   padding: 5px;
-  
+
   margin-left: 5px;
   border: 1px solid #ccc;
   background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
diff --git a/charinfo.html b/charinfo.html
index 925aa1e..c732186 100644
--- a/charinfo.html
+++ b/charinfo.html
@@ -7,9 +7,18 @@
     <title>character_info</title>
 
     <style>
-        h1,h2 { text-align: center;}
-        h3 {  text-align: right;}
-        #reviews-container { margin-bottom: 20px;}
+        h1,
+        h2 {
+            text-align: center;
+        }
+
+        h3 {
+            text-align: right;
+        }
+
+        #reviews-container {
+            margin-bottom: 20px;
+        }
     </style>
 
 
@@ -24,81 +33,21 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300&display=swap" rel="stylesheet">
-    
+
 </head>
 
 <body>
-    <div class="reviews-container">
-        <h3>캐릭터 리뷰</h3><br><br>
-        <form onsubmit="return submitReview()" action="#">
-            <label >캐릭터 이름:</label>
-            <select class="input_champion" id="cName" name="c_name">
-                <option value="" disabled selected hidden>캐릭터를 선택하세요</option>
-                <option value="AKUMA">AKUMA</option>
-                <option value="ALISA">ALISA</option>
-                <option value="ARMOR KING">ARMOR KING</option>
-                <option value="ASUKA">ASUKA</option>
-                <option value="BOB">BOB</option>
-                <option value="BRYAN">BRYAN</option>
-                <option value="CLAUDIO">CLAUDIO</option>
-                <option value="DEVIL JIN">DEVIL JIN</option>
-                <option value="DRAGUNOV">DRAGUNOV</option>
-                <option value="EDDY">EDDY</option>
-                <option value="FENG">FENG</option>
-                <option value="GIGAS">GIGAS</option>
-                <option value="HEIHACHI">HEIHACHI</option>
-                <option value="HWARANG">HWARANG</option>
-                <option value="JACK-7">JACK-7</option>
-                <option value="JIN">JIN</option>
-                <option value="JOSIE">JOSIE</option>
-                <option value="KATARINA">KATARINA</option>
-                <option value="KAZUMI">KAZUMI</option>
-                <option value="KAZUYA">KAZUYA</option>
-                <option value="KING">KING</option>
-                <option value="KUMA">KUMA</option>
-                <option value="LARS">LARS</option>
-                <option value="LAW">LAW</option>
-                <option value="LEE">LEE</option>
-                <option value="LEO">LEO</option>
-                <option value="LILI">LILI</option>
-                <option value="LUCKY CHLOE">LUCKY CHLOE</option>
-                <option value="MASTER RAVEN">MASTER RAVEN</option>
-                <option value="MIGUEL">MIGUEL</option>
-                <option value="NINA">NINA</option>
-                <option value="PANDA">PANDA</option>
-                <option value="PAUL">PAUL</option>
-                <option value="SHAHEEN">SHAHEEN</option>
-                <option value="STEVE">STEVE</option>
-                <option value="XIAOYU">XIAOYU</option>
-                <option value="YOSHIMITSU">YOSHIMITSU</option>
-              </select><br>
-        
-            <label>사용자 ID:</label>
-            <input type="text" id="userId" name="id"></input><br>
-        
-            <label>리뷰 내용:</label>
-            <textarea id="reviewContent" name="reviewData" required></textarea><br>
-        
-            <button id="submit" class="submit_btn">리뷰 제출</button>
-        </form>
-   </div>
-   
-   <!--- review -->
-  <div id="pagination-container" class="pagination-container">
-    <form onsubmit="return updateReview()" action="#">
-    <div id="reviewList" class="review-list"></div>
-  </form>
-  </div>
-  <!-- character information -->
+
+    <!-- character information -->
     <div class="container">
         <video autoplay loop muted plays-inline class="background-clip">
             <source src="tekken.mp4" type="video/mp4">
         </video>
-        
+
         <header>
             <h2 class="logo">Tekken Supporter</h2>
             <div class="contitle">
-                <p >Tips & Reviews about Characters</p>
+                <p>Tips & Reviews about Characters</p>
             </div>
             <nav class="navigation">
                 <a href="myinfo.html" class="myinfo">계정 정보</a>
@@ -109,8 +58,72 @@ <h2 class="logo">Tekken Supporter</h2>
             </nav>
         </header>
 
+        <div class="reviews-container">
+            <h2>캐릭터 리뷰</h2><br><br>
+            <form onsubmit="return submitReview()" action="#">
+                <div>
+                <label>캐릭터 이름:</label>
+                <select class="input_champion" id="cName" name="c_name">
+                    <option value="" disabled selected hidden>캐릭터를 선택하세요</option>
+                    <option value="AKUMA">AKUMA</option>
+                    <option value="ALISA">ALISA</option>
+                    <option value="ARMOR KING">ARMOR KING</option>
+                    <option value="ASUKA">ASUKA</option>
+                    <option value="BOB">BOB</option>
+                    <option value="BRYAN">BRYAN</option>
+                    <option value="CLAUDIO">CLAUDIO</option>
+                    <option value="DEVIL JIN">DEVIL JIN</option>
+                    <option value="DRAGUNOV">DRAGUNOV</option>
+                    <option value="EDDY">EDDY</option>
+                    <option value="FENG">FENG</option>
+                    <option value="GIGAS">GIGAS</option>
+                    <option value="HEIHACHI">HEIHACHI</option>
+                    <option value="HWARANG">HWARANG</option>
+                    <option value="JACK-7">JACK-7</option>
+                    <option value="JIN">JIN</option>
+                    <option value="JOSIE">JOSIE</option>
+                    <option value="KATARINA">KATARINA</option>
+                    <option value="KAZUMI">KAZUMI</option>
+                    <option value="KAZUYA">KAZUYA</option>
+                    <option value="KING">KING</option>
+                    <option value="KUMA">KUMA</option>
+                    <option value="LARS">LARS</option>
+                    <option value="LAW">LAW</option>
+                    <option value="LEE">LEE</option>
+                    <option value="LEO">LEO</option>
+                    <option value="LILI">LILI</option>
+                    <option value="LUCKY CHLOE">LUCKY CHLOE</option>
+                    <option value="MASTER RAVEN">MASTER RAVEN</option>
+                    <option value="MIGUEL">MIGUEL</option>
+                    <option value="NINA">NINA</option>
+                    <option value="PANDA">PANDA</option>
+                    <option value="PAUL">PAUL</option>
+                    <option value="SHAHEEN">SHAHEEN</option>
+                    <option value="STEVE">STEVE</option>
+                    <option value="XIAOYU">XIAOYU</option>
+                    <option value="YOSHIMITSU">YOSHIMITSU</option>
+                </select><br>
+                </div>
+                <div>
+                <label>사용자 ID:</label>
+                <input type="text" id="userId" name="id"></input><br>
+                </div>
+                <div>
+                <label>리뷰 내용:</label>
+                <textarea id="reviewContent" name="reviewData" required></textarea><br>
+                </div>
+                <button id="submit" class="submit_btn">리뷰 제출</button>
+            </form>
+        </div>
+    
+        <!--- review -->
+        <div id="pagination-container" class="pagination-container">
+            <form onsubmit="return updateReview()" action="#">
+                <div id="reviewList" class="review-list"></div>
+            </form>
+        </div>
+        
         <div class="content">
-
             <div class="characterlist">
                 <p class="character-link" data-character="character1">GIGAS</p>
                 <p class="character-link" data-character="character2">EDDY</p>
@@ -121,7 +134,7 @@ <h2 class="logo">Tekken Supporter</h2>
                 <p class="character-link" data-character="character7">BRYAN</p>
                 <p class="character-link" data-character="character8">DEVIL JIN</p>
                 <p class="character-link" data-character="character9">KATARINA</p>
-                
+
             </div>
             <button id="btn-all-close">Close Information</button>
             <ul type="none"></ul>
@@ -137,47 +150,65 @@ <h2 class="logo">Tekken Supporter</h2>
 
         <div class="infoandpic_char">
             <div class="character-container" id="character1">
-                <p class="character-info"> <p>punch <br>kick<br>signature</p></p>
+                <p class="character-info">
+                <p>punch <br>kick<br>signature</p>
+                </p>
                 <img class="character-image" src="" alt="캐릭터 이미지">
             </div>
 
             <div class="character-container" id="character2">
-                <p class="character-info"> <p>punch <br>kick<br>signature</p></p>
+                <p class="character-info">
+                <p>punch <br>kick<br>signature</p>
+                </p>
                 <img class="character-image" src="#" alt="캐릭터 이미지">
             </div>
 
             <div class="character-container" id="character3">
-                <p class="character-info"> <p>punch <br>kick<br>signature</p></p>
+                <p class="character-info">
+                <p>punch <br>kick<br>signature</p>
+                </p>
                 <img class="character-image" src="#" alt="캐릭터 이미지">
             </div>
 
             <div class="character-container" id="characte4">
-                <p class="character-info"> <p>punch <br>kick<br>signature</p></p>
+                <p class="character-info">
+                <p>punch <br>kick<br>signature</p>
+                </p>
                 <img class="character-image" src="#" alt="캐릭터 이미지">
             </div>
 
             <div class="character-container" id="character5">
-                <p class="character-info"> <p>punch <br>kick<br>signature</p></p>
+                <p class="character-info">
+                <p>punch <br>kick<br>signature</p>
+                </p>
                 <img class="character-image" src="#" alt="캐릭터 이미지">
             </div>
 
             <div class="character-container" id="character6">
-                <p class="character-info"> <p>punch <br>kick<br>signature</p></p>
+                <p class="character-info">
+                <p>punch <br>kick<br>signature</p>
+                </p>
                 <img class="character-image" src="#" alt="캐릭터 이미지">
             </div>
 
             <div class="character-container" id="character7">
-                <p class="character-info"> <p>punch <br>kick<br>signature</p></p>
+                <p class="character-info">
+                <p>punch <br>kick<br>signature</p>
+                </p>
                 <img class="character-image" src="#" alt="캐릭터 이미지">
             </div>
 
             <div class="character-container" id="character8">
-                <p class="character-info"> <p>punch <br>kick<br>signature</p></p>
+                <p class="character-info">
+                <p>punch <br>kick<br>signature</p>
+                </p>
                 <img class="character-image" src="#" alt="캐릭터 이미지">
             </div>
 
             <div class="character-container" id="character9">
-                <p class="character-info"> <p>punch <br>kick<br>signature</p></p>
+                <p class="character-info">
+                <p>punch <br>kick<br>signature</p>
+                </p>
                 <img class="character-image" src="#" alt="캐릭터 이미지">
             </div>
 
@@ -187,10 +218,10 @@ <h2 class="logo">Tekken Supporter</h2>
         </div>
 
 
-        
+
 
     </div>
-  
+
 </body>