개발자 도구를 열어보면 이렇게 margin , border , padding , content의 각각의 영역을
확인 할 수 있다. box-sizing 속성은 2가지가 있는데 content-box , border-box 두 가지가 있으며 이 중 default값은 cotent-box 이다.
- content-box는 기본 content만 지정하는 것을 말하고, border-box는 박스 사이즈를 결정할 때 border , padding, content 3가지를 합쳐서 포함하는 것을 말한다.
아래의 코드 예시와 결과 값을 비교해보자.
<style>
.b1 {
width: 300px;
height: 150px;
padding: 30px;
border: 10px solid red;
box-sizing: border-box;
}
.b2 {
width: 300px;
height: 150px;
padding: 30px;
border: 10px solid red;
box-sizing: cotent-box;
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b2"></div>
</body>
</html>
※ 실행결과 및 box-sizing 주의 할 점 및 용도
같은 크기의 너비와 높이로 코드를 작성했지만 content-box는 그 너비와
높이에 border , padding, content 영역을 포함하지 않아 본인이 생각했던 크기보다 더 크게 나올 가능성이 크다. 거기에 default 값이 content-box이기 때문에
여러사람과 협업을 할 때 혼돈이 오지 않게 기준을 같이 맞추고하면 작업을 원활
하기 편한데, 디자이너와 협업을 용이하게 하기 위해서는 box-sizing을 초기화 시키는 것이 중요한데 보통은 border-box 속성값으로 초기화를 시키는 경우가 많다.
'공부노트 > CSS3' 카테고리의 다른 글
| [CSS] 선택자(selecter) (0) | 2021.09.01 |
|---|---|
| [CSS] Position (0) | 2021.08.29 |
| [CSS] font (0) | 2021.08.23 |