고다경 / Open_Source_project

Go to a project
Toggle navigation Toggle navigation pinning
고다경
2c50f599 1 parent 6fa26aa3

sign up page 수정완료

Inline Side-by-side
Showing 2 changed files with 86 additions and 29 deletions
...@@ -6,10 +6,6 @@ ...@@ -6,10 +6,6 @@
6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Sign Up Page</title> 7 <title>Sign Up Page</title>
8 <script src="jquery.js"></script> 8 <script src="jquery.js"></script>
9 - <script>
10 -
11 -
12 - </script>
13 <style > 9 <style >
14 10
15 #banner { 11 #banner {
...@@ -32,6 +28,8 @@ ...@@ -32,6 +28,8 @@
32 28
33 29
34 </style> 30 </style>
31 +
32 + <link rel="stylesheet" type="text/css" href="./a.css" />
35 </head> 33 </head>
36 <body> 34 <body>
37 <img src = "images\main_background.jpg" alt="" style="z-index:-1; min-width: 100%; height: 700px;"></img> 35 <img src = "images\main_background.jpg" alt="" style="z-index:-1; min-width: 100%; height: 700px;"></img>
...@@ -44,42 +42,65 @@ ...@@ -44,42 +42,65 @@
44 <div id = "signup-ing" style="width:100%; text-align: center;"> 42 <div id = "signup-ing" style="width:100%; text-align: center;">
45 <form action="/starting" method="post"> 43 <form action="/starting" method="post">
46 <div class="form-inline"> 44 <div class="form-inline">
45 + <div class="input-area">
46 + <span class="input-label">
47 + <label name="ID">ID</label>
48 + </span>
49 + <span class="input-box">
50 + <input type="text" name="ID" >
51 + </span>
52 + </div>
47 53
48 - <label>ID</label> 54 + <div class="input-area">
49 - &nbsp&nbsp&nbsp 55 + <span class="input-label">
50 - <input type="text" name="name" class="form-control" style="width:200px;"> 56 + <label name="Password">Password</label>
51 - <br><br> 57 + </span>
52 - 58 + <span class="input-box">
53 - <label>Password</label> 59 + <input type="text" name="Password" >
54 - &nbsp&nbsp&nbsp 60 + </span>
55 - <input type="password" name="birth" class="form-control" style="width:200px;"> 61 + </div>
56 - <br><br>
57 -
58 62
59 - <label>나이</label> 63 + <div class="input-area">
60 - &nbsp&nbsp&nbsp 64 + <span class="input-label">
61 - <input type="text" name="name" class="form-control" style="width:200px;"> (세) 65 + <label name="age">나이(세)</label>
62 - <br><br> 66 + </span>
67 + <span class="input-box">
68 + <input type="text" name="age" >
69 + </span>
70 + </div>
63 71
64 - <label>성별</label> 72 + <div class="input-area">
65 - &nbsp&nbsp&nbsp 73 + <span class="input-label">
74 + <label name="male/female">성별</label>
75 + </span>
66 <select id="male/female" style="width: 200px; "> 76 <select id="male/female" style="width: 200px; ">
67 <option>성별 선택</option> 77 <option>성별 선택</option>
68 <option>남자</option> 78 <option>남자</option>
69 <option>여자</option> 79 <option>여자</option>
70 80
71 </select> 81 </select>
72 - <br><br> 82 + </div>
73 83
74 - <label>키</label> 84 + <div class="input-area">
75 - &nbsp&nbsp&nbsp 85 + <span class="input-label">
76 - <input type="text" name="name" class="form-control" style="width:200px;"> (cm) 86 + <label name="height">키(cm)</label>
77 - <br><br> 87 + </span>
88 + <span class="input-box">
89 + <input type="text" name="height" >
90 + </span>
91 +
92 + </div>
78 93
79 - <label>체중</label> 94 + <div class="input-area">
80 - &nbsp&nbsp&nbsp 95 + <span class="input-label">
81 - <input type="text" name="name" class="form-control" style="width:200px;"> (kg) 96 + <label name="weight">체중(kg)</label>
82 - <br><br><br><br> 97 + </span>
98 + <span class="input-box">
99 + <input type="text" name="weight" >
100 + </span>
101 + </div>
102 +
103 + <br><br><br>
83 104
84 <input type="submit" value="Sign Up" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;"> 105 <input type="submit" value="Sign Up" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
85 </div> 106 </div>
......
1 +div, span {
2 + margin: 0;
3 + padding: 0;
4 +}
5 +
6 +.form-inline {
7 + display: flex;
8 + justify-content: center;
9 + flex-direction: column;
10 + align-items: center;
11 +}
12 +
13 +
14 +.input-area {
15 + width: 320px;
16 + margin-top: 15px;
17 +}
18 +
19 +.input-label {
20 + width: 100px;
21 + display: inline-block;
22 + text-align: right;
23 + margin-right: 10px;
24 +}
25 +
26 +.input-label label {
27 + font-size: 15px;
28 +}
29 +
30 +.input-box {
31 + width: 210px
32 +}
33 +
34 +.input-box input{
35 + width: 200px
36 +}
...\ No newline at end of file ...\ No newline at end of file