반응형
CSS 중에서 box-sizing 은 요소의 너비와 높이를 계산하는 속성이다.
box-sizing을 이용해서
box-sizing 안에는 두가지 속성이 있는데 쉽게말해서
content-box : 내가 정한 width와 height 가 content의 고정값이된다
content가 고정이기 때문에 값(패딩,보더)을 추가하면 박스사이즈가 더 커진다.
너비 = 콘텐츠 너비, 높이 = 컨텐츠 높이
border-box : 내가 정한 width와 height 값이 최종 박스 사이즈값이된다
content가 유동적으로 변해서 값을 추가해도 최종 박스 사이즈는 변하지않는다.
너비 = 테두리 +안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 +안쪽 여백 + 콘텐츠 높이
MDN사이트를 기반으로 정리했습니다.
https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
</style>
</head>
<body>
<h2> box-sizing </h2>
<div class="content-box">content-box</div>
<br>
<div class="border-box">border-box</div>
</body>
</html>
처음에 지정한 width와 height은 변하지않는다
width와 height을 변경시켜 최종 박스 값이 처음에 지정한 width와 height이 된다.
틀린부분이 있다면 댓글 환영입니다 ^*^
반응형