HTML에서 이미지 옆에 텍스트 배치

1. float CSS 속성을 사용하여 HTML에서 이미지 옆에 텍스트 배치
2. display: inline-block 및 vertical-align: top을 사용하여 HTML에서 이미지 옆에 텍스트 배치

이 기사에서는 HTML과 CSS를 사용하여 이미지 옆에 텍스트를 배치하는 방법을 설명합니다.

float CSS 속성을 사용하여 HTML에서 이미지 옆에 텍스트 배치

float CSS 속성을 사용하여 요소가 부동하는 방법을 정의할 수 있습니다. 요소는 오른쪽이나 왼쪽으로 떠 있을 수 있습니다. 일부 다른 옵션은 요소가 부동 상태가 아님을 의미하는 none과 부모의 동작을 나타내는 inherit입니다. float 속성을 사용하여 요소의 위치 지정 및 형식 지정을 지정합니다. 속성을 사용하여 이미지 옆에 텍스트를 배치할 수도 있습니다.

이미지와 텍스트 콘텐츠를 모두 div로 래핑하여 다음 스타일을 쉽게 얻을 수 있습니다. HTML은 아래와 같이 구성되어야 합니다.

<div>
    <div>
        <img src="url" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

HTML이 구조화되었으므로 CSS를 인라인, 내부 또는 외부로 추가할 수 있습니다. 이 예에서는 인라인 CSS를 사용하여 스타일을 구현합니다. 먼저 이미지를 래핑하는 div에 대해 float 속성을 left로 설정합니다. URL https://loremflickr.com/320/240을 이미지 소스로 사용하십시오. 다음으로 원하는 텍스트를 작성하고 다른 div로 감쌉니다.

코드 예:

<div>
    <div style="float: left">
        <img src="https://loremflickr.com/320/240" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

여기에서 float: left 속성이 이미지 래퍼에 지정됩니다. float: left 속성은 이미지를 왼쪽에 배치하고 텍스트 내용을 래핑하는 다른 래퍼는 이미지 바로 옆에 배치합니다. 이런 식으로 CSS float 속성을 사용하여 이미지 옆에 텍스트를 배치할 수 있습니다.

display: inline-block 및 vertical-align: top을 사용하여 HTML에서 이미지 옆에 텍스트 배치

display 및 vertical-align 속성을 사용하여 HTML에서 이미지 옆에 텍스트를 배치할 수 있습니다. display는 HTML에서 요소가 표시되는 방식을 정의합니다. 요소의 표시 속성을 inline, inline-block, block 등으로 설정할 수 있습니다. display를 inline-block에 할당하면 요소를 인라인 요소로 만들지만 여전히 할 수 있습니다. height 및 width 속성을 설정합니다. 따라서 이미지 옆에 텍스트를 배치할 수 있습니다. vertical-align 속성은 요소의 수직 정렬을 정의합니다. top 값을 사용하면 요소가 라인에서 가장 높은 요소의 상단에 정렬됩니다.

여기서 다시 아래와 같이 코드를 구성할 수 있습니다.

<div>
    <img src="" alt="img"/>
</div>
<div>
    <p>
        Text Here,
    </p>
</div>

예를 들어, 이미지 래퍼 div에 대해 display 속성을 inline-block으로 설정하고 vertical-align 속성을 top으로 설정합니다. 래퍼의 경우 텍스트의 div는 display 속성을 inline-block으로 설정합니다.

코드 예:

<div style="display:inline-block;vertical-align:top;">
    <img src="https://loremflickr.com/320/240" alt="img"/>
</div>
<div style="display:inline-block;">
    <p>
    Here goes the text content.
    </p>
</div>

여기에서 display: inline-block 속성은 이미지를 래핑하는 래퍼의 속성을 인라인 블록 속성으로 설정합니다. inline-block 옵션은 요소 옆에 줄 바꿈을 추가하지 않습니다. 따라서 요소가 서로 나란히 정렬됩니다. 다시 display: inline-block 속성으로 텍스트 래퍼를 래핑합니다. 이전 래퍼와 유사하게 텍스트 콘텐츠를 이미지 바로 옆에 배치합니다.