스타일 시트 강좌 - CSS float 속성

 

환경: Eclipse Mars, CSS5

 

float 의 값으로 left right 를 설정하면 float 가 적용된 태그를 상위 태그가 감싸게 됩니다. 워드나 한글에서 이미지와 텍스트를 구분해서 배열하는 것처럼 CSS 에서도 가능합니다. 흔히 사이트에서 왼쪽이나 오른쪽에 광고 그림을 배치하고 글이 옆에서 아래로 자동 정렬이 되게 만든 것이 float 속성을 적용한 것입니다. 

 

float 의 속성에는 4가지 값을 가지고 있습니다. inherit, left, right, none 이며 left 는 왼쪽에 태그 요소를 두고 right 는 오른쪽에 둡니다.

 

¤ inherit : 기본값이며 상위 태그의 상태를 상속받습니다.

¤ left : 태그 요소 박스를 왼쪽에 만들고 오른쪽에 내용이 위에서 아래로 흐르도록 만듭니다. clear 속성이 있으면 달라 집니다.

¤ right : 태그 요소 박스를 오른쪽에 만들고 왼쪽에 내용이 위에서 아래로 흐르도록 만듭니다.

¤ none : float 속성이 적용되지 않습니다.

 

아래 샘플은 많이 쓰이는 구조입니다. 광고나 이미지를 왼쪽이나 오른쪽에 두고 설명글을 바로 옆에 배치해서 효과를 극대화 시킵니다. 이렇게 float 는 텍스트와 이미지를 배치하기 위해 만들어 졌지만 레이아웃을 배치할 때도 많이 사용합니다. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		width: 550px; height: 350px;
		border: 1px solid; padding: 10px;
		background-color: #F9F249;
	}
	#float1 { float: right;	padding: 10px;}
</style>
</head>
<body>
	<div>
		<img src="float.png" id="float1">
		<p>South Korea faces a tough decision over its 
		economic sanctions against North Korea, as the 
		public here remains torn over the issue that could 
		affect voter sentiment ahead of the parliamentary 
		elections next April.</p>
		
		<p>Seoul maintains that the so-called May 24 
		sanctions, which were imposed after Pyongyang’s 
		torpedo attack on the corvette Cheonan in March 2010, 
		can only be terminated with the regime’s apology for it, 
		steps to prevent a recurrence and the punishment of the 
		attackers.</p>

		<p>But calls have been rising for Seoul to take a 
		more flexible approach to the issue to pave the 
		way for bilateral reconciliation and cooperation, 
		which would, in turn, ease military tensions 
		on the peninsula.</p>
	</div>
</body>
</html>

 

스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성

 

두 번째로 레이아웃을 배치할 때 주로 사용합니다. 보통 div 태그는 연속해서 사용하면 줄바꿈이 되지만 float 속성은 옆 줄에 바로 배치할 수 있습니다. 만약 브라우저를 벗어나면 아래로 배치가 됩니다. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		width: 200px; height: 100px;
		padding: 10px;
	}
	#float1 {float:left; background-color: #F9F249;}
	#float2 {float:left;background-color: #69F354;}
	#float3 {float:left;background-color: #36FFFF;}
</style>
</head>
<body>
	<div id="float1">float: absolute 1</div>
	<div id="float2">float: absolute 2</div>
	<div id="float3">float: absolute 3</div>
</body>
</html>

스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성

 

Posted by 녹두장군