[CSS] border-box와 content-box

 

Box sizing에 대해 알아보겠습니다.

 

 

Box sizing에는 콘텐츠 중심으로 스타일을 적용하는 content-box와 크기를 중심으로 스타일을 적용하는 border-box가 있습니다.

 

content-box의 대장은 '콘텐츠(content)' 입니다. 박스안에 들어가는 콘텐츠의 영역을 침범해서는 안됩니다. 그렇기 때문에 들어가는 박스는 고정되고 패딩과 테두리가 밖으로 생기게 됩니다.

border-box의 대장은 '테두리(border)'입니다. 박스의 가장 겉부분인 테두리가 고정되어 있어야 하기 때문에, 패딩과 테두리의 두께가 안으로 생긴다고 생각하시면 편할 것 같습니다!

 

실제로는 border-box가 더 흔하게 쓰인다고 합니다.

 

 

---

예시를 보겠습니다.

 

 

높이와 너비가 같은 노란색의 box 2개가 있습니다.

하나는 Content-box로, 하나는 Border-box를 적용시켜 Padding과 border과 어떻게 다르게 적용되는지 확인해보도록 하겠습니다.

 

 

 

 

 

 

 

 

 

 

 

 

1. padding

 

padding: 20px; 을 적용시킨 모습입니다. 

Content-box는 밖으로 padding이 적용되고, 

borderbox는 보이지 않지만 크기가 동일하므로 안으로 padding이 적용된 모습입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

2. border

 

border: 8px solid red; 를 적용한 모습입니다.

Content-box는 padding과 마찬가지로 border가 밖으로 적용되고,

border-box는 보이지 않지만 안으로 border가 적용된 모습입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

위의 예제는 MDN사이트를 참고하였습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

box-sizing - CSS: Cascading Style Sheets | MDN

 

 

제가 만든 Codepen에서    

 padding: 20px;
 border: 8px solid red;

코드를 넣었다 빼면서 연습해보시면 도움이 되실거에요~! 

 

See the Pen box-sizing exercise- MDN by youngddongee (@youngddongee) on CodePen.

 

 

감사합니다.