HTML 페이지에서 이미지를 텍스트 옆에 자연스럽게 배치하고 싶다면 CSS의 float 속성을 활용하면 됩니다. float 속성을 사용하면 이미지를 왼쪽 또는 오른쪽으로 띄워(floating) 주변 텍스트가 이미지를 감싸며 흐르도록 만들 수 있습니다.
float 속성의 주요 값
float 속성에 사용할 수 있는 대표적인 값은 다음과 같습니다.
| 번호 | 속성 값 및 설명 |
|---|---|
| 1 | none 이미지를 띄우지 않음 (기본 흐름 유지) |
| 2 | left 이미지를 왼쪽으로 띄움 |
| 3 | right 이미지를 오른쪽으로 띄움 |
| 4 | initial 기본값으로 설정 |
예제 코드
아래 코드를 실행하면 HTML에서 플로팅 이미지가 어떻게 동작하는지 직접 확인할 수 있습니다. 이 예제에서는 float: right와 float: left 두 가지 방식을 모두 보여줍니다.
<!DOCTYPE html> <html> <head> <title>HTML Floating Image</title> </head> <body> <h1>Float Right</h1> <p>아래 이미지는 오른쪽으로 띄워집니다.</p> <p> <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:right" width="190" height="84" /> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> <h1>Float Left</h1> <p>아래 이미지는 왼쪽으로 띄워집니다.</p> <p> <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:left" width="190" height="84" /> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 첫 번째 이미지는 오른쪽에, 두 번째 이미지는 왼쪽에 각각 배치되고, 나머지 텍스트가 이미지 주변을 자연스럽게 감싸는 것을 확인할 수 있습니다.
참고로 최근에는 반응형 웹 레이아웃을 위해 flexbox나 grid 레이아웃이 더 많이 사용되지만, 이미지와 텍스트를 간단히 배치할 때는 여전히 float 속성이 유용하게 활용됩니다.