옛날에 인강 들을때 "전체 화면에 무조건 box-sizing 을 border-box 로 무조건 줘라" 라고 주입식으로 배웠었다.
이제 그 이유를 열어볼 시간이다.
box-sizing이란
박스의 크기를 화면에 표시하는 방식을 나타낸다.
box-sizing의 옵션은 아래와 같이 4개가 있는데 이 중에서도 유독 border-box 를 압도적으로 많이 사용한다
- content-box : 콘텐트 영역을 기준으로 크기 결정
- border-box : 테두리를 기준으로 크기를 결정
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속
border-box를 사용하면
HTML
<div class="first">
첫 번째 박스, 가로 300px
</div>
<div class="second">
두 번째 박스, 나도 가로 300px
</div>CSS
* {
box-sizing: border-box;
}
.first {
width: 300px;
margin-bottom: 20px;
}
.second {
width: 300px;
margin-bottom: 20px;
padding: 50px;
border-width: 10px;
}결과
위와 같이 둘 다 가로 300px로 동일한 사이즈인 것이 확인 된다.
border-box를 사용하지 않으면
CSS
.first {
width: 300px;
margin-bottom: 20px;
}
.second {
width: 300px;
margin-bottom: 20px;
padding: 50px;
border-width: 10px;
}동일 조건에서 box-sizing 만 없애 보았다.
결과
오로리...
분명 둘다 가로 300px로 지정했는데 사이즈가 다르게 보인다..!
왜 이런 건가요?
첫 번째 박스는 가로 300px외에 padding, border 등을 지정해주지 않아 순수히 contents 영역인 300px만 칠해져 화면에 나타난다.
허나, 두 번째 박스는 contents 영역이 300px, padding 이 사방으로 50px, border 역시 사방으로 10px씩 칠해져 있어, 300 + 50 + 50 + 10 + 10 = 420px이 칠해져 화면에 나타난다.
즉, 우리가 지정하는 width, height 값은 contents 영역에 대한 값인 것이다..!
💡참고) contents 영역은 개발자도구에서 보이는 "파란색 부분"을칭한다!
border-box를 사용해야 하는 이유
위의 상황과 다르게 border-box를 사용하는 경우, 우리가 지정하는 width, height 값은 border 내부 영역에 대한 값으로 지정된다!
border-box 를 사용함으로써, 보이는대로 태그의 width 값을 주고 그 안쪽으로 padding 값을 주면 보다 간단하게 사이즈 체크가 가능하기에 border-box 사용이 강조되는 것이다.
참고자료
