구희연 / Food_recipe_info

Go to a project
Toggle navigation Toggle navigation pinning
조국현
d3760237 1 parent 4ac2b2f6

Modify front-end of Search Result: 

Change Search Result Image Display (1 row to grid)
Expand all
Inline Side-by-side
Showing 4 changed files with 61 additions and 17 deletions
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 - 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;
26 } 72 }
......
1 - 1 +<!DOCTYPE html>
2 - <!DOCTYPE html> 2 +<html lang="en">
3 - <html lang="en"> 3 +<head>
4 - <head>
5 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title> 6 <title>Document</title>
8 - <link rel="style sheet" href="main.css"> 7 + <link rel="stylesheet" href="main.css">
9 - </head> 8 +</head>
10 - <body> 9 +<body>
11 <section> 10 <section>
12 <div class="container"> 11 <div class="container">
13 <h1 class="brand">Recipe APP</h1> 12 <h1 class="brand">Recipe APP</h1>
14 - <div class="serach-box">
15 <form> 13 <form>
16 <input id="name" type="text" placeholder="Search Your Recipe..."> 14 <input id="name" type="text" placeholder="Search Your Recipe...">
17 <ion-icon name="search"></ion-icon> 15 <ion-icon name="search"></ion-icon>
18 </form> 16 </form>
19 - </div>
20 <div class="search-result"> 17 <div class="search-result">
21 <!--<div class="item"> 18 <!--<div class="item">
22 <img src="./0.jpg" alt=""> 19 <img src="./0.jpg" alt="">
...@@ -32,5 +29,5 @@ ...@@ -32,5 +29,5 @@
32 <script src="./main.js"></script> 29 <script src="./main.js"></script>
33 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> 30 <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> 31 <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
35 - </body> 32 +</body>
36 - </html> 33 +</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