✅ Box-sizing

• 이전에 공부했던 box model에 의하면 요소의 전체너비는 width를 포함한 양쪽 여백(margin, padding), border가 모두 더해진 값으로 계산된다
• 아래 예시는 width는 같지만, padding값의 유무로 크기가 다르게 보인다

.div1{
	width: 200px;
    height: 100px;
    border: 1px solid red;
}

.div2{
	width: 200px;
    height: 100px;
    border: 1px solid green;
    padding: 20px;
}

• 디자인을 할때는 대략적인 크기만 작성했는데 실제 코딩으로 옮기게 되면 굉장히 귀찮아진다 😂
• box-sizing은 요소 전체 너비와 높이에 padding과 border를 포함시켜, 이런 귀찮은 계산을 덜어주는 무지 편리한 속성이다 💁🏻‍♀️

.div1{
	width: 200px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;
}

.div2{
	width: 200px;
    height: 100px;
    border: 1px solid green;
    padding: 20px;
    box-sizing: border-box;
}

• box-sizing은 대부분의 웹페이지에서 기본적으로 적용하고 있으므로, 전체선택자(*)를 통해 적용하는 것을 권장한다 !

*{
	box-sizing: border-box;
}