![](https://maz.kr/wp-content/uploads/2024/05/howto-js-image-grid-thumbnail.png)
w3.css
이미지 그리드
이미지 격자를 만드는 방법을 알아보자.
이미지 격자 만들기
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 two equal columns that sits next to each other */ .column { flex: 50%; padding: 0 4px; } .column img { margin-top: 8px; vertical-align: middle; }
기본 예시
예제 보기3단계) 자바스크립트 추가
JavaScript를 사용하여 제어 가능한 그리드 보기 만들기
<button onclick="one()">1</button> <button onclick="two()">2</button> <button onclick="four()">4</button> <script> // Get the elements with class="column" var elements = document.getElementsByClassName("column"); // Declare a "loop" variable var i; // Full-width images function one() { for (i = 0; i < elements.length; i++) { elements[i].style.flex = "100%"; } } // Two images side by side function two() { for (i = 0; i < elements.length; i++) { elements[i].style.flex = "50%"; } } // Four images side by side function four() { for (i = 0; i < elements.length; i++) { elements[i].style.flex = "25%"; } } </script>
기본 예시
예제 보기참고
W3C School - How TO - Image Grid