포지셔닝 관련 CSS - box-sizing

포지셔닝 관련 CSS - box-sizing

• 포지셔닝이란 브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 것입니다. CSS 포지셔닝을 이용해 웹 문서의 레이아웃이 만들어집니다.
• 브라우저에서 박스모델의 width와 height 속성은 박스 모델 전체의 너비와 높이가 아니라 박스 모델 안에 있는 콘텐츠 부분의 너비와 높이입니다.
• 웹 문서에 여러 요소를 배치하려면 각 요소의 너비 값을 기준으로 해야 하는데 width 속성 값이 콘텐츠 영역의 너비만 나타내기 때문에 패딩이나 테두리는 따로 계산해야 합니다. 이 때 box-sizing 속성을 사용하면 width 속성 값을 콘텐츠 영역 너비 값으로 사용할지, 패딩이나 테두리까지 포함시켜 사용할지 결정할 수 있습니다.
• 기본형 : box-sizing : content-box / border-box
• 마진은 박스 모델의 일부이지만 박스 모델의 너비는 마진을 포함하지 않고 테두리까지만 포함합니다.
• CSS를 이용해 여러 박스 모델을 화면 상에 배치하려면 박스 모델의 너비 값을 정확히 계산해야 합니다. 만약 width 값을 계산하기 어렵다면 box-sizing : border-box;로 지정해 박스 모델 너비를 알기 쉽게 바꾸어 놓는 것도 좋은 방법입니다.

속성 값	설 명
content-box	width 속성 값을 콘텐츠 영역 너비 값으로 사용합니다. (기본 값)
border-box	width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용합니다.

• exam 예제에서 첫번째 box-sizing : content-box(기본값이므로 따로 설정하지 않음)의 경우 부모박스의 너비 600px안에 자식박스 box1, box2, box3의 width값을 200px로 각각 설정해도 테두리의 width 값이 각 2px가 존재하기 때문에 box의 width 값이 204px씩 되므로 부모의 width값 600px를 넘게 되어 일렬로 배치가 되지 않는다.
• 두번째 box-sizing : border-box를 설정한 경우 콘첸츠 영역안에 테두리의 width 값까지 포함하게 되므로 일렬로 배치가 가능하다.

box-sizing : content-box (테두리의 width값으로 인해 일렬로 배치가 불가능하다)

box-sizing : border-box

<style>
    .exam1, .exam2 {
        width: 600px; height: 200px;
        border: 2px solid;
        margin-bottom: 30px;
    }
    .box1, .box2, .box3 {
        width: 200px; height: 100px;
        border: 2px solid red;
        float: left;
    }
    .box4, .box5, .box6 {
        width: 200px; height: 100px;
        border: 2px solid red;
        float: left;
        box-sizing: border-box;
    }
</style>      

 

 

참고 : HTML5 + CSS3 웹표준의 정석