[CSS] box-sizing: border-box;

배정규·2020년 6월 23일
0

안녕하세요! 시즈입니다:)
[CSS] box-sizing: border-box;에 대해서 알아봅시다.

우선 box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.

그리고 속성 값으로 content-box와 border-box 2가지가 있습니다.
content-box가 기본값이고 이 친구는 박스의 너비(width)와 높이(height)에 테두리(border)와 안쪽 여백(padding) 값이 추가 됩니다.

이 말은 테두리와 여백이 없으면 설정한 너비와 높이로 박스가 만들어지지만,
테두리와 여백에 값이 있다면 그만큼 박스의 너비와 높이가 커진다는 말입니다.

그렇기 때문에 자신이 설정한 박스의 너비와 높이보다 커지는 결과가 나타나며,
테두리와 여백 값까지 고려하여 너비와 높이 설정해야할 수도 있습니다.(머리 아프겠죠?)

BOOM! 여기서 border-box가 등장하여 이 문제를 해결해줍니다.

자신이 원하는 너비와 높이로 박스를 만들고 싶다.
안쪽 여백(padding)이나 테두리(border) 값을 주더라도, 내가 지정한 너비와 높이가 바뀌지 않았으면 좋겠다.

border-box를 사용하시면 됩니다!

border-box는 padding과 border를 우리가 설정한 width와 height에 포함시킵니다.
박스 크기를 설정할 때 안쪽 여백이나 테두리를 고려하지 않고 원하는 크기를 만들 수 있다라는 것입니다.

border-box를 사용하면 padding(안쪽여백)과 border(테두리)를 주면서 원하는 대로 박스의 크기를 설정할 수 있겠죠? 참 좋은 친구입니다^^

박스를 실제로 만들어보시고 box-sizing: content-box와 box-sizing: border-box를 실제로 비교해보시면 좋을 것 같습니다! 그럼 바로 이해가 가실거에요.

[CSS] box-sizing: border-box 는 여기까지입니다:)


여기까지!
제 글이 조금이라도 도움이 되었으면 좋겠습니다:)
읽어주셔서 감사합니다.

Seize the day!


profile
Seize the day

0개의 댓글