생활코딩 : https://opentutorials.org/course/2418/13405
small, large로 이름지은 두가지 텍스트 박스를 만든다.
하나는 10px 다른 하나는 30px로 border를 만들고
같은 width를 적용시켜 본다.
두개 박스의 전체적인 크기가 다르다.
왜냐하면 width는 border등을 고려하지 않은 부분을 기준으로 적용되기 때문이다.
이럴 때 필요한 개념이 box-sizing: border-box;
모든 값을 포함해서 width적용하기에 보더크기가 달라도 전체 길이는 같게 된다.
각 값에 적용하거나
*{box-sizing: boder-box;}로 전체에 적용해주기.
<!DOCTYPE><html><head><style>div{margin: 20px;width:150px;/* 둘다 똑같은 width값을 줬는데 전체적길이가 다르다.왜냐하면 width값은 전체길이기준이 아니라, border를 고려하지 않은부분(즉 흰 부분) 전체적인 길이가 동일하도록 width를 줄 때 사용하는 것이boxsizing임. *//*적용할 부분의 그룹에 box-sizing:border-box;를 하거나화면 전체의 모든 것은 box-sizing로 적용하라고 말하는*{box-sizing: border-box;}를 넣어주면 됨. */box-sizing: border-box;}#small{border:10px solid black;}#large{border:30px solid black;}</style></head><body><div id="small">Hello</div><div id="large">Hello</div></body></html>
