CSS) overlfow overflow: auto; overflow: hidden; overflow: scroll; overflow: visible;

1) overflow
요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어

속성 값

값	의미	기본값
visible	넘친 부분을 자르지 않고 그대로 보여줌	visible
hidden	넘친 부분을 잘라내고, 보이지 않도록 함
scroll	넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함
auto	넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼수 있도록 함

※ scroll: 강제
※ auto: 자동

 

사용법)

overflow: visible;

html

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent {
  width: 300px;
  height: 250px;
  border: 4px solid;
  overflow: visible;
}
.parent .child {
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}

 

overflow: hidden;

html

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent {
  width: 300px;
  height: 250px;
  border: 4px solid;
  overflow: hidden;
}
.parent .child {
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}

 

overflow: scroll;

html

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent {
  width: 300px;
  height: 250px;
  border: 4px solid;
  overflow: scroll;
}
.parent .child {
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}

※ 위, 아래(스크롤 할 영역이 없지만) 좌우 스크롤이 생긴다.

 

overflow: auto;

html

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent {
  width: 300px;
  height: 250px;
  border: 4px solid;
  overflow: auto;
}
.parent .child {
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}

※ 스크롤이 필요한 곳에만 스크롤이 생성된다. 대부분의 경우 auto를 사용한다.