지난시간에 레아웃을 구성할때 가장 많이 사용하는 css속성인 padding, margin 속성에 대해설명하면서 전체 넓이와 전체 높이 계산할때 padding값과 margin 값을 주의하면서
넓이,높이를 계산해야 한다고 말씀드렸는데요
box-sizing 속성은 width와 height가 차지하는 범위를 지정할수 있는 속성입니다
그렇다면 box-sizing 속성 값을 보면서 조금더 쉽게 알아보도록 하겠습니다
box-sizing속성에는 자주 사용되는 키워드는 두가지가 있습니다 하나는 content-box 값이며 다른 하나는 border-box 입니다
content-box는 기본적으로 적용되는 값입인데요
box-sizing속성에 content-box값이 들어가게 되면 아래와 같이 계산이 되게 됩니다
전체 너비 = width + 2 x (margin+border+padding)
전체 높이 = height + 2 x (margin+border+padding)
반대로 box-sizing속성에 border-box 값이 들어가게 되면
width 속성과 height속성이 테두리를 포함한 영역의 크기를 지정하게 만듭니다
즉 width 속성과 height속성의 적용범위가 padding속성과 border속성을 포함한다는 뜻으로 해석하시면 됩니다
border-box의 width속성 height속성의 계산방법은 아래와 같습니다
전체 너비 = width + 2 x margin
전체 높이 = height + 2 x margin
오늘은 이렇게 box-sizing속성에 대해서 자세히 알아봤는데요 css3에서 새롭게 추가된 기능인 만큼 앞으로 자주 사용될 가능성이 높으니 꼭 이해하시고 넘어가시는게 좋을것 같네요
이해가 안되시는 분들은 위의 내용도 꼭 참고하세요
댓글 없음:
댓글 쓰기