[CSS] Box Sizing

안녕하세요 동기 여러분! 오늘은 박스 사이징 프로퍼티에 대해 알아봅시다.

 

Box Sizing

아래의 코드를 보도록 합시다.

<!-- HTML -->
<div id='big'>우르르 쾅쾅</div>
<div id='small'>우르르 쾅쾅</div>

* {
  margin: 10px;
}

#big {
  border: 15pt solid tomato;
}

#small {
  border: 5pt solid tomato;
}

여기까지는 문제가 없는데 여기서 전체 요소나 div에 width를 설정하면 뭔가 특이한 일이 일어납니다.

 

* {
  margin: 10px;
  width: 200px;  /* <- width를 200px로 설정했습니다. */
}

#big {
  border: 15pt solid tomato;
}

#small {
  border: 5pt solid tomato;
}

width를 200px로 설정하고 난 다음의 실행화면입니다.

 

 

똑같은 width를 설정했는데 둘이 크기가 다릅니다...?

 

---

 

크기가 다른 이유

초기의 HTML은 border(경계)가 빠져 있는 content 영역(이 부분은 padding이 설정되어 있다면 포함됩니다)이 width의 값을 반영 받아 크기가 바뀌었습니다. 자세히 보면 content 영역은 width가 같음을 알 수 있음.

경계 안쪽 파란색 네모 부분이 content 영역

 

---

 

해결 방안

이렇게 요소의 크기가 달라지는 문제점을 바로잡기 위해 CSS에서는 기준점을 두 가지 만들어 두었습니다.

* {
  box-sizing: content-box;

  box-sizing: border-box;
}

바로 content-box와 border-box입니다. 보통 box-sizing 프로퍼티는 * 안에서 선언을 해줍니다 -> 모든 요소에 적용하기 위해

 

값	설명	생김새
content-box	content 영역을 기준으로 박스의 크기가 변함
border-box	border 영역을 기준으로 박스의 크기가 변함

 

---

 

오늘의 느낌

아 오늘은 영어로 공부한게 이해가 너무 안돼서 답답해하고 있다가 생활 코딩님의 유튜브 영상 한편 보고 바로 이해했습니다. 감사합니다.