Programmers

1) box-sizing 요소의 크기 계산 기준을 지정 속성 값 값 의미 기본값 content-box 너비(width, height)만으로 요소의 크기를 계산 content-box border-box 너비(width, height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산 사용법 html css .box { width: 200px; height: 200px; background: orange; padding: 40px; border: 10px solid red; } ※ 개발자도구를 통해 영역을 확인해보면 200x200인 default(content-box)를 고정하고 padding을 더하기 때문에 당연히 크기가 커진다. border-box속성을 추가하면 외부 ..

paddding 요소의 '내부(안) 여백'을 지정 ※ 크기 증가 추가된 padding 값만큼요소의 크기가 커지는 현상 예제) ▷ box-sizing: border-box; 여백이 안쪽으로 나타내게 하는 방법!