방법 - 반응형 이미지 그리드
반응형 이미지 그리드를 만드는 방법을 알아보세요.
반응형 이미지 그리드
화면 크기에 따라 4개, 2개 또는 전체 너비 이미지 사이에서 다양한 이미지 갤러리를 만드는 방법을 알아보세요.
이미지 그리드 만들기
1단계) HTML 추가:
예시
<div class="row">
<div class="column">
<img
src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div
class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
<div
class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
</div>
2단계) CSS 추가:
CSS Flexbox를 사용하여 반응형 레이아웃을 만듭니다.
예시
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/*
Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two
column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex:
50%;
max-width: 50%;
}
}
/*
Responsive layout - makes the two columns stack on top of each other instead
of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
팁: 이미지 격자 튜토리얼 로 이동하여 열마다 다른 클릭 가능한 격자를 만드는 방법을 알아보세요.
팁: 유연한 상자 레이아웃 모듈에 대해 자세히 알아보려면 CSS Flexbox 자습서 로 이동 하십시오.