HTML에서 부동 이미지를 사용하려면 CSS 속성 float를 사용하십시오. 이미지를 왼쪽이나 오른쪽으로 띄울 수 있습니다. 더 많은 속성 값은 다음과 같습니다.
Sr.No. | 속성 값 및 설명 |
---|---|
1 | 없음 뜨지 않음 |
2 | 왼쪽 왼쪽으로 뜨다 |
3 | 오른쪽 오른쪽으로 뜨다 |
4 | 초기 기본값 |
예시
HTML에서 부동 이미지를 사용하기 위해 다음 코드를 실행할 수 있습니다. float right 및 float left CSS 속성의 사용법은 다음과 같습니다.
<!DOCTYPE html> <html> <head> <title>HTML Floating Image</title> </head> <body> <h1>Float Right</h1> <p>The below image floats to the right.</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>The below image floats to the left.</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>
출력