04 CSS로 Positioning하는 법을 배워보자 - float:left

04 CSS로 Positioning하는 법을 배워보자 - float:left

float는 사전을 보면 '떠가다'라는 뜻이 있다. 단어 뜻 대로 객체가 담겨있는 영역의 크기에 따라 떠다닌다.

'article'객체 5개가 담겨있는 영역이 하늘색 배경의'section'이다.

section의 넓이를 200으로 주었다. 'article'객체는 100*100px의 크기이다.

section{
	width:200px;
}
#article01{
	float:left;
	width:100px;
	height:100px;
	background:#3E454C;
}

#article02{
	float:left;
	width:100px;
	height:100px;
	background:#2185C5;
}

#article03{
	float:left;
	width:100px;
	height:100px;
	background:#7ECEFD;
}

#article04{
	float:left;
	width:100px;
	height:100px;
	background:#FFF6E5;
}

#article05{
	float:left;
	width:100px;
	height:100px;
	background:#FF7F66;
}

결과 화면.

'section'영역의 크기를 바꾸어보자. 현재 200px에서 300px로 조정 해보겠다.

section{
	width:300px;
}
#article01{
	float:left;
	width:100px;
	height:100px;
	background:#3E454C;
}

#article02{
	float:left;
	width:100px;
	height:100px;
	background:#2185C5;
}

#article03{
	float:left;
	width:100px;
	height:100px;
	background:#7ECEFD;
}

#article04{
	float:left;
	width:100px;
	height:100px;
	background:#FFF6E5;
}

#article05{
	float:left;
	width:100px;
	height:100px;
	background:#FF7F66;
}

결과 화면

article1 옆에 article2가 오고 공간이 모자라기 때문에 다음줄에 article3이 오고 계속해서 article4가 왔다.

완료.