일반적으로 텍스트와 이미지를 올바르게 배치하기 위해서는 CSS clear 속성을 사용하여 플로팅 및 인라인 요소의 레이아웃을 제어해야 합니다.

1. 텍스트와 이미지 배치

우선, 텍스트와 이미지를 포함하는 요소를 선언합니다.

<div class="content">
  <p>텍스트</p>
  <img src="이미지URL" alt="이미지">
</div>

2. Clear 속성 사용

플로팅된 요소 주변에 다른 요소가 밀착되는 것을 방지하기 위해 clear 속성을 사용할 수 있습니다.

img {
  float: left;
  margin-right: 10px;
}

p {
  clear: left;
}

이 코드에서 이미지는 왼쪽으로 플로팅되며, 텍스트는 이미지의 왼쪽에 배치됩니다. 또한 <p> 요소에 clear: left;를 적용하여 이미지의 왼쪽에 텍스트가 표시될 수 있도록 설정합니다.

이제 텍스트와 이미지를 올바르게 배치할 수 있는 CSS clear 속성을 사용할 수 있습니다.

참고 자료

• MDN Web Docs: clear