✔️ box-sizing 속성은 요소(element)의 너비와 높이를 계산하는 방법을 지정한다. content-box는 css의 기본 설정으로, 크기값을 컨텐츠 영역에 적용하고 border와 padding값은 추가로 더해진다. border-box는 border와 padding도 요소의 크기값에 포함하기 때문에 컨텐츠 영역이 줄어들게 된다. 예를 들어 content-box설정에서 height값을 100px주고, padding값을 10px, border를 5px주게되면 총 높이는 100+10*2+5*2=130px가 된다. 반면 border-box설정을 주게되면 총 높이는 padding값과 border값과는 상관없이 100px이 된다. 참고 - https://developer.mozilla.org/ko/doc..
css 2022. 3. 5. 15:09
✔️ box-sizing 속성은 요소(element)의 너비와 높이를 계산하는 방법을 지정한다. content-box는 css의 기본 설정으로, 크기값을 컨텐츠 영역에 적용하고 border와 padding값은 추가로 더해진다. border-box는 border와 padding도 요소의 크기값에 포함하기 때문에 컨텐츠 영역이 줄어들게 된다. 예를 들어 content-box설정에서 height값을 100px주고, padding값을 10px, border를 5px주게되면 총 높이는 100+10*2+5*2=130px가 된다. 반면 border-box설정을 주게되면 총 높이는 padding값과 border값과는 상관없이 100px이 된다. 참고 - https://developer.mozilla.org/ko/doc..