개발자 도구를 통해 해당 페이지 확인 결과, html의 모든 요소들은 모두 box로 렌더링되어 표현되는 것을 알 수 있다.
일정한 형태의 model로 구성되어 있기 때문에 이를 box model이라고 한다.
아래와 같이 box model은 margin
,border
,padding
,content
4개의 층으로 구성되어있다.
margin
: 바깥 여백, 즉 요소와 요소사이의 간격을 나타낸다.
border
: 테두리를 나타낸다.(border = 굵기 스타일 색상
으로 표현함(ex) border = 1px solid black
)
padding
: content
와 border
사이 여백 공간을 나타낸다.
content
: 실질적 내용이 들어있는 상자(width = ""
, height =""
를 통해 표현)를 나타낸다.
margin
, padding
과 같은 여백 값의 경우, margin-top
, padding-top
처럼 특정 영역을 선택하여 일일이 지정할 수 있지만, 속기형 방식을 통해 다음과 같이 표현할 수 있다..a { margin = 10px 20px 30px 40px; } .b { margin = 10px 20px; } .c { margin = 10px 20px 30px; }
- 이때 표현 순서는
top
,right
,bottom
,left
순으로 표기된다..b
선택자의 경우top
,right
값만 지정되어 있으나top
은bottom
과 세트이므로bottom
또한10px
을 갖게 된다. (right
은left
와 같으므로20px
을 갖음).c
선택자는top
,right
,bottom
까지만 주어져 있으며left
의 값은right
과 같은30px
을 갖게 된다.
<div>
태그를 통해 box
를 생성하면 다음과 같이 생성된다.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box1 { width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div class="box1">box1</div> </body> </html>
하지만 이때 생긴 box
는 개발자 도구에서도 알 수 있 듯, box-sizing = content-box
기준으로 width
, height
값이 지정이 됐기 때문에 스타일링 값에 큰 오류가 생기게 된다.
때문에 box-sizing
을 할 때는 content
가 아닌, border
기준으로 하게 된다. 이를 위해 box-sizing = border-box
속성 값을 부여를 해준다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box1 { box-sizing: border-box; width: 100px; height: 100px; background-color: green; padding: 20px; } </style> </head> <body> <div class="box1">box1</div> </body> </html>
box-sizing:border-box
속성값을 통해, border
기준으로 sizing이 된 것을 알 수 있다.