HTML과 CSS를 사용하여 이미지 주위에 텍스트를 배치하려면 어떻게 해야 합니까?

HTML/CSS에서 이미지 주위에 텍스트 감싸기

이미지 주위에 텍스트를 감싸는 작업은 웹 디자인에서 흔히 발생하는 문제입니다. 원하는 효과를 만들려면 아래 설명된 단계를 따르세요.

HTML 구조:

1. ID를 사용하여 컨테이너 div 내의 이미지와 주변 텍스트를 래핑합니다. #container와 같은 속성.

CSS 스타일 지정:

1. 포장된 텍스트의 너비를 결정하려면 컨테이너 div의 특정 너비를 정의하세요.
2. 이미지가 포함된 #floated div에 float: left를 할당하세요. 이렇게 하면 이미지가 왼쪽으로 떠서 텍스트가 그 주위로 흐를 수 있습니다.
3. #floated div에 특정 너비를 설정하여 이미지 너비를 제어하세요.
4. 주변에 충분한 공간을 확보하세요. #floated div 내의 패딩이나 여백 설정으로 이미지를 만듭니다.

예 코드:

<div>
<pre class="brush:php;toolbar:false">#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

추가 리소스:

• [JSFiddle 데모](http://jsfiddle.net/kYDgL/ )
• [MDN 웹 문서: Float](https://developer.mozilla.org/en-US/docs/Web/CSS/float)
• [W3 학교: 텍스트 래핑](https://www.w3schools.com/css /css_text-wrap.asp)