[CSS] overflow 속성 알아보기

<div class="parent_box">parent_box
  <div class="child_box">child_box</div>
</div>

.parent_box{
  width:500px;
  height:300px;
  background-color: gray;
  overflow:hidden;
}
.child_box{
  width: 50%;
  height:100%;
  background-color:blue;
}

overflow:hidden; 속성을 넣지 않은 모습. height=100%로 지정했으나 텍스트 때문에 아래로 밀려남. 이때문에 종종 스크롤이 발생할 수 있음.

overflow:hidden; 속성을 넣은 모습. 텍스트 때문에 아래로 밀려난 부분이 잘려서 표시됨.

overflow:scroll 속성을 주게 되면 영역 안에서 스크롤 처리할 수 있음.