이미지를 반응형으로 표시하는 것은 웹 디자인에서 중요한 요소입니다. clear 속성을 사용하여 반응형 이미지 레이아웃을 만들 수 있습니다.

Clear 속성

clear 속성은 float 속성이 적용된 요소 주위로부터 피해가는 것을 의미합니다. 이를 이용하여 이미지의 크기가 바뀌었을 때 다음 요소들이 이미지 주위로 인접하지 않고 여백을 유지하게 할 수 있습니다.

이미지를 감싸는 부모 요소에 clear: both;를 설정하여 float된 이미지 다음에 오는 요소가 이미지와 인접하지 않도록 만들 수 있습니다.

아래는 반응형 이미지 레이아웃을 만드는 간단한 예제입니다.

.img-wrapper {
  clear: both;
}

.img-wrapper img {
  width: 100%;
  height: auto;
}

<div class="img-wrapper">
  <img src="responsive-image.jpg" alt="Responsive Image">
</div>

이렇게하면 이미지가 부모 요소에 맞게 크기가 조절되면서 반응형으로 표시됩니다.

반응형 이미지 레이아웃을 만들 때에는 이미지가 부모 요소에 맞게 크기가 조절되도록 하는 것이 중요하며, clear를 사용하여 레이아웃이 지저분해지는 것을 방지할 수 있습니다.

결론

CSS의 clear 속성을 이용하여 반응형 이미지 레이아웃을 만들 수 있습니다. 이미지를 감싸는 부모 요소에 clear를 적용하여 레이아웃을 보다 깔끔하게 유지할 수 있습니다.

참고문헌: MDN Web Docs