CSS(SCSS) - box-sizing

1) box-sizing

• box-sizing 이란? Box 요소의 계산 기준을 지정하는 기능을 수행한다. (좀더 명확히 설명하면 요소의 내용만으로 크기를 계산하는 것인데, padding이나 border 같이 요소의 크기가 커지는 속성이 적용됐을때 별도로 수동으로 일일이 수정해야 하는 번거로움이 생기게 된다 그래서 box-sizing을 사용해서 요소의 내용, padding, border 크기로 계산되어 들어가는 개념이다.)

사용 예)

1) content-box

box-sizing: content-box;

2) border-box

box-sizing: border-box;

border-radius 기본 값)

• content-box : 요소의 내용으로 크기 계산
• border-box : 요소의 내용 + padding + border로 크기 계산

2) box-sizing의 실제 가로 너비(width) 적용 방법

.container .item {
  width: 150px;
  height: 150px;
  background-color: orange;
  margin: 10px 10px;
}

.container .item:first-child {
  box-sizing: border-box;
  padding: 20px;
  border: 5px solid black;
  border-radius: 10px;
}

• 실제 첫번째 요소의 width는 150px, 좌,우측 padding 20px, 좌,우측 border 5px씩 적용된다면? 총 200px이 적용된다. (실제 가로 너비 계산 방법 : 150 + 20 + 20 + 5 + 5 = 200px)

.container .item {
  width: 100px;
  padding: 20px
  border: 1px solid black;
  box-sizing: border-box;
}

• 만약 여기서 첫번째 item 요소만 box-sizing이 아닌 item 요소 전체에 box-sizing: border-box를 적용하면? 실제 가로 너비는 100px 이다.