CSS에서 이미지를 오른쪽에 정렬

1. CSS에서 float 및 clear 속성을 사용하여 이미지를 한 줄 오른쪽에 정렬
2. display 및 margin-left 속성을 사용하여 CSS에서 이미지를 한 줄 오른쪽에 정렬

이 기사에서는 CSS에서 이미지를 오른쪽으로 정렬하는 몇 가지 방법에 대해 설명합니다.

CSS에서 float 및 clear 속성을 사용하여 이미지를 한 줄 오른쪽에 정렬

float 속성을 사용하여 CSS에서 요소의 부동 위치를 지정할 수 있습니다.

예를 들어 HTML에 이미지를 삽입하고 이미지 아래에 단락을 작성할 때 이미지를 단락의 왼쪽이나 오른쪽에 띄울 수 있습니다. 이러한 방식으로 텍스트를 이미지 옆에 표시할 수 있습니다.

CSS의 단락 오른쪽에 이미지를 정렬하기 위해 float 속성을 right로 설정할 수 있습니다. 그러나 이미지 아래 단락을 밀어야 하는 경우 clear 속성이 유용할 것입니다.

속성은 부동 요소 아래에 있는 요소의 흐름을 정의합니다. clear 속성에 right 옵션을 사용하면 요소가 오른쪽 부동 이미지 아래로 푸시됩니다.

따라서 이미지를 오른쪽 정렬하고 다음 줄에서 단락을 시작할 수 있습니다. 이미지 왼쪽에 빈 공간이 생깁니다.

예를 들어 HTML에서 img 태그를 사용하여 이미지를 삽입합니다. img 태그 옆에 p 태그를 작성하고 텍스트를 입력합니다.

CSS에서 img 태그를 선택하고 float 속성을 적용합니다. right 옵션을 float 속성으로 설정합니다. 다음으로 p 태그를 선택하고 clear 속성을 right로 설정합니다.

여기에서 이미지는 웹페이지의 오른쪽에 정렬됩니다. 이미지 옆에 텍스트가 없습니다.

clear 속성을 사용하지 않았다면 텍스트가 이미지 왼쪽에 나타납니다. clear 속성을 사용하여 이미지 아래에 텍스트를 푸시했습니다.

clear 속성에 대해 both 옵션을 설정할 수도 있습니다. 왼쪽 및 오른쪽 부동 요소 아래에 다음 요소를 푸시합니다.

예제 코드:

<img src="/img/DelftStack/logo.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nihil, vitae placeat molestias inventore, numquam eveniet illo optio, sint excepturi nam? Ut dolor ratione aut tenetur, a aliquid natus tempore!
</p>

img{
 float:right;
}

p{
 clear:right;
}

display 및 margin-left 속성을 사용하여 CSS에서 이미지를 한 줄 오른쪽에 정렬

이 방법에서는 이미지를 오른쪽으로 정렬하고 텍스트를 다른 줄로 밀어 넣는 또 다른 방법에 대해 설명합니다.

display 및 margin-left 속성을 사용하여 목표를 달성할 수 있습니다. margin-left 속성을 사용하여 이미지 왼쪽에 여백을 설정하고 웹페이지에서 이미지를 오른쪽으로 푸시할 수 있습니다.

auto 옵션으로 이를 달성할 수 있습니다. 이미지를 블록 요소로 설정하여 텍스트를 강제로 다음 줄로 이동할 수 있습니다. display 속성으로 이를 수행할 수 있습니다.

이 예에서는 첫 번째 방법에서 사용된 HTML 구조를 사용합니다. 예를 들어 img 태그를 선택하고 margin-left 속성을 auto로 설정합니다. 그런 다음 display 속성에 block 옵션을 적용합니다.

여기에서 auto 옵션은 이미지의 왼쪽 여백을 설정합니다. 이미지는 크기에 따라 공간을 차지합니다.

그런 다음 브라우저는 남은 공간을 계산하고 그 공간을 왼쪽 여백으로 설정합니다. 결과적으로 이미지가 오른쪽 정렬됩니다.

display 속성을 block으로 설정하면 블록 수준 요소가 됩니다. 이것은 이미지가 전체 라인을 차지한다는 것을 의미합니다.

이미지의 다음 요소는 다음 줄로 푸시됩니다. 따라서 오른쪽의 display 및 margin-left 속성을 사용하여 이미지를 정렬하고 텍스트를 다음 줄로 이동할 수 있습니다.

예제 코드:

img {
 margin-left: auto;
 display: block;
}