반응형
이미지 사이즈를 모든 해상도에 맞게 fit하는 방법
background-size: cover;
text-align은 div내부 텍스트 뿐만 아니라 img까지 정렬 가능.
이미지 사이 공백 발생시 float로 겹치는 것이 좋음.
이미지 이어붙힌 길이가 850px라면 이미지들이 들어있는 div의 사이즈를 이미지 사이즈로
맞춘뒤에 margin-left , margin-right auto로 지정
margin, padding은 클래스 단위로 걸림
같은 div에서 두개의 이미지가 margin으로 간격을 주고 싶다면 두개의 이미지에 각각 class를 부여하고 줘야 함.
<html>
|
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
|
<DOCTYPE! html>
<html>
<head>
<title>
</title>
</head>
<body>
<div class ="main_frame">
<div class ="menu">
</div>
</div>
</body>
</html>
|
<css>
|
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
|
body{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.main_frame{
width: 850px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#logo{
margin-top: 50px;
margin-bottom: 50px;
}
.menu-img{
float: left;
}
.copyright{
margin-top: 50px;
}
|
<layout>
반응형
'HTML & CSS & JS' 카테고리의 다른 글
| hover (0) | 2019.11.23 |
|---|---|
| div 중앙정렬 (0) | 2019.11.23 |
| 정렬 (0) | 2019.11.22 |
| background (0) | 2019.11.22 |
| margin , padding (0) | 2019.11.21 |
