(웹) element 배치하기 - box-sizing

box-sizing

박스의 크기를 화면에 표시하는 방식을 변경.

해당 옵션의 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다.

최근엔 모든 element에 이 값을 지정하는 경우가 늘고 있다.

 

box-sizing연습하기

일단 빈 옵션만 설정.

 

참고. padding - object내의 내부여백을 의미한다.

padding: 10px; -> padding: 100px;

padding값을 변경했더니 내부의 여백이 증가함에 따라 박스의 크기도 커졌다.

 

하지만 박스의 크기는 최대한 유지하고 싶다.

 

box-sizing:border-box옵션 추가.

border-box옵션 -> element의 크기를 최대한 고정하면서 padding값을 늘릴 수 있다.

옵션이 들어간 element의 크기가 최대한으로 줄어들었다.

 

padding의 값 50으로 변경.

padding 값 10을 주었을 때의 크기와 동일.

단, 박스 안 내용이 탈출할 수 있음.

 

유용하게 사용해보자!