먼저, HTML 구조를 설정합니다. 이미지들을 감싸기 위한 div를 만들고, 각 이미지에는 클래스를 할당합니다.

<div class="gallery">
  <img class="gallery-image" src="image1.jpg" alt="Image 1">
  <img class="gallery-image" src="image2.jpg" alt="Image 2">
  <img class="gallery-image" src="image3.jpg" alt="Image 3">
</div>

그런 다음, CSS를 사용하여 이미지들을 원하는 방식으로 레이아웃하고 clear를 사용하여 이미지의 레이아웃을 조절합니다.

.gallery {
  width: 100%;
}

.gallery-image {
  width: 33.33%; /* 3 images per row */
  float: left;
  box-sizing: border-box;
}

.gallery-image:nth-child(3n+1) {
  clear: left; /* clear every third image */
}

위의 CSS 코드에서, clear: left;는 세 번째 이미지마다 해당 이미지의 왼쪽에 플로팅된 요소가 없도록 지정합니다.

이 방법을 사용하면 clear를 활용하여 이미지 갤러리를 정확히 레이아웃할 수 있습니다.

참고 자료:

• https://developer.mozilla.org/en-US/docs/Web/CSS/clear