HTML/CSS] box-sizing 적용하기

 

요소들을 배치할 때는 요소의 너비와 높이를 계산하는 게 중요합니다. 
그런데 한 요소 안에는 컨텐츠, 테두리(boder), padding가 다 들어있습니다. 그렇다면 요소의 전체 길이를 알려면 컨텐츠 + 테두리(boder) + padding의 합을 구해야겠네요. 생각만해보 복잡하죠? CSS3 이전에는 정말로 요소의 전체 길이를 구하기 위해 일일히 다 계산을 했습니다.

그런데 CSS3 이후부터는 일일히 계산할 필요가 없어졌습니다. 가로길이(width)와 세로길이(height)만 입력하면 똭!하고 요소가 만들어집니다. 바로 box-sizing 덕분이죠. box-sizing은 다음과 같이 사용합니다.

 

box-sizing: border-box 
/* 박스 사이즈에 테두리와 padding이 포함 */
box-sizing: content-box 
/*박스 사이즈에 테두리와 padding이 불포함 */ 

 

참고로 content-box가 기본값입니다. 

다음은 box-sizing을 적용하지 않은 박스입니다.

box-sizing을 사용하지 않으면 box-sizing:content-box가 자동 적용됩니다. 그래서 컨텐츠의 크기가 400X300인 걸 확인할수 있습니다. 요소의 크기에 테두리와 padding이 불포함 되었네요.

 

이번엔 `box-sizing: border-box`를 사용해보겠습니다

 

가로, 세로길이를 확인해볼까요? 이번에는 요소의 크기에 테두리와 padding이 포함 되었네요.

그래서 width = 5+20+350+20+5 =400px, height = 5+20+250+20+5=300px 이 되었습니다.

 

box-sizing: border-box;를 사용하는 경우는 보통 페이지의 모든 요소에  box-sizing을 적용합니다. 모든 요소에 같은 값을 추가 해주려면 아래와 같이 *을 사용하여 적용하시면 됩니다.

* {
  box-sizing: border-box;
}

h1 {
  border: 5px solid #000000;
}

p{
  height: 300px;
  width: 400px;
  padding: 20px;
  border: 5px solid gold;
}