위치 정렬 - float

float는 뜨다, 띄우다는 뜻을 가지고 있으며, float 프로퍼티는 말 그대로 요소를 어떻게 띄울지 결정한다. 

float 프로퍼티는 요소를 디자인 흐름에서 벗어나게 한 뒤, 사용자가 지정한 방향에 배치하도록 하는 프로퍼티이다.

 

문서 작성 프로그램에서 위와 같이 사진과 본문 사이의 배치를 조정하여 사진과 글이 함께 보여지도록 문서를 작성한 경험이 있을 것이다. 웹에서도 이와 동일하게 배치할 수 있다. float를 사용함으로...

 

처음 실습은 float를 적용하지 않고 실습해보겠다. 

<div class="container">
	<img class="cat-img" src="https://thumb.sixshop.kr/uploadedFiles/11280/blogPost/image_1557380285585.jpg?width=1000"/>
	<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

.container {
	border: 4px solid red;
}
.text {
	margin: 0;
	border: 4px solid blue;
}
.cat-img {
	border: 4px solid yellow;
	width: 200px;
}

아래와 같이 이미지가 먼저 출력되고 그 다음 줄에 .text가 출력된다. 

그러면 css 소스코드에 float를 적용시켜보겠다. 

.cat-img {
	border: 4px solid yellow;
	width: 200px;
	float: left;
}

.cat-img {
	border: 4px solid yellow;
	width: 200px;
	float: right;
}