[CSS][box-sizing 알아보기]

TLDR : content-box면 content 영역 크기는 변하지 않는다.

boreder-box면 content 영역 크기가 변한다.

 

box-sizing : content-box는 모든 요소에 대해 디폴트 선언이다.

이 설정의 문제점은 content 영역 크기의 계산은 쉽지만 박스모델 전체 크기(dimension)가 예상이 어렵다는 것이다.

 

border box : .box 클래스 요소의 크기(dimension)는?

<style>
  * {
    box-sizing: content-box;
  }
  section {
    width: 400px;
    height: 400px;
  }
  .box {
    width: 50%;
    height: 75%;
    border: 10px solid;
  }
</style>
<section>
  <div class="box"></div>
</section>

드래그 : 220px * 320px

<style>
  * {
    box-sizing: content-box;
  }
  section {
    width: 500px;
    padding: 10px;
  }
  .box {
    width: 100%;
    border: 1px solid;
  }
</style>
<section>
  <div class="box"></div>
</section>

드래그 : 502px * 2px

크기가 없는 컨텐츠에 마진과 보더만 붙어서 보이는 현상은 보통 원하지 않을 것이다.

 

새로운 디폴트 : border-box

*,
*::before,
*::after {
  box-sizing: border-box;
}

border-box를 사용하면 전체 차원은 선언된 컨텐츠의 크기에 의해 결정된다.

<style>
  * {
    box-sizing: border-box;
  }
  main {
    width: 900px;
    height: 500px;
    border: 10px solid;
  }
  section {
    width: 50%;
    height: 100%;
    padding: 20px;
    border-bottom: 40px solid;
  }
  .box {
    width: 100%;
    height: 50%;
  }
</style>
<main>
  <section>
    <div class="box"></div>
  </section>
</main>

드래그 : 400px * 200px

%는 부모 컨텐츠 영역 크기에 의해 결정된다.

border-box에선 컨텐츠 영역이 마진,보더에 의해 변경된다.

하지만 전체 차원은 수치적으로 선언된 값을 유지한다. (width:900px, height:500px)

 

참고  : 

CSS for JavaScript Developers | An online course that teaches the fundamentals of CSS for React/Vue devs (css-for-js.dev)

CSS for JavaScript Developers | An online course that teaches the fundamentals of CSS for React/Vue devs