css - 기본5 (float, box-sizing)
css - 기본4 (float, box-sizing)
1.float
1. float 말그대로 떠있다는 뜻이다
2. float를 적용하면 그림처럼 위에 떠있다.
3. position을 지정하면 가라앉는다.
예를 들어보자
test3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="test3.css"/>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
</body>
</html>
test3.css
div{
width: 100px;
height: 100px;
border: 1px solid gray;
font-size: 0.7em;
}
.blue{
background-color: blue;
}
.red{
float: left;
background-color: red;
}
.green{
background-color: green;
position: relative;
margin-left:50px;
}
Output
2.box-sizing
margin,padding 등 공백 값을 주더라고 그 사이즈를 유지할 수 있는 조건값이다
단, 일정 크기를 넘어서면 사이즈가 변한다.
예를들어보자
test2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="test2.css"/>
<div class="box-content">
boxcontent<br>(100px보다커짐)
</div>
<div class="box-border">
box-border<br>(100px유지)
</div>
</body>
</html>
test2.css
div{
width:100px;
height:100px;
border : 1px solid red;
padding:10px;
font-size:0.8em;
}
.box-content{
1box-sizing:content-box; //주석
}
.box-border{
box-sizing:border-box;
}
Output
div의 padding을 조절하면
box-content 크기 변함
box-border 크기 그대로
'BoostCourse > HTML／CSS' 카테고리의 다른 글
| CSS - 기본6 (간단한 메인화면 만들기) (0) | 2019.11.14 |
|---|---|
| CSS - 기본4 (레이아웃, Margin, Border, Padding) (0) | 2019.11.13 |
| CSS - 기본3 (레이아웃 종류, 블록 엘리먼트) (0) | 2019.11.13 |
| CSS - 기본2 (font) (0) | 2019.11.13 |
| CSS - 기본1 (css 구조, 우선순위, 상속) (0) | 2019.11.13 |