zuzitsu / UR_Village

Go to a project
Toggle navigation Toggle navigation pinning
이학주
153557bf 1 parent 5f6d79ce

Modify category view

Inline Side-by-side
Showing 4 changed files with 81 additions and 65 deletions
1 -.row { 1 +/* .row {
2 padding-left: 15px; 2 padding-left: 15px;
3 padding-right: 15px; 3 padding-right: 15px;
4 -} 4 +} */
5 5
6 .card-body { 6 .card-body {
7 text-align: center; 7 text-align: center;
8 } 8 }
9 body{ 9 body{
10 font-family: 'Noto Sans KR', sans-serif; 10 font-family: 'Noto Sans KR', sans-serif;
11 +}
12 +.category{
13 + text-align: center;
14 + margin-left: auto;
15 + margin-right: auto;
16 + width: 70%;
11 } 17 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
8 <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-grid.min.css' /> 8 <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-grid.min.css' />
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 - 11 + <link rel="preconnect" href="https://fonts.gstatic.com">
12 + <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
12 <title>📝 진단 검사</title> 13 <title>📝 진단 검사</title>
13 </head> 14 </head>
14 15
......
1 -<div class="row"> 1 +<div class="category">
2 - <div class="card" style="width: 18rem;"> 2 + <div class="card mx-auto mb-2" style ="margin-left: 30%;">
3 - <img src="/img/restaurant.jpg" class="card-img-top" alt="..."> 3 + <div class="d-flex align-items-center">
4 - <div class="card-body"> 4 + <div class="card" style="width: 18rem;">
5 - <h5 class="card-title">음식</h5> 5 + <img src="/img/restaurant.jpg" class="card-img-top" alt="...">
6 - <p class="card-text">주변 음식점의 수</p> 6 + <div class="card-body">
7 - <a href="/category/food" class="btn btn-primary">검사!</a> 7 + <h5 class="card-title">음식</h5>
8 + <p class="card-text">주변 음식점의 수</p>
9 + <a href="/category/food" class="btn btn-primary">검사!</a>
10 + </div>
11 + </div>
12 + <div class="card" style="width: 18rem;">
13 + <img src="/img/school.jpg" class="card-img-top" alt="...">
14 + <div class="card-body">
15 + <h5 class="card-title">학군</h5>
16 + <p class="card-text">주변 학원 및 도서관 현황</p>
17 + <a href="/category/school" class="btn btn-primary">검사!</a>
18 + </div>
19 + </div>
20 + <div class="card" style="width: 18rem;">
21 + <img src="/img/park.jpg" class="card-img-top" alt="...">
22 + <div class="card-body">
23 + <h5 class="card-title">공원</h5>
24 + <p class="card-text">주변 공원</p>
25 + <a href="/category/park" class="btn btn-primary">검사!</a>
26 + </div>
27 + </div>
28 + <div class="card" style="width: 18rem;">
29 + <img src="/img/transport.jpg" class="card-img-top" alt="...">
30 + <div class="card-body">
31 + <h5 class="card-title">대중교통</h5>
32 + <p class="card-text">대중교통 편리도</p>
33 + <a href="/category/transport" class="btn btn-primary">검사!</a>
34 + </div>
35 + </div>
8 </div> 36 </div>
9 </div> 37 </div>
10 - <div class="card" style="width: 18rem;"> 38 +
11 - <img src="/img/school.jpg" class="card-img-top" alt="..."> 39 + <div class="card mx-auto mb-2"style ="margin-left: 30%;">
12 - <div class="card-body"> 40 + <div class="d-flex align-items-center">
13 - <h5 class="card-title">학군</h5> 41 + <div class="card" style="width: 18rem;">
14 - <p class="card-text">주변 학원 및 도서관 현황</p> 42 + <img src="/img/safe.jpg" class="card-img-top" alt="...">
15 - <a href="/category/school" class="btn btn-primary">검사!</a> 43 + <div class="card-body">
16 - </div> 44 + <h5 class="card-title">안전</h5>
17 - </div> 45 + <p class="card-text">주변 경찰서, 범죄자 인근~</p>
18 - <div class="card" style="width: 18rem;"> 46 + <a href="/category/safe" class="btn btn-primary">검사!</a>
19 - <img src="/img/park.jpg" class="card-img-top" alt="..."> 47 + </div>
20 - <div class="card-body"> 48 + </div>
21 - <h5 class="card-title">공원</h5> 49 + <div class="card" style="width: 18rem;">
22 - <p class="card-text">주변 공원</p> 50 + <img src="/img/cultural_life.jpg" class="card-img-top" alt="...">
23 - <a href="/category/park" class="btn btn-primary">검사!</a> 51 + <div class="card-body">
24 - </div> 52 + <h5 class="card-title">여가</h5>
25 - </div> 53 + <p class="card-text">주변 문화시설</p>
26 - <div class="card" style="width: 18rem;"> 54 + <a href="/category/culture" class="btn btn-primary">검사!</a>
27 - <img src="/img/transport.jpg" class="card-img-top" alt="..."> 55 + </div>
28 - <div class="card-body"> 56 + </div>
29 - <h5 class="card-title">대중교통</h5> 57 + <div class="card" style="width: 18rem;">
30 - <p class="card-text">대중교통 편리도</p> 58 + <img src="/img/shopping.jpg" class="card-img-top" alt="...">
31 - <a href="/category/transport" class="btn btn-primary">검사!</a> 59 + <div class="card-body">
32 - </div> 60 + <h5 class="card-title">쇼핑</h5>
33 - </div> 61 + <p class="card-text">주변 백화점, 마트, 재래시장</p>
34 - <div class="card" style="width: 18rem;"> 62 + <a href="/category/shop" class="btn btn-primary">검사!</a>
35 - <img src="/img/safe.jpg" class="card-img-top" alt="..."> 63 + </div>
36 - <div class="card-body"> 64 + </div>
37 - <h5 class="card-title">안전</h5> 65 + <div class="card" style="width: 18rem;">
38 - <p class="card-text">주변 경찰서, 범죄자 인근~</p> 66 + <img src="/img/gym.jpg" class="card-img-top" alt="...">
39 - <a href="/category/safe" class="btn btn-primary">검사!</a> 67 + <div class="card-body">
40 - </div> 68 + <h5 class="card-title">운동</h5>
41 - </div> 69 + <p class="card-text">주변 운동시설</p>
42 - <div class="card" style="width: 18rem;"> 70 + <a href="/category/gym" class="btn btn-primary">검사!</a>
43 - <img src="/img/cultural_life.jpg" class="card-img-top" alt="..."> 71 + </div>
44 - <div class="card-body"> 72 + </div>
45 - <h5 class="card-title">여가</h5>
46 - <p class="card-text">주변 문화시설</p>
47 - <a href="/category/culture" class="btn btn-primary">검사!</a>
48 - </div>
49 - </div>
50 - <div class="card" style="width: 18rem;">
51 - <img src="/img/shopping.jpg" class="card-img-top" alt="...">
52 - <div class="card-body">
53 - <h5 class="card-title">쇼핑</h5>
54 - <p class="card-text">주변 백화점, 마트, 재래시장</p>
55 - <a href="/category/shop" class="btn btn-primary">검사!</a>
56 - </div>
57 - </div>
58 - <div class="card" style="width: 18rem;">
59 - <img src="/img/gym.jpg" class="card-img-top" alt="...">
60 - <div class="card-body">
61 - <h5 class="card-title">운동</h5>
62 - <p class="card-text">주변 운동시설</p>
63 - <a href="/category/gym" class="btn btn-primary">검사!</a>
64 </div> 73 </div>
65 </div> 74 </div>
66 </div> 75 </div>
...\ No newline at end of file ...\ No newline at end of file
......
1 <div class="jumbotron jumbotron-fluid"> 1 <div class="jumbotron jumbotron-fluid">
2 - <div class="container"> 2 + <div class="container" style="text-align: center;">
3 <h3> 3 <h3>
4 🔎 검색한 동네 : 4 🔎 검색한 동네 :
5 <%=userLocation%> 5 <%=userLocation%>
......