[CSS] overflow 속성 정리

overflow

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

• overflow-x를 사용하면 x축(가로)만 개별적으로 제어할 수 있다
• overflow-y를 사용하면 y축(세로)만 개별적으로 제어할 수 있다

 

overflow의 속성

1. visible (기본값)

넘친 내용을 그대로 보여줌

overflow: visible;

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

.parent {
  width: 200px;
  height: 150px;
  background-color: royalblue;
  margin: 20px;
  padding: 20px;
  overflow: visible;
}
.child {
  width: 300px;
  height: 100px;
  background-color: orange;
}

 

2. hidden

넘친 내용을 잘라냄

overflow: hidden;

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

.parent {
  width: 200px;
  height: 150px;
  background-color: royalblue;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
}
.child {
  width: 300px;
  height: 100px;
  background-color: orange;
}

 

3. scroll

넘친 내용을 잘라내고 x축과 y축에 모두 스크롤바를 생성

overflow: scroll;

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

.parent {
  width: 200px;
  height: 150px;
  background-color: royalblue;
  margin: 20px;
  padding: 20px;
  overflow: scroll;
}
.child {
  width: 300px;
  height: 100px;
  background-color: orange;
}

 

4. auto

넘친 내용이 있는 경우에만 잘라내고 스크롤바를 생성

overflow: auto;

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

.parent {
  width: 200px;
  height: 150px;
  background-color: royalblue;
  margin: 20px;
  padding: 20px;
  overflow: auto;
}
.child {
  width: 300px;
  height: 100px;
  background-color: orange;
}