728x90
* 칼렘 레이아웃 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Flexbox</title>
</head>
<body>
<div id="photo-box">
<div class="photo">포토1</div>
<div class="photo">포토2</div>
<div class="photo">포토3</div>
<div class="photo">포토4</div>
<div class="photo">포토5</div>
<div class="photo">포토6</div>
<div class="photo">포토7</div>
<div class="photo">포토8</div>
<div class="photo">포토9</div>
<div class="photo">포토10</div>
<div class="photo">포토11</div>
<div class="photo">포토12</div>
<div class="photo">포토13</div>
<div class="photo">포토14</div>
<div class="photo">포토15</div>
<div class="photo">포토16</div>
<div class="photo">포토17</div>
<div class="photo">포토18</div>
<div class="photo">포토19</div>
<div class="photo">포토20</div>
<div class="photo">포토21</div>
<div class="photo">포토21</div>
<div class="photo">포토23</div>
<div class="photo">포토24</div>
<div class="photo">포토25</div>
<div class="photo">포토26</div>
<div class="photo">포토27</div>
<div class="photo">포토28</div>
<div class="photo">포토29</div>
<div class="photo">포토30</div>
</div>
</body>
</html>body {
padding: 0;
margin: 0;
}
#photo-box {
width: 60%;
columns: 4;
margin: 50px auto;
}
.photo {
width: 100%;
height: 300px;
margin-bottom: 10px;
background: tomato;
display: inline-block; /* 컬럼 짤림 방지*/
}
.photo img {
width: 100%;
height: 100%;
}
@media screen and (max-width: 1300px) {
#photo-box {
width: 70%;
columns: 3;
}
}
@media screen and (max-width: 1000px) {
#photo-box {
width: 80%;
columns: 2;
}
}
@media screen and (max-width: 800px) {
#photo-box {
width: 90%;
columns: 1;
}
}
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| flex 없이 중앙정렬하기 (0) | 2021.11.04 |
|---|---|
| flex 없이 카드 레이아웃 만들기 (반응형 포함) (0) | 2021.11.04 |
| Grid 기본이론 (0) | 2021.10.19 |
| 반응형 웹 (Responsive web) (0) | 2021.10.18 |
| Flex (Flexible Box) 기본 이론 (0) | 2021.10.16 |