이학주

Modify index page and Add font

...@@ -5,4 +5,7 @@ ...@@ -5,4 +5,7 @@
5 5
6 .card-body { 6 .card-body {
7 text-align: center; 7 text-align: center;
8 +}
9 +body{
10 + font-family: 'Noto Sans KR', sans-serif;
8 } 11 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -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
......

14.7 KB | W: | H:

5.28 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -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>
......