프론트엔드/CSS
칼럼 (Column) 레이아웃
syleemomo
2021. 10. 24. 20:18
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