-
칼럼 (Column) 레이아웃프론트엔드/CSS 2021. 10. 24. 20:18728x90
* 칼렘 레이아웃 예시
<!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