CSS에서 float와 margin의 조합

현재 우리 텍스트는 왼쪽에 있는 이미지에 붙어 있습니다. 이 텍스트를 조금 밀어내 보겠습니다. 이를 위해 우리 단락에 왼쪽 margin을 30px로 설정하고, 부모 div에는 빨간색 테두리를 주겠습니다.

예상과 달리, 부모 div에 인접한 텍스트만 오른쪽으로 밀려나고, 이미지에 인접한 텍스트는 밀리지 않습니다:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
}
img {
	float: left;
}

왜 이런 현상이 발생하는지 이해하기 위해 단락에 녹색 테두리를 추가해 보겠습니다:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
}

우리가 보는 것처럼, 실제로 단락들은 왼쪽 가장자리에서 밀려나지만, 이미지가 아니라 부모 div에서 밀려나는 것입니다. 자세히 보기 위해 opacity 속성을 사용하여 이미지에 반투명 효과를 추가해 보겠습니다:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

이제 margin-left에 대한 반응이 확실히 보입니다. 단, 실제로 단락들은 이미지 아래에 위치해 있습니다. 마진을 제거하고 이미지의 반투명 효과는 남겨두겠습니다:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

이것이 우리 단락들의 실제 모습입니다. 텍스트는 이미지에 의해 밀려났지만, 물리적으로 단락들은 이미지 아래에 놓여 있으며, 이는 부모 div의 왼쪽 가장자리에서 시작하는 테두리로 확인할 수 있습니다.

margin을 다시 적용하고 이미지를 첫 번째 단락 안에 넣어 보겠습니다:

<div>
	<p>
		<img src="img.png" alt="">
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

이제 이미지는 단락들과 함께 움직입니다!