[css] CSS clear를 사용하여 이미지 갤러리나 카드 레이아웃을 만드는 방법은?

26 Dec 2023

이미지 갤러리나 카드 레이아웃을 만들 때 CSS clear 속성을 사용하여 요소들의 배치를 제어할 수 있습니다. Clear 속성은 부모 요소의 자식 요소를 어떻게 배치할지를 설정하는 데 사용됩니다.

이미지 갤러리 만들기

아래는 이미지 갤러리를 만들 때 clear를 사용하는 예제입니다.

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

/* CSS */
.gallery img {
  float: left;
  margin-right: 10px;
}

.gallery:after {
  content: "";
  display: table;
  clear: both;
}

이렇게 하면 이미지들이 가로로 나란히 표시되며, 다음 요소들이 이미지들 아래에 배치됩니다.

카드 레이아웃 만들기

카드 레이아웃을 만들 때도 clear를 사용하여 요소들을 정렬할 수 있습니다.

/* HTML */
<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

/* CSS */
.card {
  float: left;
  width: 30%;
  margin-right: 5%;
}

.card:nth-child(3n) {
  margin-right: 0;
}

.card-container:after {
  content: "";
  display: table;
  clear: both;
}

이렇게 하면 카드들이 가로로 배치되며, 세 번째 카드 다음에는 새로운 줄이 시작됩니다.

이처럼 CSS clear를 사용하여 이미지 갤러리나 카드 레이아웃을 만들 때 요소들의 배치를 조절할 수 있습니다. 만약 더 많은 정보가 필요하다면, CSS clear 및 레이아웃 설계에 관한 CSS 자습서를 참고하십시오.

참고 자료

https://www.w3schools.com/cssref/pr_class_clear.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/clear