728x90
box-sizing: border-box
box-sizing: border-box 사용하는 이유
반응형 웹을 만들 때, 영역의 너비값을 %로 처리해야 하는 경우가 많습니다.
width: 100%;
padding: 20px;
해당 태그의 가로 길이는 부모태그의 길이 100% + 가로 padding 40px 부모 태그보다 더 길어져서 부모태그의 길이를 벗어나게 됨
width: 500px;
padding: 20px;
border: 5px
총 가로 영역: 550px
width: 500px;
padding: 20px;
border: 5px;
box-sizing: border-box;
총 가로 영역: 550px
'box-sizing: border-box'를 해주면 패딩, 테두리 포함해서 길이가 계산이 됩니다.
728x90
