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 | ... | ... |
-
Please register or login to post a comment