box-sizing

요소의 크기 계산 기준을 지정

- content-box : 요소의 내용으로 크기 계산 (기본값)

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

HTML

<div class="container">
    <div class="item">Hello</div>
    <div class="item">Hello</div>
  </div>

CSS

.container .item {
width: 100px;
height: 100px;
background-color: orange;
}

.container .item:first-child {
border: 4px solid red;
padding: 20px;
}

100 x 100 px인 박스를 만들고 싶지만 border선 8px, 내여백 40px이 추가돠어서 요소의 크기가 가로, 세로 각각 48px 추가된 148 x 148 이 되어버렸다

CSS

.container .item:first-child {
  border: 4px solid red;
  padding: 20px;
  box-sizing: border-box;
}

border-box는 content + padding +border로 크기 계산을 해서 100 x 100인 박스가 만들어졌다
=> 선, 내여백을 추가했을 때 요소의 크기가 넓어지는 것을 원치 않으면
박스가 커지지 않도록 box-sizing을border-box로 사용

정리

• 실제 가로 너비는?

• width100px; padding: 20px; border 1px solid red;
  142px
• width100px; padding: 20px; border 1px solid red; box-sizing: border-box;
  100px

• box-sizing 속성의 기본값은?
  content-box : 선, 내여백이 추가되면 요소가 커진다

overflow

요소의 크기 이상으로 내용이 넘쳤을 떄. 보여짐을 제어하는 단축 속성

• visible : 넘친 내용을 그대로 보여줌 (기본값)
• hidden : 넘친 내용을 잘라냄
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

HTML

  <div class="parent">
    <div class="child"></div>
  </div>

CSS

.parent {
 width: 200px;
 height: 150px;
 background-color: royalblue;
 margin: 20px;
}

.child {
 width: 300px;
 height: 100px;
 background-color: orange;
}

자식요소가 부모요소보다 커서 넘쳤다 => overflow

CSS

.parent {
  width: 200px;
  height: 150px;
  background-color: royalblue;
  margin: 20px;
  overflow: hidden;
}

hidden 속성값으로 overflow된 부분을 감췄다

overflow: scroll;

넘치는 부분을 스크롤로 확인할 수 있다

가로만 넘쳤지만 scroll은 가로, 세로 각각에 스크롤바를 생성

overflow: auto;

auto는 넘치는 곳에만 스크롤 생성

• 넘치는 경우
  

• 넘치지 않는 경우
  

overflow 발생했을 때, 보여짐을 제어하는 개별 속성

• overflow-x
• overflow-y

-정리

• 요소 넘침을 잘라낼 때 사용하는 속성과 값은?
  속성: overflow, 값: hidden
  overflow: hidden;
• overflow의 기본값은 visible