Modify front-end of Search Result:
Change Search Result Image Display (1 row to grid)
Showing
4 changed files
with
86 additions
and
42 deletions
main/index.js
0 → 100644
This diff is collapsed. Click to expand it.
| ... | @@ -4,23 +4,69 @@ | ... | @@ -4,23 +4,69 @@ |
| 4 | box-sizing:border-box; | 4 | box-sizing:border-box; |
| 5 | } | 5 | } |
| 6 | .containter{ | 6 | .containter{ |
| 7 | + position:relative; | ||
| 7 | width:90%; | 8 | width:90%; |
| 8 | height:auto; | 9 | height:auto; |
| 9 | max-width:1200px; | 10 | max-width:1200px; |
| 10 | - margin:0 auto; | 11 | + margin:0;/*auto*/ |
| 12 | + color:black; | ||
| 11 | } | 13 | } |
| 12 | form{ | 14 | form{ |
| 13 | - width:50%; | 15 | + width:90%; |
| 14 | - max-width:400px; | ||
| 15 | border-radius:4px; | 16 | border-radius:4px; |
| 17 | + margin-top:-10px; | ||
| 18 | + margin-left:10px; | ||
| 19 | + background-color:white; | ||
| 20 | +} | ||
| 21 | +form{ | ||
| 22 | + display:inline-block; | ||
| 16 | } | 23 | } |
| 17 | -form input{ | 24 | +.search-result{ |
| 25 | + /*여러줄로 보여주기 위해선 grid 사용해야하는데, 우선은 영상목록 뽑아보고 결정*/ | ||
| 26 | + /*grid로 바꿔놓음. 여러 열로 사진들이 정렬됨*/ | ||
| 27 | + display:grid; | ||
| 28 | + grid-gap:25px; | ||
| 29 | + grid-template:auto/repeat(auto-fit,minmax(300px,1fr)); | ||
| 30 | + margin-top:50px; | ||
| 18 | width:100%; | 31 | width:100%; |
| 32 | + margin-left:265px; | ||
| 33 | +} | ||
| 34 | +/*form input{ | ||
| 35 | + width:80%; | ||
| 36 | + padding:10px; | ||
| 37 | + border:none; | ||
| 38 | + outline:none; | ||
| 39 | + font-size:1.8rem; | ||
| 40 | + display:inline-block; | ||
| 19 | } | 41 | } |
| 20 | form ion-icon{ | 42 | form ion-icon{ |
| 21 | width:9%; | 43 | width:9%; |
| 22 | font-size:3rem; | 44 | font-size:3rem; |
| 23 | - margin:-15px; | 45 | + margin-left:10px; |
| 46 | + margin-top:15px; | ||
| 24 | color:rgb(75,75,75); | 47 | color:rgb(75,75,75); |
| 25 | - | ||
| 26 | -} | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 48 | +}*/ | ||
| 49 | +.search-box{ | ||
| 50 | + margin-left:-10px; | ||
| 51 | + margin-top:10px; | ||
| 52 | +} | ||
| 53 | +img{ | ||
| 54 | + width:80%; | ||
| 55 | + height:80%; | ||
| 56 | + object-fit:cover; | ||
| 57 | +} | ||
| 58 | +html{ | ||
| 59 | + font-size:12px; | ||
| 60 | +} | ||
| 61 | +section{ | ||
| 62 | + min-height:10vh; | ||
| 63 | + width:100%; | ||
| 64 | + display:flex; | ||
| 65 | + padding:100px 0; | ||
| 66 | +} | ||
| 67 | +.brand{ | ||
| 68 | + margin-top:-70px; | ||
| 69 | + font-size:4rem; | ||
| 70 | + color:black; | ||
| 71 | + margin-bottom:30px; | ||
| 72 | +} | ... | ... |
| 1 | - | 1 | +<!DOCTYPE html> |
| 2 | - <!DOCTYPE html> | 2 | +<html lang="en"> |
| 3 | - <html lang="en"> | 3 | +<head> |
| 4 | - <head> | 4 | + <meta charset="UTF-8"> |
| 5 | - <meta charset="UTF-8"> | 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | - <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 6 | + <title>Document</title> |
| 7 | - <title>Document</title> | 7 | + <link rel="stylesheet" href="main.css"> |
| 8 | - <link rel="style sheet" href="main.css"> | 8 | +</head> |
| 9 | - </head> | 9 | +<body> |
| 10 | - <body> | 10 | + <section> |
| 11 | - <section> | 11 | + <div class="container"> |
| 12 | - <div class="container"> | 12 | + <h1 class="brand">Recipe APP</h1> |
| 13 | - <h1 class="brand">Recipe APP</h1> | 13 | + <form> |
| 14 | - <div class="serach-box"> | 14 | + <input id="name" type="text" placeholder="Search Your Recipe..."> |
| 15 | - <form> | 15 | + <ion-icon name="search"></ion-icon> |
| 16 | - <input id="name" type="text" placeholder="Search Your Recipe..."> | 16 | + </form> |
| 17 | - <ion-icon name="search"></ion-icon> | 17 | + <div class="search-result"> |
| 18 | - </form> | 18 | + <!--<div class="item"> |
| 19 | + <img src="./0.jpg" alt=""> | ||
| 20 | + <div class="flex-container"> | ||
| 21 | + <h1 class="title">This is a recipe</h1> | ||
| 22 | + <a href="#">View Recipe</a> | ||
| 19 | </div> | 23 | </div> |
| 20 | - <div class="search-result"> | 24 | + <p class="item-data">Calories: 120</p> |
| 21 | - <!--<div class="item"> | 25 | + </div>--> |
| 22 | - <img src="./0.jpg" alt=""> | 26 | + </div> |
| 23 | - <div class="flex-container"> | 27 | + </div> |
| 24 | - <h1 class="title">This is a recipe</h1> | 28 | + </section> |
| 25 | - <a href="#">View Recipe</a> | 29 | + <script src="./main.js"></script> |
| 26 | - </div> | 30 | + <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> |
| 27 | - <p class="item-data">Calories: 120</p> | 31 | + <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> |
| 28 | - </div>--> | 32 | +</body> |
| 29 | - </div> | 33 | +</html> |
| 30 | - </div> | ||
| 31 | - </section> | ||
| 32 | - <script src="./main.js"></script> | ||
| 33 | - <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> | ||
| 34 | - <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> | ||
| 35 | - </body> | ||
| 36 | - </html> | ... | ... |
| 1 | +{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"flash":{"error":["Missing username or password."]},"__lastAccess":1638671002743} | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment