float 속성이란?
float는 레이아웃을 구성할 때 사용하는 속성 중 하나입니다. float는 해당 엘리먼트를 좌우 방향으로 띄워서 배치합니다. float 속성을 사용하면 해당 엘리먼트가 띄워지는 방향으로 다른 엘리먼트가 끼워질 수 있습니다. 또한, float 속성을 사용하면 해당 엘리먼트의 크기가 부모 엘리먼트와 상관 없이 내부 콘텐츠의 크기에 맞게 설정됩니다.
clear 속성이란?
clear는 float 속성을 사용한 엘리먼트의 영향을 제거하는 속성입니다. clear 속성을 사용하면 float 속성이 적용된 엘리먼트의 하단에 위치하는 엘리먼트가 float 속성이 적용된 엘리먼트의 영향을 받지 않고, 해당 엘리먼트 아래에 위치하게 됩니다.
float와 clear 속성을 사용한 레이아웃
float 속성을 사용하면 엘리먼트를 띄워서 배치할 수 있고, clear 속성을 사용하면 float 속성이 적용된 엘리먼트의 영향을 제거할 수 있습니다. 이 두 속성을 적절히 활용하여 다양한 레이아웃을 구성할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>float와 clear 속성 예제</title>
<style>
.container {
width: 600px;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
}
.box-1 {
float: left;
width: 200px;
height: 200px;
background-color: #ffcccc;
margin-right: 10px;
}
.box-2 {
float: right;
width: 200px;
height: 200px;
background-color: #ccffcc;
margin-left: 10px;
}
.box-3 {
clear: both;
width: 580px;
height: 200px;
background-color: #ccccff;
margin: 0 auto;
margin-top: 20px;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3">
<h2>float와 clear 속성 예제</h2>
<p>이 예제는 float와 clear 속성을 모두 사용하는 예제입니다. box-1과 box-2 클래스는 각각 float: left와 float: right 속성을 적용하여 좌측과 우측에 띄워집니다. box-3 클래스는 margin: 0 auto 속성을 이용하여 가운데 정렬되며, clear: both 속성을 적용하여 float 속성이 적용된 엘리먼트의 영향을 받지 않습니다.</p>
</div>
</div>
</body>
</html>위 예제는 float, clear가 모두 사용된 예제입니다. 동작 결과를 보면 글이 포함된 box-3이 양 옆 박스의 영향을 받지 않는 걸 볼 수 있습니다.
float와 clear 속성 예제
이 예제는 float와 clear 속성을 모두 사용하는 예제입니다. box-1과 box-2 클래스는 각각 float: left와 float: right 속성을 적용하여 좌측과 우측에 띄워집니다. box-3 클래스는 margin: 0 auto 속성을 이용하여 가운데 정렬되며, clear: both 속성을 적용하여 float 속성이 적용된 엘리먼트의 영향을 받지 않습니다.
이와 같은 float 속성을 사용한 레이아웃 방식을 구성할 때는 주의할 점이 있습니다. float 속성을 적용한 엘리먼트가 부모 엘리먼트를 벗어나면, 부모 엘리먼트의 높이가 제대로 설정되지 않을 수 있습니다. 이를 방지하기 위해서는 아래와 같이 자식 클래스에 clear: both 속성을 적용하여 float 속성이 적용된 엘리먼트의 영향을 받지 않도록 설정하였습니다.
<!DOCTYPE html>
<html>
<head>
<title>float 속성과 clear 속성 예제</title>
<style>
.container {
width: 600px;
margin: 0 auto;
border: 1px solid #000;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
float: left;
width: 200px;
height: 300px;
background-color: #ffcccc;
margin-right: 10px;
}
.box-2 {
float: left;
width: 200px;
height: 200px;
background-color: #ccffcc;
margin-right: 10px;
}
.box-3 {
clear: both;
width: 580px;
height: 200px;
background-color: #ccccff;
margin: 0 auto;
margin-top: 20px;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3">
<h2>float 속성과 clear 속성 예제</h2>
<p>이 예제는 float 속성을 적용한 엘리먼트가 부모 엘리먼트를 벗어날 때 발생할 수 있는 문제를 보여주기 위한 예제입니다. box-1과 box-2 클래스는 float: left 속성을 적용하여 좌측으로 띄워지며, box-3 클래스는 clear: both 속성을 적용하여 float 속성이 적용된 엘리먼트의 영향을 받지 않습니다.</p>
</div>
</div>
</body>
</html>float 속성을 사용하면 엘리먼트의 크기가 내부 콘텐츠의 크기에 맞게 설정되므로, 엘리먼트의 높이가 정확히 설정되지 않을 수 있습니다. 이를 방지하기 위해서는 내부 콘텐츠의 크기를 미리 설정해놓거나, overflow: hidden 속성을 적용하여 내부 콘텐츠를 감출 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>float와 overflow 예제</title>
<style>
.container {
border: 1px solid black;
overflow: hidden;
width: 200px;
}
.box {
float: left;
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">첫 번째 박스</div>
<div class="box">두 번째 박스</div>
<div class="box">세 번째 박스</div>
</div>
</body>
</html>위 코드는 float와 overflow 속성을 함께 사용한 예제입니다. float 속성을 사용하여 .box 엘리먼트를 왼쪽으로 위치시킵니다. .container 엘리먼트에 overflow: hidden 속성을 적용하여 내부 콘텐츠를 감춥니다. 이렇게 함으로써 .container 엘리먼트의 높이가 제대로 설정되고, .box 엘리먼트도 내부 콘텐츠의 크기에 맞게 설정됩니다.
'[R&D] 프로그래밍 > Web (HTML, CSS)' 카테고리의 다른 글
| [HTML/CSS] 박스 모델의 개념과 활용 방법 (0) | 2023.03.06 |
|---|---|
| [HTML/CSS] font 속성을 사용한 텍스트 디자인 방법 (0) | 2023.03.05 |
| [HTML/CSS] 애니메이션과 트랜지션을 활용한 웹페이지 효과 구현 방법 (0) | 2023.03.04 |
| [HTML/CSS] audio 태그를 사용한 음악 삽입과 디자인 방법 (0) | 2023.03.03 |
| [HTML/CSS] video 태그를 사용한 동영상 삽입과 디자인 방법 (0) | 2023.03.02 |
| [HTML/CSS] table 태그를 활용한 표 만들기 방법 (0) | 2023.03.01 |
| [HTML/CSS] Form 요소들과 디자인 방법 (0) | 2023.02.28 |
| [HTML/CSS] CSS Grid를 사용한 웹페이지 레이아웃 설계 (0) | 2023.02.27 |
댓글