요소의 크기를 화면에 표시하는 방식을 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Box sizing 요소의 크기를 화면에 표시하는 방식 */
div{
/* 너비 */
width: 500px;
/* 경계선 */
border: 20px solid gray;
/* 안쪽 여백 */
padding: 20px;
}
/* /* (1) content-box : 기본값
- 내가 설정한 너비 = content의 너비
ex) "너비 500px로 해줘" => content 500px
- padding, border값을 전혀 신경쓰지 않는다.
값이 들어가면 들어간만큼 크기가 커진다 *
(2) border box
- 내가 설정한 너비 = border 안쪽까지의 너비
- content + padding + border = 내가 설정한 너비
- padding, border 값이 들어가더라도 크기가 커지지 않는다.
만약에 내가 padding, border 값을 주더라도
전체 도형의 크기가 영향을 받지 않았으면 좋겠다.
=> box-sizing: border-box;
/ */
.bb{
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="cb">
<p>content-box</p>
</div>
<div class="bb">
<p>border-box</p>
</div>
</body>
</html>
정리
border-box는 border + padding + content
content-box는 오직 content의 크기만을 정의한다.
'Front-End > CSS' 카테고리의 다른 글
| [CSS] Ex14_background.html (0) | 2023.06.12 |
|---|---|
| [CSS] Ex13_borderRadius.html (0) | 2023.06.12 |
| [CSS] Ex11_padding.html (0) | 2023.06.12 |
| [CSS] Ex10_margin.html (0) | 2023.06.12 |
| [CSS] Ex09_none.html (0) | 2023.06.11 |
