Showing
6 changed files
with
56 additions
and
12 deletions
... | @@ -30,4 +30,7 @@ body { | ... | @@ -30,4 +30,7 @@ body { |
30 | .divide { | 30 | .divide { |
31 | border: dotted 1px gray; | 31 | border: dotted 1px gray; |
32 | width: 75%; | 32 | width: 75%; |
33 | +} | ||
34 | +body{ | ||
35 | + font-family: 'Noto Sans KR', sans-serif; | ||
33 | } | 36 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | body { | 1 | body { |
2 | - padding: 100px; | 2 | + padding-left: 30%; |
3 | - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; | 3 | + padding-top: 10% ; |
4 | } | 4 | } |
5 | 5 | ||
6 | body .gyeonggi { | 6 | body .gyeonggi { |
7 | + width: 500px; | ||
7 | display: inline-block; | 8 | display: inline-block; |
8 | vertical-align: center; | 9 | vertical-align: center; |
9 | margin-left: auto; | 10 | margin-left: auto; |
10 | margin-right: auto; | 11 | margin-right: auto; |
11 | } | 12 | } |
13 | +.indexpage{ | ||
14 | + text-align: center; | ||
15 | + display:inline-block; | ||
16 | + margin-left: auto; | ||
17 | + margin-right: auto; | ||
18 | +} | ||
12 | 19 | ||
13 | .title { | 20 | .title { |
14 | vertical-align: middle; | 21 | vertical-align: middle; |
15 | text-align: center; | 22 | text-align: center; |
16 | font: "serif"; | 23 | font: "serif"; |
24 | +} | ||
25 | +body{ | ||
26 | + font-family: 'Noto Sans KR', sans-serif;} | ||
27 | + | ||
28 | +input { | ||
29 | + box-sizing: border-box; | ||
30 | + width: 100%; | ||
31 | + padding: 1em; | ||
32 | + border: 0.15em solid #808080; | ||
33 | + border-radius: 0.5em; | ||
34 | + text-align: center; | ||
35 | +} | ||
36 | +.form-control{ | ||
37 | + text-align: center; | ||
38 | + margin-left: auto; | ||
39 | + margin-right: auto; | ||
40 | + width: 50%; | ||
17 | } | 41 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -5,17 +5,29 @@ | ... | @@ -5,17 +5,29 @@ |
5 | <%- include('components/header') -%> | 5 | <%- include('components/header') -%> |
6 | 6 | ||
7 | <body> | 7 | <body> |
8 | - <img class="gyeonggi" src="/img/logo.png"> | 8 | + <div class ="indexpage"> |
9 | + | ||
9 | 10 | ||
10 | - <form action="/category" method="post" name="location"> | 11 | + <form action="/category" method="post" name="location"> |
11 | - <div class="form-group"> | 12 | + <div class="card mx-auto mb-2" style="width : 100%;"> |
12 | - <label for="exampleFormControlInput1">당신이 조사하고 싶은 동네의 주소를 입력하세요!</label> | 13 | + |
13 | - <input type="text" class="form-control" id="exampleFormControlInput1" name="sigun" placeholder="시/군을 입력하세요"> | 14 | + <img class="gyeonggi" src="/img/logo.png" style ="margin :30px"> |
14 | - <input type="text" class="form-control" id="exampleFormControlInput1" name="gu" placeholder="구를 입력하세요"> | 15 | + <div class="d-flex align-items-center"> |
15 | - <input type="text" class="form-control" id="exampleFormControlInput1" name="dong" placeholder="읍/면/동을 입력하세요"> | 16 | + |
16 | - </div> | 17 | + <div class="card-body"> |
17 | - <button type="submit" class="btn btn-primary">검색</button> | 18 | + |
18 | - </form> | 19 | + <h5 class="card-title">당신이 조사하고 싶은 동네의 주소를 입력하세요!</h5><br> |
20 | + <input type="text" class="form-control" id="exampleFormControlInput1" name="sigun" placeholder="시/군을 입력하세요"><br> | ||
21 | + <input type="text" class="form-control" id="exampleFormControlInput1" name="gu" placeholder="구를 입력하세요"><br> | ||
22 | + <input type="text" class="form-control" id="exampleFormControlInput1" name="dong" placeholder="읍/면/동을 입력하세요"><br> | ||
23 | + <button type="submit" class="btn btn-warning">검색</button><br> | ||
24 | + </div> | ||
25 | + </div> | ||
26 | + </div> | ||
27 | + </form> | ||
28 | + </div> | ||
19 | </body> | 29 | </body> |
20 | 30 | ||
31 | + | ||
32 | + | ||
21 | </html> | 33 | </html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -9,6 +9,8 @@ | ... | @@ -9,6 +9,8 @@ |
9 | <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-reboot.min.css' /> | 9 | <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-reboot.min.css' /> |
10 | <link rel='stylesheet' href='/css/category.css'> | 10 | <link rel='stylesheet' href='/css/category.css'> |
11 | <link rel="stylesheet" href="/css/result.css"> | 11 | <link rel="stylesheet" href="/css/result.css"> |
12 | + <link rel="preconnect" href="https://fonts.gstatic.com"> | ||
13 | + <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet"> | ||
12 | 14 | ||
13 | <title>📝 결과</title> | 15 | <title>📝 결과</title> |
14 | </head> | 16 | </head> | ... | ... |
-
Please register or login to post a comment