CSS float, clear Properties
CSS 속성 중에서 float, clear 속성 테스트
float:left, clear:left, overflow:hidden
다음과 같이 3개의 div 태그가 있고 float 속성이 사용되지 않은 상태이다
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:100px; background-color:green;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:100px; background-color:blue;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
</body>
</html>
위의 설정은 아래와 같은 상태로 보여진다
========================================================================================================
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red;float:left ;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:100px; background-color:green;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:100px; background-color:blue;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
</body>
</html>
위의 결과화면은 다음과 같다. GREEN 요소와 BLUE 요소가 겹쳐져 나타난다
========================================================================================================
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red; float:left;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:100px; background-color:green; float:left;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:100px; background-color:blue;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
</body>
</html>
위의 결과는 아래의 그림과 같은데 float:left 를 적용하지 않은 BLUE 요소가 비정상적인 상태로 나타난다.
========================================================================================================
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red; float:left;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:100px; background-color:green; float:left;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:100px; background-color:blue; float:left;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
</body>
</html>
3개의 요소에 모두 float:left 를 적용하여 횡적 구도로 나타난다
========================================================================================================
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red; float:left;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:100px; background-color:green; float:left;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:100px; background-color:blue; clear:left;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
</body>
</html>
마지막에 추가된 BLUE 요소에는 clear:left 를 적용하여 앞의 요소에서 적용한 왼쪽 흐름(flow)를 해제한 경우이다
========================================================================================================
아래의 레이아웃은 화면의 폭이 충분히 넓은 경우에는 횡으로 배열되어 나타나지만 화면이나 부모 컨테이너가 좁아지면 횡으로 배열된 요소들이 자동으로 아래로 내려오면서 횡적인 구도가 무너지게 된다
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red; float:left;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:100px; background-color:green; float:left;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:100px; background-color:blue; float:left;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
아래의 레이아웃은 화면이 좁아지면 횡방향의 구도가 흐트러져서 요소들이 아래로 내려간다<p>
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
</body>
</html>
아래의 그림은 위의 레이아웃이 적용된 화면을 좁게 설정하여 횡적인 구도가 무너지는 현상을 보여준다
========================================================================================================
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red; float:left;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:100px; background-color:green; float:left;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:100px; background-color:blue; float:left;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
아래의 요소들을 한 컨테이너 안에 포함시키고 컨테이너의 폭을 지정해주면 화면이 좁아져도 요소들이 아래로 내려오는 현상을 예방할 수 있다<p>
<div style="width:306px;">
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
</div>
</body>
</html>
아래의 그림은 위의 레이아웃이 적용된 화면을 일부러 좁게 했을 때에도 파랑색 요소가 아래로 내려오지 않는 것을 보여준다
========================================================================================================
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red; float:left;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:30px; background-color:green; float:left;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:30px; background-color:blue; float:left;
border:1px solid black; font-size:24px;
}
#div4
{
width:100px; height:30px; background-color:yellow; float:left;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
컨테이너의 폭이 좁아서 내부 요소들이 횡으로 배치될 수 없는 경우에는 아래로 내려오면서 가장 높이 올라갈 수 있는 요소 아래에 자리를 잡는다<p>
<div style="width:306px;">
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
<div id="div4">YELLOW</div>
</div>
</body>
</html>
========================================================================================================
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red; float:left;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:50px; background-color:green; float:left;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:30px; background-color:blue; float:left;
border:1px solid black; font-size:24px;
}
#div4
{
width:100px; height:100px; background-color:yellow; float:left;
border:1px solid black; font-size:24px;
}
#div5
{
width:100px; height:100px; background-color:black; float:left;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
아래처럼 부모 컨테이너 안에 자식 요소들이 위치하는 구조이지만 실제 화면에서는 부모 영역 밖에 위치한 상태로 보여지는 경우가 있다<br>
<p>
<div style="width:350px; background-color:lightblue;">
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
<div id="div4">YELLOW</div>
<div id="div5">BLACK</div>
</div>
</body>
</html>
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red; float:left;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:50px; background-color:green; float:left;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:30px; background-color:blue; float:left;
border:1px solid black; font-size:24px;
}
#div4
{
width:100px; height:100px; background-color:yellow; float:left;
border:1px solid black; font-size:24px;
}
#div5
{
width:100px; height:100px; background-color:black; float:left;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
아래처럼 부모 컨테이너 안에 자식 요소들이 위치하는 구조이지만 실제 화면에서는 부모영역 밖에 위치한 상태로 보여지는 경우가 있다<br>
이문제를 해결하는 간단한 방법은 아래와 같다.
<p>
<div style="width:350px; background-color:lightblue;">
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
<div id="div4">YELLOW</div>
<div id="div5">BLACK</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red; float:left;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:50px; background-color:green; float:left;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:30px; background-color:blue; float:left;
border:1px solid black; font-size:24px;
}
#div4
{
width:100px; height:100px; background-color:yellow; float:left;
border:1px solid black; font-size:24px;
}
#div5
{
width:100px; height:100px; background-color:black; float:left;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
아래의 레이아웃에서 보이는 문제점은 'YELLOW' 요소의 높이가 다른 요소들 보다 더 크기때문에 뒤따라 추가되는 요소는 위의 요소들과 간격이 벌어지게 되고 그리 좋아보이지 않는다
<p>
<div style="width:350px; background-color:lightblue;">
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
<div id="div4">YELLOW</div>
<div id="div5">BLACK</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<htm>
<head>
<meta charset="utf-8" />
<title>CSS float, clear Properties Test</title>
<style type="text/css">
#div1
{
width:100px; height:100px; background-color:red; float:left;
border:1px solid black; font-size:24px;
}
#div2
{
width:100px; height:50px; background-color:green; float:left;
border:1px solid black; font-size:24px;
}
#div3
{
width:100px; height:30px; background-color:blue; float:left;
border:1px solid black; font-size:24px;
}
#div4
{
width:100px; height:100px; background-color:yellow; float:left;
border:1px solid black; font-size:24px;
}
#div5
{
width:100px; height:100px; background-color:black; float:left;
border:1px solid black; font-size:24px;
}
</style>
</head>
<body>
아래의 레이아웃에서 보이는 문제점은 'YELLOW' 요소의 높이가 다른 요소들 보다 더 크기때문에 뒤따라 추가되는 요소는 위의 요소들과 간격이 벌어지게 되고 그리 좋아보이지 않는다
이 문제를 해결하는 방법은 다음과 같이 해결할 수 있다
<p>
<div style="width:350px; background-color:lightblue;">
<div style="height:104px; overflow: hidden;"
<div id="div1">RED</div>
<div id="div2">GREEN</div>
<div id="div3">BLUE</div>
<div id="div4">YELLOW</div>
</div>
<div id="div5">BLACK</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
