본문 바로가기

CSS

[CSS] box model과 box-sizing



안녕하세요. 

이번 포스팅은 css의 Box model 개념에 대해서 알아 보도록 하겠습니다. 


HTML의 모든 요소(element)들은 사각형의 박스 형태로 표시되는데 이 박스는 margin, padding, border, content로 구성 되며 이것들이 합쳐져 너비(width), 높이(height)를 결정한다. 즉, 박스의 크기를 결정하고 박스 모델을 만들게 됩니다.





위에 보이는 것과 같이 구성 됩니다.

그럼 박스를 구성하는 구성요소에 대해서 하나씩 알아보죠.


content

content는 말 그대로 실제 내용을 포함하는 영역입니다. 그리고 content는 width, height, min-width, max-width, min-height, max-height 를 가지고 크기를 지정하고 제어 할 수 있습니다.


padding


padding은 border와 content사이에 존재하는 여백을 의미합니다. 즉, 박스의 안쪽 여백을 말하는 것입니다.

만약 content가 배경 이미지나 컬러를 가지고 있다면 이 배경은 padding까지 연장 되어 영향을 미치게 됩니다.

padding은 padding, padding-top, padding-bottom, padding-left, padding-right  property를 가지고 제어를 할 수 있습니다.


border


border는 테두리입니다. margin 과 padding를 영역을 나누는 영역이죠. border는 border의 너비를 지정하는 border-width property나 border property를 사용해 너비를 지정 할 수 있습니다.


margin


margin은 박스의 바깥쪽 여백을 의미합니다. 즉, 엘리먼트들의 간격을 의미하죠. marginmargin-top, margin-bottom, margin-left, margin-right, margin property를 사용하여 지정 할 수 있습니다.


여기서 주의 할 점이 있습니다.

margin, border, padding은 width, height property에 지정 된 크기에 포함 되지 않은 크기입니다. 즉 별도로 각자의 크기를 가지게 되고 이 모두가 합쳐져 박스의 크기를 결정 짓게 됩니다. 예시를 하나 보겠습니다.



<html>
<head>
<style>
div {
width: 100px;
padding: 10px;
border: solid 10px red;
margin: 20px;
}
</style>
</head>
<body>
<div>안녕하세요</div>
</body>
</html>




이렇게 div 이용하여 박스 하나를 만들었습니다. 저 박스의 영역은 content 100px + padding 20px + margin 20px + border 20px 로 구성 되어 총 160px의 너비를 가지게 됩니다.


여기서 알아야 할 점이 한 가지 또 있습니다. widthheight에 content 영역만 포함 되는 이유는 box-sizing 이라는 property가 있는데 이 property에 값을 지정 안해주게 되면 default로 content-box라는 값이 설정 되게 됩니다.


그럼 box-sizing이라는 property가 뭐하는 아이인지 궁금 하실텐데 바로 알아 보도록 하겠습니다.



box-sizing


box-sizing property는 width, height를 어느 영역까지 포함 할 것인가를 결정하는 property입니다. 앞서 말씀 드린거처럼 이 box-sizing의 기본값이 content-box이기 때문에 width, height에 값을 지정 했을때 그 값이 곧 content영역의 너비와 높이가 된 것이죠. 그럼 어떠한 값들이 있는지 알아보죠. 


content-box


width, height, min/max property 가 오로지 content만 포함하고 padding, margin, border는 포함하지 않습니다.


border-box


width, height, min/max property 값이 content, padding, border의 크기도 포함 된 값입니다. margin은 여전히 포함 되지 않습니다.


inherit


부모 엘리먼트의 값을 상속 받습니다.


그럼 예시로 한 번 보겠습니다.



<html>
<head>
<style>
body {
box-sizing: border-box;
}
.box1 {
box-sizing: content-box;
}
.box2 {
box-sizing: border-box;
}
.box3 {
box-sizing: inherit;
}
div {
width: 100px;
padding: 10px;
border: solid 10px red;
margin: 20px;
}
</style>
</head>
<body>
<div class="box1">안녕하세요</div>
<div class="box2">box-sizing test</div>
<div class="box3">box-sizing test2</div>
</body>
</html>



보시는 것과 같이 세 엘리먼트에 동일 width 값을 주었지만 크기가 다릅니다. 이게 바로 content-boxborder-box의 차이죠. 그리고 box3을 보면 inherit은 부모 엘리먼트인 body에게 값을 상속 받음을 알 수 있습니다.


개인적으로 모든 엘리먼트를 border-box로 지정 하고 작업을 하면 훨씬 더 작업이 편하다는 느낌이 드는거 같습니다.


이상 포스팅을 마치겠습니다.





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

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

'CSS' 카테고리의 다른 글

[CSS] position  (0) 2018.08.17
[CSS] margin collapsing (마진 상쇄)  (0) 2018.08.05
[CSS] display - block과 inline 그리고 inline-block  (1) 2018.08.02
Text 개행 처리 및 글자 자르기  (0) 2017.07.18