[CSS] 플로트 (float, clear, overflow)
2021. 6. 27. 23:48
728x90
01 float
- HTML요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어줌.
- layout 작성할 때 자주 사용.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>float</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<style>
img{
float: left;
margin: 10px;
}
</style>
<body>
<img src="/images/cat_cute.jpg" alt="cat" width="245" height="185">
<p>대통령으로 선거될 수 있는 자는 국회의원의 피선거권이 있고 선거일 현재
40세에 달하여야 한다. 탄핵소추의 의결을 받은 자는 탄핵심판이 있을
때까지 그 권한행사가 정지된다. 국회의원은 현행범인인 경우를 제외하고는
회기중 국회의 동의없이 체포 또는 구금되지 아니한다.
의무교육은 무상으로 한다. 정부는 회계연도마다 예산안을 편성하여
회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시
30일전까지 이를 의결하여야 한다. 재산권의 행사는 공공복리에 적합하도록
하여야 한다. 근로조건의 기준은 인간의 존엄성을 보장하도록 법률로 정한다.
법률안에 이의가 있을 때에는 대통령은 제1항의 기간내에 이의서를 붙여
국회로 환부하고, 그 재의를 요구할 수 있다.
국회의 폐회중에도 또한 같다.
국가는 건전한 소비행위를 계도하고 생산품의 품질향상을 촉구하기 위한
소비자보호운동을 법률이 정하는 바에 의하여 보장한다.</p>
</body>
</html>
02 float 해체 방법 "clear" 속성
- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절.
Problem
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>float</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<style>
.box{
width: 200px;
height: 200px;
font-size: 24px;
border: 1px solid black;
margin-top: 10px;
padding-top: 80px;
text-align: center;
box-sizing: border-box;
}
.left{
background-color: chocolate;
float: left;
}
.right{
background-color: cornflowerblue;
float: right;
}
.container{
border: 1px solid red;
text-align: center;
display: inline-block;
}
</style>
<body>
<div class="container">
<div class="box left">1</div>
<div class="box left">2</div>
<div class="box right">3</div>
<div class="box left">4</div>
<div class="box">5</div>
</div>
</body>
</html>
Solution
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>float</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<style>
.box{
width: 200px;
height: 200px;
font-size: 24px;
border: 1px solid black;
margin-top: 10px;
padding-top: 80px;
text-align: center;
box-sizing: border-box;
}
.left{
background-color: chocolate;
float: left;
}
.right{
background-color: cornflowerblue;
float: right;
}
.container{
border: 1px solid red;
text-align: center;
display: inline-block;
}
.clear{
clear: both;
}
</style>
<body>
<div class="container">
<div class="box left">1</div>
<div class="box left">2</div>
<div class="box right">3</div>
<div class="box left">4</div>
<div class="box clear">5</div>
</div>
</body>
</html>
03 overflow
- float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면 밖으로 빠져나옴.
overflow: auto;
Problem
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>float</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<style>
div{
border: 1px solid red;
padding: 10px;
}
img{
float: left;
}
</style>
<body>
<div>
<img src="/images/cat_cute.jpg" alt="cat" width="245" height="185">
대통령은 법률이 정하는 바에 의하여 훈장 기타의 영전을 수여한다.
</div>
</body>
</html>
Solution
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>float</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<style>
div{
border: 1px solid red;
padding: 10px;
overflow: auto;
}
img{
float: left;
}
</style>
<body>
<div>
<img src="/images/cat_cute.jpg" alt="cat" width="245" height="185">
대통령은 법률이 정하는 바에 의하여 훈장 기타의 영전을 수여한다.
</div>
</body>
</html>728x90
'CSS > Study' 카테고리의 다른 글
| CSS3 그리드 (row-gap, column-gap, gap, grid-template-areas) (0) | 2021.06.27 |
|---|---|
| CSS3 그리드 (grid, grid-template-columns, grid-template-rows, repeat, minmax, auto-fill, auto-fit) (0) | 2021.06.27 |
| CSS3 포지션 (position, static, relative, absolute, fixed, z-index) (0) | 2021.06.27 |
| CSS3 디스플레이 (display, block, inline, inline-block) (0) | 2021.06.27 |
| CSS3 테두리 (border-style, border-radius) (0) | 2021.06.27 |
