스타일 시트 CSS clear 속성, float 기능을 제거하는 방법

스타일시트 CSS

스타일 시트 CSS clear 속성, float 기능을 제거하는 방법

 

환경: Eclipse Mars, CSS3

 

float 속성을 이용해서 텍스트와 이미지를 배치할 때는 문제가 발생할 일이 별로 없습니다. 하나의 컨테이너 안에 float 속성이 적용된 두 개의 다른 태그가 있다면 높이 값이 적용되지 않습니다. 그래서 다음에 오는 객체와 겹쳐집니다. 높이 값을 제대로 반영하려면 float 를 제거할 수 있는 clear 속성을 사용해야 합니다. 

 

clear 속성 문법은 다음과 같습니다. clear 속성으로 쓰이는 값 중 both 가 제일 많이 쓰입니다. both float 가 사용된 left, right 모두 효과를 제거해 주기 때문입니다. 한 쪽 방향만 하고 싶다면 left, right 중 하나를 고르세요. none 은 기본값으로 clear 효과를 반영하지 않습니다. 

 

<style type="text/css">

  선택자 {

     clear : none, left, right, both, inherit 값 중 하나

}

</style>

 

그럼 clear 속성을 반영하지 않았을 때 어떻게 되는지 알아 볼까요? 소스를 반영하고 제일 마지막 div 가 줄 바꿈이 되면서 바로 아래에 표시 될 거라고 예상할 겁니다. 그런데 위에 float 가 반영된 div 의 높이를 인식하지 못해서 겹쳐졌습니다. 

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

 

스타일 시트 CSS clear 속성, float 기능을 제거하는 방법

 

샘플에서 두 개의 div 사이에 clear 속성이 반영된 태그를 넣었습니다. 태그는 다음과 같습니다. <div id="clear1"></div> 를 넣으니까 마지막 박스는 바로 위에 있는 태그와 구분해서 정확하게 아래에 표시가 됩니다. 높이를 인식한 것입니다. 

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

스타일 시트 CSS clear 속성, float 기능을 제거하는 방법

 

HTML 태그에 <div id="clear1"></div> 제거해서 좀 더 깔끔하게 만들려면 after 속성을 이용해야 합니다. after content 에 값을 넣고 태그 내부에 있는 텍스트 끝에 첨부할 수 있는 기능을 가지고 있습니다. 이런 가상 선택자 after 를 이용해서 마지막에 clear 속성을 추가하는 것입니다. 결과는 위와 동일합니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#con:after {
		content: "";
		display: block;
		clear: both;
	}
	#con #float1 {
		float:left; 
		width: 150px; height: 100px; 
		background-color: #F9F249;
		padding: 10px;
	}
	#con #float2 {
		float:left; 
		width: 150px; height: 50px; 
		background-color: #69F354;
		padding: 10px;
	}
	#last {
		width: 200px; height: 120px; 
		background-color: #36FFFF;
		padding: 10px;
	}
</style>
</head>
<body>
	<div id="con">
		<div id="float1">clear example 1</div>
		<div id="float2">clear example 2</div>
	</div>
	<div id="last">clear example 3</div>
</body>
</html>


Posted by 녹두장군