main.css
2.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap');
*{
padding:0;
margin:0;
box-sizing:border-box;
}
body{
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
background-position: center;
background-repeat: repeat;
background-size: cover;
background-attachment: scroll;
}
flex-containter{
font-size:100px;
font-family: 'Noto Sans KR', sans-serif;
}
form input{
width:60%;
padding:7px;
background-color:white;
border-radius:30px;
}
.containter{
position:relative;
width:80%;
height:auto;
max-width:3200px;
margin:0;/*auto*/
color:black;
font-size:100px;
font-family: 'Noto Sans KR', sans-serif;
}
form{
width:90%;
border-radius:4px;
margin-top:-10px;
margin-left:10px;
/* background-color:white;
*/}
form{
display:inline-block;
}
.search-result{
/*여러줄로 보여주기 위해선 grid 사용해야하는데, 우선은 영상목록 뽑아보고 결정*/
/*grid로 바꿔놓음. 여러 열로 사진들이 정렬됨*/
display:grid;
row-gap:15%;
grid-template-columns: repeat(auto-fill, minmax(25%, auto));
/* grid-template:auto/repeat(auto-fill,minmax(250px,1fr)); */
margin-top:50px;
width:200%;
margin-left:265px;
margin-bottom:100px;
}
/*form input{
width:80%;
padding:10px;
border:none;
outline:none;
font-size:1.8rem;
display:inline-block;
}
*/ form ion-icon{
width:9%;
font-size:3rem;
margin-left:10px;
margin-top:15px;
color:rgb(75,75,75);
}
.search-box{
margin-left:-10px;
margin-top:10px;
}
img{
width:80%;
height:80%;
object-fit:cover;
}
html{
font-size:15px;
font-family: 'Nanum Pen Script', cursive;
}
section{
min-height:100vh;
width:100%;
display:flex;
padding:100px 0;
align-items:stretch;
}
.brand{
margin-top:-70px;
font-size:4rem;
color:black;
margin-bottom:30px;
}