2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
MinsoftK
ba270f6b 1 parent c80794a6

add placeholder and make media query.css 

grid setting not finish
Inline Side-by-side
Showing 5 changed files with 96 additions and 16 deletions
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
3 <head> 3 <head>
4 <title>KHU KHU Chat</title> 4 <title>KHU KHU Chat</title>
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 +<link rel="stylesheet" href="mediaquery.css">
6 <link rel="stylesheet" href="style.css"> 7 <link rel="stylesheet" href="style.css">
7 <style> 8 <style>
8 9
...@@ -24,15 +25,12 @@ ...@@ -24,15 +25,12 @@
24 <div id="article"> 25 <div id="article">
25 <h2>로그인 </h2> 26 <h2>로그인 </h2>
26 <form class="formlogin" action="loginmain.html" method="post" id="login"> 27 <form class="formlogin" action="loginmain.html" method="post" id="login">
27 - <label for="email">Email:</label><br> 28 + <label for="email">이메일:</label><br>
28 - <input type="text" id="Email" name="email"><br> 29 + <input type="text" id="Email" name="email" placeholder="이메일을 입력하세요."><br>
29 - <label for="password">password:</label><br> 30 + <label for="password">비밀번호:</label><br>
30 - <input type="password" id="password" name="password"><br><br> 31 + <input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요."><br><br>
31 - <input type="submit" value="로그인"><br> 32 + <input type="submit" value="로그인">
32 - </form> 33 + <input type="button" value="회원가입" onclick="location.href='signinmain.html'">
33 - <form class="formlogin" action="signinmain.html" id="signin">
34 - <input type="submit" value="회원가입">
35 -
36 </form> 34 </form>
37 35
38 </div> 36 </div>
......
...@@ -4,9 +4,7 @@ ...@@ -4,9 +4,7 @@
4 <title>KHU KHU Chat</title> 4 <title>KHU KHU Chat</title>
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 <link rel="stylesheet" href="style.css"> 6 <link rel="stylesheet" href="style.css">
7 -<style>
8 7
9 -</style>
10 </head> 8 </head>
11 <body> 9 <body>
12 10
......
1 +<style>
2 +
3 +@media screen(min-width:320px) and (max-width:480px){
4 + #grid
5 + {
6 + display: grid;
7 + grid-template-rows: 250px 1fr;
8 + border-top:1px solid gray;
9 +
10 + }
11 + #grid ol
12 + {
13 + padding-left: 40px;
14 + margin:0;
15 + font-size: 15px;
16 + }
17 + #grid li
18 + {
19 + padding-top: 10px;
20 + padding-bottom: 10px;
21 + font-size:15px;
22 + }
23 + #grid #article
24 + {
25 + padding-top: 10px;
26 + padding-bottom: 10px;
27 + padding-left: 20px;
28 + /*grid안에 #article */
29 + }
30 +}
31 +@media screen(min-width:480px) and (max-width:800px){
32 +
33 + #grid
34 + {
35 + display: grid;
36 + grid-template-columns: 600px 1fr;
37 + border-top:1px solid gray;
38 +
39 + }
40 + #grid ol
41 + {
42 + padding-left: 40px;
43 + margin:0;
44 + font-size: 15px;
45 + }
46 + #grid li
47 + {
48 + padding-top: 10px;
49 + padding-bottom: 10px;
50 + font-size:15px;
51 + }
52 + #grid #article
53 + {
54 + padding-top: 10px;
55 + padding-bottom: 10px;
56 + padding-left: 20px;
57 + /*grid안에 #article */
58 + }
59 +
60 +
61 +
62 +
63 +
64 +}
65 +
66 +
67 +
68 +
69 +
70 +
71 +</style>
...@@ -26,11 +26,11 @@ ...@@ -26,11 +26,11 @@
26 <h2>회원가입</h2> 26 <h2>회원가입</h2>
27 <div id="inputset"> 27 <div id="inputset">
28 <form class="signinform" action="loginmain.html"> 28 <form class="signinform" action="loginmain.html">
29 - <label for="email">Email:</label><br> 29 + <label for="email">이메일:</label><br>
30 - <input type="text" name="email"><br> 30 + <input type="text" name="email" placeholder="이메일을 입력하세요."><br>
31 31
32 - <label for="password">password:</label><br> 32 + <label for="password">비밀번호:</label><br>
33 - <input type="password" name="password"><br> 33 + <input type="password" name="password" placeholder="비밀번호를 입력하세요."><br>
34 34
35 <label for="name">이름:</label><br> 35 <label for="name">이름:</label><br>
36 <input type="text" name="name"><br> 36 <input type="text" name="name"><br>
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
29 display: block; 29 display: block;
30 margin-left: auto; 30 margin-left: auto;
31 margin-right: auto; 31 margin-right: auto;
32 - width: 60%; 32 + width: 50%;
33 margin-bottom:10px; 33 margin-bottom:10px;
34 34
35 } 35 }
...@@ -38,6 +38,19 @@ ...@@ -38,6 +38,19 @@
38 color: black; 38 color: black;
39 text-decoration: none; 39 text-decoration: none;
40 } 40 }
41 + @media screen(min-width:320px) and (max-width:480px){
42 + #grid
43 + {
44 + display: grid;
45 + grid-template-rows: 250px 1fr;
46 + border-top:1px solid gray;
47 +
48 + }
49 + }
50 + @media screen(min-width:480px) and (max-width:800px){
51 +
52 + }
53 +
41 #grid 54 #grid
42 { 55 {
43 display: grid; 56 display: grid;
......