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