메인 반응/디자인

Ewha-Euron · Jan 12, 2022 · bd0eeb2 · bd0eeb2
1 parent 68948e6
commit bd0eeb2
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 38 deletions.
diff --git a/WNrecomm/static/css/main.css b/WNrecomm/static/css/main.css
@@ -14,18 +14,18 @@ body{
     position:fixed;
     width:100vw;
     height:100vh;
+    background: var(--main-color);
 }
 
-#home{ 
-    background: linear-gradient(rgba(60, 39, 94, 0.56), rgba(60, 39, 94, 0.56)),
-    url('../img/main_bg.svg');
+.mainbg{
+    background: linear-gradient(rgba(60, 39, 94, 0.56), rgba(60, 39, 94, 0.56)), url(../img/main_bg.jpg);
+    background-attachment: fixed;
     background-size: cover;
 }
 
 .container{
     width:100%;
     height:100%;
-    background: var(--main-color);
     position:relative;
     padding: 10vw;
 }
@@ -36,29 +36,24 @@ body{
     width: 100%;
     height: auto;
     color: var(--bg-color);
-
+    font-weight: 500;
 }
 
 .logo{
-    /* position: absolute; */
     left: 0;
-    /* width: 49.067vw; */
     height: 21.429vh;
-    /* top: 8.621vh; */
-    /* left: 8vw; */
 }
 
 .q_text{
     font-weight: 500;
-    font-size: 20px;
+    font-size: 2.3vh;
     color: var(--bg-color);
 }
 
-
 .progress{
     margin: 4vh 0 2.5vh 0;
     width: 80vw;
-    height: 50px;
+    height: 5.85vh;
     background-color: transparent;
     display:block;
 }
@@ -97,50 +92,47 @@ body{
 }
 
 .t1{
-    /* position: absolute; */
-    /* left: 9.37vw; */
-    /* top: 70vw; */
-
     margin-top: 2.7vw;
     margin-bottom: 1vw;
-    font-size: 3.62vw !important;
+    font-size: 1.76vh !important;
     line-height: 170%;
 }
 
 .t2{
     position: absolute;
-    /* left: 9.37vw; */
-    /* top: 83vw;  */
-
-    font-size: 2.8vw !important;
+    font-size: 1.29vh !important;
     line-height: 170%;
 }
 
 .t3{
     position: absolute;
     width:80vw;
-    margin:0 auto;
+    margin: 0 auto;
     bottom : 7.9vw;
-    font-size: 2.6vw !important;
+    font-size: 1.17vh !important;
     text-align: center;
+    color: var(--bg-color);
 }
 
 .updown { 
     position: absolute;
-    left: 9.37vw;
-    top: 89vw;
+    left: 9.5vw;
+    top: 44.85vh;
     border-left: 2px solid var(--bg-color); 
     height: 30%; 
 }
 
 .back_btn{
+    margin: 0;
     width:6.250vw;
+    /* height: 3.51vh; */
 }
 
 .start_btn{
     position:absolute;
-    width: 40vw;
-    left: 5vw;
+    /* width: 40vw; */
+    height: 7.26vh;
+    left: 6.5vw;
     bottom:15.691vh;
     transition: all 0.3s ease 0s;
 }
@@ -150,10 +142,12 @@ body{
 }
 
 .next_btn, .home_btn{
-    width: 28.646vw;    
+    /* width: 28.646vw; */
+    height: 7vh;    
     position: absolute;
-    top:550px;
-    right:16px;
+    /* top:550px; */
+    bottom: 33.2vh;
+    right:4.43vw;
     transition: all 0.3s ease 0s;
 }
 
@@ -162,13 +156,13 @@ body{
 }
 
 .main{
+    position:absolute;
     background: var(--bg-color);
-    border-radius: 33px;
+    border-radius: 8.59vw;
     width:100%;
     height:100%;
-    position:absolute;
     left: 0px;
     top: 30vh;
-    padding: 30px;
+    padding: 7.81vw;
 }
 
diff --git a/WNrecomm/static/css/q2.css b/WNrecomm/static/css/q2.css
@@ -18,10 +18,12 @@
 }
 
 form>div{
-    margin:20px;
-    font-size: 24px;
+    margin:1.17vh;
+    font-size: 4.22vh;
     font-weight: bold;
+    color: #A6A6A6;
 }
+
 form>div>input{
     display:none;
 }

diff --git a/WNrecomm/static/img/main_bg.jpg b/WNrecomm/static/img/main_bg.jpg
diff --git a/WNrecomm/templates/main.html b/WNrecomm/templates/main.html
@@ -18,8 +18,8 @@
 
         <link rel="stylesheet" href="{% static 'css/main.css' %}">
     </head>
-    <body>
-        <div class="container" id="home">
+    <body class = 'mainbg'>
+        <div class="container">
             <div class = 'maindes'>
             <img class="logo" src="{% static 'img/main_logo.svg' %}" alt="main_logo">
             <p class="t1">이미 본 웹소설을 평가하면<br>

diff --git a/WNrecomm/templates/q2.html b/WNrecomm/templates/q2.html
@@ -47,7 +47,7 @@
     </div>
     <div>
         <input onclick="CountChecked(this)" type="checkbox" name="impt" id="5" value="5">
-        <label for="5">기다무(기다리면 무료) 여부</label>
+        <label for="5">무료회차/기다무</label>
     </div>
     <div>
         <input onclick="CountChecked(this)" type="checkbox" name="impt" id="6" value="6">