css에서의 여러가지 레이아웃 기능들을 살펴보겠습니다.

margin : auto

앞에서 display 속성에 대해서 포스팅할 때, block은 새줄에서 좌우 모든길이를 차지한다고 했었습니다.
그러나 block 레벨 엘리먼트에 width길이를 지정해주면 그 길이만큼만 차지하게 됩니다.
그 후, margin : auto 설정을하면 해당 엘리먼트안에서 가로 중앙에 오게 할 수 있습니다.
지정한 width만큼의 block레벨 엘리먼트가 가로 중앙에 위치하게 됩니다.

max-width, min-width

width대신 max-width, min-width를 사용하면 브라우저의 크기에따라 화면이 깨지는등의 리사이즈등을 어느정도 제어할 수 있습니다.
max-width는 최대길이 min-width는 최소길이를 설정해줍니다.
예로 max-width를 500px로 설정해놓으면 창의 크기와 상관없이 엘리먼트는 500px로 고정되게 됩니다.
min-width를 100px로 설정해놓으면 100px 이하의 창에서도 더이상 div가 축소하지 않습니다.

box model

위에서 width에 대해 포스팅을 하였는데 이 width에 대해 문제점이 생겼습니다.
엘리먼트에 padding과 border-width에따라 같은 width라도 크기가 달라질 수 있기 때문입니다.

이렇게 그냥 육안으로 확인하기에도 같은 width값이지만 사이즈가 차이납니다.
이것을 방지하는 것이 box-sizing입니다. css속성에 box-sizing을 주면 설정된 width만큼의 엘리먼트로 생성됩니다.

이렇게 border-box로 설정을해주면 padding과 border-width 속성이 먹은 상황에서 width가 변하지 않습니다.
그러나 box-sizing은 IE8버전 이상에서만 사용이 가능합니다.